AWS - Nginx에 React 프로젝트 빌드 후 배포하기

로컬에 존재하는 React 프로젝트를 AWS EC2에 배포해보자. 

배포하기전에 EC2에 Nginx가 미리 설치되어 있어야 하고, 보안그룹의 인바운드 규칙에 80번 포트가 추가되어 있어야 한다.

 

1. 내 로컬 PC에서 React 프로젝트 빌드

npm run build

 

 

2. SSH로 AWS 접속 후, Nginx 기본 설정 비활성화

sudo rm /etc/nginx/sites-enabled/default

 

 

3. 로컬에 있는 build 폴더를 EC2 서버로 옮기기

scp -i [pem파일경로] -r build/ ubuntu@[AWS퍼블릭ip]:~/react-app
// 로컬의 build 폴더를 서버의 홈 디렉토리에 react-app 이라는 폴더로 만든다.

 

4. 로컬에서 가져온 폴더를 Nginx 루트로 이동

sudo mv ~/react-app /var/www/react-app

 

5. 권한설정

sudo chown -R www-data:www-data /var/www/react-app

 

6. Nginx 설정

sudo vi /etc/nginx/sites-available/react-app

이 명령어를 통해 vi 에디터로 설정파일을 새로 만드는 동시에 파일을 연다. (처음엔 sudo 명령어 붙여야 저장이 된다. 안그러면 계속 읽기모드로 켜짐)

 

server {
    listen 80;
    listen [::]:80 default_server;
    server_name _;

    root /var/www/react-app;
    index index.html;

    location / {
            #try_files $uri /index.html;
            try_files $uri $uri/ =404;
    }

}

나는 이와같이 작성했다. ipv6 지원 하지않을거면 listen [::]:80 default_server 부분은 제외해도 된다.

명령어 모드에서 :wq를 하고 나온다.

 

7. 설정 적용

sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/
sudo nginx -t  # 설정 확인
sudo systemctl restart nginx

 

sudo ln -s /etc/nginx/sites-available/react-app /etc/nginx/sites-enabled/ 명령어로 sites-available 폴더에 만든 설정 파일들을 sites-enabled 로 연결하는 심볼릭 링크를 생성한다.

 

그리고 nginx를 restart하면 배포완료 !