Introduction

이전 소켓통신을 활용한 웹 채팅프로그램은 로컬환경에서 구성하였다.
즉, 다른 컴퓨터에서 접속할 수 없는 내 컴퓨터에 내가 서버를 열고, 내가 창 두개 띄워서 접속하는 그런 방식이다.

이젠 이를 다른 컴퓨터의 다른 사람 및 친구들도 접속할 수 있도록 AWS에 업로드해보자!

기존 로컬환경에서 동작하는 웹 채팅프로그램의 소스코드는 여기에 전부 있다.

How?

소켓 통신을 하기 위해서는 소켓통신 서버와 리액트 서버 2가지를 사용하였으므로 각각의 서버가 따로 필요하다.

하나는 소켓 통신 데이터를 받아 처리하고, 클라이언트들에게 뿌려주는 express서버, 또 하나는 클라이언트가 접속해서 보게되는 화면인 리액트 서버이다.

따라서 2개의 컴퓨터(EC2 인스턴스)가 필요하다.

바로 따라해보도록 하자.

1. EC2 생성

EC2 인스턴스를 생성하는 부분은 프리티어 버전의 t2.micro를 사용하도록 한다. 싸게 싸게 쓰자.

다음 그림과 같이 작성하도록 한다.

키 페어(로그인)에서 key의 경우 새 키페어 생성을 통해 .pem으로 생성하도록 한다.

맨 밑 요약에서 총2개의 EC2인스턴스가 필요하므로 2개를 생성하도록 한다.

2. EC2 인스턴스 확인

자 이제 생성한 인스턴스를 보면 이름이 똑같은 인스턴스 2개가 생성된 것을 확인할 수 있을 것이다.

보기에 헷갈리니 이름을 다음과 같이 소켓 서버인 backend로 사용할 부분과 리액트 서버인 frontend를 사용할 부분의 이름을 서로 다르게 편집 해주도록 하자.

3. 보안 그룹 편집

이제 보안 그룹을 편집해주어야 한다.

보안 그룹이란 해당(EC2)로의 인바운드/아웃바운드 접근 권한을 설정할 수 있는 그룹인데, 이를 적절하게 지정해 주어야 외부 컴퓨터(친구나,,다른 사람들,,)이 채팅 서버에 접근할 수 있다.

두개의 EC2는 함께 생성하였으므로 같은 보안 그룹을 가지고 있다.
하나를 누른 후 아래 보안 그룹을 눌러 보안 그룹페이지로 입장해주도록 하자.

여기서 해주어야 할 부분은 인바운드 규칙만 편집해 주면된다.
인바운드 규칙은 외부PC 또는 서버에서의 해당 EC2인스턴스로의 접근 규칙이라고 생각하면 된다.

아래와 같이 편집해주도록 한다.
총 4개의 인바운드 규칙을 추가해주자.

• HTTP : 인터넷 접속
• HTTPS : 인터넷 접속
• SSH : 외부에서 서버로 접속
• 리액트 서버가 동작되는 TCP 3000번 포트
  

4. 백엔드 서버 업로드

이제 로컬에서 동작하던 백엔드 서버(소켓 서버)를 EC2에 올려 보도록하자.

4.1 Cors 수정

먼저 app.js 파일의 cors 부분을 다음과 같이 전체 접속(*)이 가능하도록 수정한다.

이를 설정하지 않으면 CORS 허용이 되지 않았기에 동작 중인 리액트 서버로 내 PC에서 접속할 시 허용된 IP주소가 다르게 되므로 소켓 서버쪽으로 접속이 허용되지 않아 CORS 오류가 발생하게 된다.

이해가 복잡하다면 결과적으로 두번 거쳐 접속하기 때문에 허용된 IP가 다른 문제라고 생각하면 된다.

CORS에 관해서는 여기를 참고.

4.2 파일 업로드

이제 로컬환경에서 동작했던 채팅 프로그램을 본격적으로 서버에 업로드 해보도록 하자.

일단 소켓 서버에서 EC2로 옮겨야하는 파일은 app.js만 옮기면 된다.
업로드 하는 방법은 사실 본인이 편한대로, 아는 방법대로 하면 된다.

1. 기존의 프로젝트 파일을 git hub에 업로드 후, 이를 git clone 하기
2. SCP을 통해 Windows파일을 Linux 서버로 전송.
3. FileZila를 통한 업로드 (클릭 시 이동)
4. app.js코드 복사 붙여 넣어서 만들기 (vi app.js)

아무 방법이나 취향것 쓰면된다. 필자는 3번이 매우 편리하게 느껴지고 사용하므로 여기서도 3번을 썼다.

4.3 서버 실행

파일을 업로드(EC2로 이동) 했다면 이제 서버를 실행시켜보자.

서버 인스턴스에 연결을 눌러 인스턴스에 접속한다.

Node.js 서버가 동작할 수 있도록 패키지를 설치해준다.

sudo apt update
sudo apt install npm
sudo apt install nodejs
npm i

설치 이후 node app.js를 통해 서버를 실행시키면 다음과 같이 EC2에서 서버가 동작하게 된다.

5. 클라이언트(React) 업로드

이제 로컬에서 동작하던 프론트 서버(React)를 EC2에 올려 보도록하자.

5.1 App.js 소스코드 수정

소켓 채팅이 이루어지는 서버가 이젠 로컬이 아닌 EC2에 업로드 되었으므로, 소켓을 연결하는 주소를 변경해 주어야한다.

소켓 서버 EC2의 퍼블릭 IP로 소스코드를 변경해주자.

5.2 React 및 패키지 설치

이제 React를 사용할 수 있도록 패키지 및 React를 설치하도록 하자.

• npm관련 import

curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
sudo apt install nodejs
sudo apt-get update
sudo apt-get install nodejs

• react 서버를 설치

npx create-react-app frontend
cd frontend
npm install socket.io-client

5.3 EC2로 파일 업로드하기

로컬환경에서 가져와야 할 파일은 총 3개다.
App.js App.css index.js

업로드 하는 방법은 본인이 편한대로, 아는 방법대로 하면 된다.
여기서 [5.2 react 서버를 설치]하는 과정에서 App.js App.css index.js 파일들이 기본적으로 생성되었으므로, 덮어 씌우거나 지우고 해당 위치에 다시 생성해주면 된다.

1. 기존의 파일들을 git hub에 업로드 후, 이를 git clone 하기
2. SCP을 통해 Windows파일을 Linux 서버로 전송.
3. FileZila를 통한 업로드 (클릭 시 이동)
4. App.js App.css index.js 소스코드를 vi 에디터로 열고 수정하기

5.4 서버 실행

해당 명령어를 통해 서버를 실행시키도록 하자.

cd frontend
cd src
npm start

다음과 같은 결과가 나오면 성공이다.

6. 채팅 실행 및 확인

채팅은 클라이언트(리액트)에서 이루어진다.
따라서 리액트 서버의 퍼블릭IP:3000번 포트로 접속하면 된다.

해당 아이피로 접속해보면??

양방향 채팅(소켓 통신) 또한 잘 되는 것을 확인할 수 있다.
이젠 친구 컴퓨터나 휴대폰, 노트북 등등 다른 곳에서도 해당 채팅 서버로 접속할 수 있다!.

끝. 😀