[React & Spring Boot] 클라이언트 배포(2) : Nginx, EC2

이번 글에서는 EC2 인스턴스에서 Nginx, pm2를 이용해 리액트 프로젝트를 배포해볼 것이다.

글 중간중간에 EC2에서 다운받으라는 것이 있으면 apt-get install로 다운받으면 된다.

 

본인은 sudo su 후 root에서 모든 명령어를 진행하였다.

 

목차
1. Clone React Project Repository
2. Nginx 설정
3. PM2로 빌드 파일 배포

 

 

---

1. 리액트 프로젝트 Clone

EC2 인스턴스에서 리액트 프로젝트를 클론해서 받아올 것이다.

$ git clone 깃허브레포지토리주소

 

클론 후, 해당 프로젝트 폴더로 이동한다.

$ cd 리액트프로젝트폴더명

 

원래는 클론 후에 npm run build 명령어로 EC2에서 리액트 프로젝트 빌드를 하는 방법도 있지만, 내가 가진 인스턴스는 용량이 부족해서 그런지 자꾸만 무한 대기가 걸렸다. 그래서 그냥 로컬에서 빌드한 프로젝트를 깃허브에 그대로 올리고, 인스턴스가 이를 받아서 그대로 사용하는 방법으로 진행한다.

 

  ll 명령어로 보면 build 폴더가 있다. 우리는 이 build 폴더만 이용하여 배포할 것이다.

 

이때, build 폴더에 대한 접근 권한을 777로 변경해주고 시작한다. 
그래야 외부에서도 리액트 페이지에 접근할 수 있다.

$ chmod 777 build

 

 

2. Nginx 설정

2-1. Nginx 설치

Nginx가 없으면 install 한다.

$ sudo apt-get install nginx -y

 

2-2. Nginx 설정 파일 수정

Nginx 설정파일을 연다.

$  sudo vi /etc/nginx/sites-enabled/default

 

설정 파일을 아래와 같이 설정한다.

server {
        listen 80;
        
        index index.html index.htm index.nginx-debian.html;

        server_name www.babyakmate.com;

        location / {
                root /home/ubuntu/babyak-client/build;
                proxy_set_header HOST $host;
                proxy_pass http://127.0.0.1:3000;
        }
 }

(1)  80번 포트로 들어오는 요청중 /으로 시작하는 것들을 모두 127.0.0.1:3000으로 넘김

• listen 80;
• location /
• proxy_pass http://127.0.0.1:3000

(2) 들어오는 요청의 도메인 설정

• server_name www.babyakmate.com

(3) 기본적으로 빌드 폴더의 index.html 파일을 제공 (리액트 화면)

• index index.html ~~

 

2-3. 설정 파일 문제 여부 확인

config 파일에 문제가 없는지 확인해본다.

/etc/nginx/sites-enabled#   sudo nginx -t

 

문제가 없으면 아래와 같은 메시지가 출력된다.

 

2-3. 설정 파일 반영

/etc/nginx/sites-enabled#   sudo service nginx reload

 

2-4. nginx 재시작

설정 파일을 변경한 경우, 아래 명령어로 nginx를 다시 시작 해줘야 한다.

/etc/nginx/sites-enabled#  sudo service nginx restart

 

 

3. PM2로 리액트 프로젝트 배포

해당 과정은 아까 clone한 리액트 프로젝트 최상단에서 진행한다. (ll 하면 build/ 보이는 위치)

 

[참고]  PM2의 여러가지 명령어들

(1) 현재 돌아가고 있는 프로세스 보기

$     pm2 list

 

(2) 현재 돌아가고 있는 모든 프로세스 종료하기

$     pm2 kill

 

3-1. pm2 비우기

pm2 list, pm2 kill로 현재 아무것도 없는 상태로 만든다.

 

3-2. 리액트 프로젝트 배포

$    pm2 serve build/ 3000

 

이제 https://www.hello.com 에 들어가보면 프로젝트가 잘 배포된 것을 확인할 수 있다!  

야호 >_<