[React Web] AWS EC2 배포 ALL-IN-ONE

React 프로젝트 AWS EC2에서 우분투 환경으로 배포하는 방법에 대해 알아보자. 필자도 react 배포 시 아래의 내용을 참고하여 배포를 한다. 그리고 오류가 난다면 주기적으로 추가하고 있다.

 

0. 들어가면서

 creat-react-app으로 local 개발 시 환경과 배포(production) 개발 환경은 달라야 한다. 따라서, 아래의 방법을 보고 우선 셋팅을 진행한다.

 

[react] 실무 개발 환경/배포 환경 설정(.env)

 

천천히 읽어보면 그렇게 어려운 것은 없을 것이다. 만약 nodejs에서 express로 개발을 하여 백엔드를 만들었다면 아래의 방법을 참고하면 도움이 될것이다. 만약 react와 nodejs로 둘다 EC2에서 배포를 한다면 파일을 client와 server로 하나씩 만들어서 각각 폴더 안에서 배포를 진행하면된다.

 

[nodejs/express] 핵심 기초 정리

[nodeJS] AWS EC2 배포 ALL-IN-ONE

 

전반적인 frontend/backend nodejs에 대한 내용은 아래에서 확인 가능하다.

[Web/nodejs] - nodejs 기초 총 정리

 

우분투 18.04 LTS 기준으로 만들어본다.

 

1. AWS EC2 시작

EC2에 접속하고 인스턴스 시작을 누른다. 그 후에 18.04 우분투를 선택한다.

 

보안 그룹 구성 (인바운드/아웃바인드 규칙)

 "인바운드 규칙"을 누르고 "인바운드 규칙 편집" 버튼을 눌러서 수정한다. 외부에서 서버로 네트워크 접근할 때 허용할 포트를 설정하는 규칙으로 웹 서버 구축 시 필수적으로 필요하다. HTTP(80)과 HTTPS(443) 포트를 허용해야 한다. 기본적으로 HTTP 접근을 HTTPS로 redirect 시켜주기 위해서 HTTP를 사용한다.

 

포트 80과 포트 443은 자동할당되며, 소스는 0.0.0.0/0과 ::/0을 모두 할당된다. 0.0.0.0/0는 IPv4용이고, ::/0은 IPv6용이다.

 

포트를 열어줄 때 주의 할 점은 본인이 사용하는 포트도 열어줘야 한다. nodejs express에서 3000포트를 사용한다면 3000포트를 할당하고 0.0.0.0/0과 ::/0을 추가한다.

 

 

2. nodejs, npm 설치

기본적으로 curl이 설치되어 있어야한다. curl 설치하자. 이 때 아래와 같이 build-essential 패키지를 설치해야한다. 설치 하지 않으면 C나 C++ 개발 컴파일 시 필요한 stdio.h 등의 기본 라이브러리가 설치가 안되어 에러가 발생할 수도 있다.

$ sudo apt-get update
$ sudo apt-get install -y build-essential
$ sudo apt-get install curl

 

주의 ) 우분투에서 바로 apt-get 명령어로 nodeJS를 설치하면 최신버전이 아닌 낮은 버전이 설치 된다.

curl을 활용하여 nodejs를 설치한다. 아래의 예는 node.js 10.x버전으로 버전 10을 설치한다. ( + npm 설치 )

$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
$ sudo apt-get install -y nodejs


// npm 설치
$ sudo apt install npm


// 설치 후 버전 확인
$ npm -v
$ node -v

 

 

 

3. git 설치

> 보통은 EC2에 기본적으로 설치가 되어 있다. 사실 git이 아니라 FileZilla같은 것들을 활용해서 파일 자체를 옮겨도 되지만, 대부분 git을 사용하여 프로젝트를 진행하고 있을 것이라 판단된다. 따라서 git pull을 이용해서 옮기기 위해 git을 설치한다.

 

// 설치 (위치는 dir(~))
$ sudo apt install git

// 설치 확인
$ git

 

 

 

- git remote 연결

보통 나는 /client 폴더에 frontend 코드를 넣고 /server에 backend 코드를 넣는다.

$ git clone https://your/git/repository
$ cd [폴더명]
$ npm install

// build
$ npm run build

 

 

BUILD ERROR

build 시 error:0308010C:digital envelope routines::unsupported 에러 발생 시 아래의 코드를 치자. nodejs 버전이 너무 높아서 나는 에러다.

export NODE_OPTIONS=--openssl-legacy-provider

 

 

4. serve 배포

- serve 패키지를 활용한 배포 (pm2 배포는 아래에서 확인하자.)

$ npx serve -s build
Need to install the following packages:
  serve
Ok to proceed? (y)

 

xsel ERROR

xsel 에러 발생 시 설치

$ sudo apt install xsel

 

포트 변경 명령어

npx serve -l 5000 -s build

 

 

 

재시작

react git pull 시 아래의 명령어로 재시작한다.

$ git pull
$ npm run build
$ npx serve -l 3000 -s build

 

5. pm2 배포

위방법 말고 아래와 같이 하면 pm2로 3000포트로 배포가 가능하다.

$ pm2 serve build/ 3000

// 싱글 페이지에서 다른곳도 리다이렉트 하고 싶은 경우(url 접속 등)
$ pm2 serve build/ 3000 --spa

 

프로젝트가 git pull을 통해 변경 사항이 있다면, 아래의 명령어로 재시작한다.

 

 $ pm2 restart all

 

pm2를 중단하는 방법은 $ pm2 kill 을 하면 된다.

 

 

---

 

Nginx로 배포하기

 

Nginx는 Apache와 같은 웹서버이다. npm start 명령어로 실행하여 브러우저에서 확인하는 것은, 개발 편의를 위한 웹서버이다. 따라서 배포할 때는 Nginx와 같은 효율적이고 안정적인 웹서버를 사용하자.

 

우분투 18.04 LTS 기준으로 만들어본다.

npm start로 실행을 확인 했으면, 빌드를 한다. 웹서버는 빌드된 파일을 사용하기 때문이다.

$ npm run build

이제 react를 Nginx 웹서버에서 실행되도록 만들어보자.

 

 

Nginx 설치

$ sudo apt install nginx

 

설치 후에 /etc/nginx 경로를 확인해보면 새로운 파일들이 생성되어 있다.리액트가 담겨진 폴더(폴더이름을 /client 라고 가정하겠다.)에 대한 설정을 하자.

 

$ cd /etc/nginx/sites-available/
$ sudo vim client

 

파일 이동 후에 sudo vim client로 임의의 이름의 client라는 파일을 만든다(다른 이름도 가능). 그리고 내부에 아래와 같이 적고 :wq!로 저장을 한다.

 

server{
    listen 80;
    server_name 1111.111.11.11;
    
    location/ {
    	proxy_pass http://127.0.0.1:5000/;
    }
}

 

• listen은 기본 포트인 80포트를 듣고 있다는 말이다.
• server_name 부분에는 ec2 에서 설정된 ip 주소를 넣어준다.
• proxy_pass는 이동 하고자 하는 위치의 주소를 적어준다.
• 정리하면 1111.111.11.11:5000 으로 현재 접속이 된다면, 1111.111.11.11로 접속 시 1111.111.11.11:5000 화면이 뜨게 한다.

 

위의 파일을 /sites-available에서 /sites-enabled로 이동되게 한다. 명령어는 아래와 같다.

 

$ cd /etc/nginx/sites-enabled/
$ sudo ln -s /etc/nginx/sites-available/client client

 

웹서버가 동작될 때 sites-enabled에 있는 설정파일을 참조하도록, 위 명령어로 /etc/nginx/sites-available/ 파일을 /etc/nginx/sites-enabled/에도 만든다. 

 

 

이제 nginx를 재시작하자.

 

$ sudo service nginx reload

 

이제 포트 번호를 적지 않아도 접속이 가능하다.