[React] EC2 인스턴스에 React 프로젝트 배포

모든 과정은 EC2 인스턴스 ssh에서 진행한다.

 

0. React Project를 담을 폴더 생성

나는 'client'라는 이름의 폴더를 만들고, 해당 폴더로 이동했다.

$    mkdir client

$    cd client

 

1. Github에 있는 React 프로젝트 클론

$    git clone 레포지토리 주소

$    cd 레포지토리명   ( /client/myRepository )

나는 /home/ubuntu/client/babyak-front-ts 경로였다.

 

2. Nginx 설정

(1) Nginx 다운로드

(2) config  파일 수정

$     cd /etc/nginx/sites-enabled

$     sudo vim default

 

server {
        # listen 80 default_server;
        # listen [::]:80 default_server;
        listen 80;

        # SSL configuration
        #
        # listen 443 ssl default_server;
        # listen [::]:443 ssl default_server;
        #
        # Note: You should disable gzip for SSL traffic.
        # See: https://bugs.debian.org/773332
        #
        # Read up on ssl_ciphers to ensure a secure configuration.
        # See: https://bugs.debian.org/765782
        #
        # Self signed certs generated by the ssl-cert package
        # Don't use them in a production server!
        #
        # include snippets/snakeoil.conf;

        root /home/ubuntu/client/babyak-front-ts/build;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        # server_name localhost;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                # try_files $uri $uri/ =404;

                proxy_set_header HOST $host;
                proxy_pass http://127.0.0.1:3000;
        }
 }

 

▷ config 파일 오류 없는지 검사하기

$     sudo nginx -t

 

▷ nginx 재시작하기

$     sudo service nginx restart

 

 

 

3. pm2로 프로젝트 띄우기

(1) 3000 포트로 띄우기

이 경우 인스턴스의 public ip : 3000 으로 접근하면 리액트 프로젝트가 배포되어 있다.

$     pm2 serve build/ 3000

 

 

※ PM2 명령어

▷ 현재 돌아가고 있는 프로세스 보기

$     pm2 list

 

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

$     pm2 kill