EC2에 react 자동 배포하기4 (github actions + S3 + codedeploy) - Nginx로 React 앱 배포

Nginx는 웹서버로 React 앱을 배포할 때 사용할 수 있다.
우분투 18.04 환경에서 Nginx로 React앱을 배포해보자

Nginx 설정

Nginx를 설치한다.

sudo apt-get install nginx

설치가 끝나면 /etc/nginx 경로에 파일들이 생성된다.
기본화면으로 연결되는 Nginx 설정파일들이 이미 만들어져 있는 상태인데
우리가 만드는 설정과 겹칠 수 있기 때문에 모두 지우고 시작한다.
아래 경로에 있는 default 파일들을 삭제한다.

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

이제 myapp에 대한 Nginx 설정 파일을 생성한다.
아래 경로로 이동해서 설정파일을 만든다.

cd /etc/nginx/sites-available/
sudo touch myapp.conf

myapp.conf의 내용은 다음과 같이 입력한다.
root의 /home/ubuntu/deploy-fe/build 는 React의 빌드 산출물 경로이다.

server {
  listen 80;
  location / {
    root   /home/ubuntu/deploy-fe/build;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

• listen 80은 포트 80에 대한 설정을 의미한다.
• location /는 URL이 '/'가 포함된 경로에 대한 설정을 의미한다.
• root는 실행할 파일들의 루트 위치를 의미합니다. 위에서 빌드한 파일 경로를 입력하면 된다. - index는 인덱스의 파일들을 지정하는 곳이고, 이 파일들 중 꼭 하나는 root 경로 안에 존재해야 한다.
• try_files는 어떤 파일을 찾을 때 명시된 순서로 찾으며, 가장 먼저 발견되는 파일을 사용한다는 의미

/etc/nginx/sites-available/에 설정파일을 만들었으면, 아래 명령어로 이파일의 심볼릭 링크를 /etc/nginx/sites-enabled/에도 만든다.
이름처럼 웹서버가 동작될 때 sites-enabled에 있는 설정파일을 참조한다.

sudo ln -s /etc/nginx/sites-available/myapp.conf /etc/nginx/sites-enabled/myapp.conf

이제 파일 생성은 모두 끝났고 Nginx를 실행하면 된다.
아래 명령어로 Nginx를 재실행한다.

sudo systemctl stop nginx
sudo systemctl start nginx

웹서버가 잘동작하는지 상태를 확인하려면 아래 명령어를 사용하면 된다.

systemctl status nginx

Nginx가 동작중이라면 브라우저에서 퍼블릭 IP로 접속하면 우리가 배포한 React 앱이 뜰 것이다.

Reference

• https://codechacha.com/ko/deploy-react-with-nginx/