React.js - nginx 배포하기

1. nginx란?

Nginx는 웹 서버 소프트웨어로, 가벼움과 높은 성능을 목표로 한다. 웹 서버, 리버스 프록시 및 메일 프록시 기능을 가진다.

2. React project build

프로젝트 경로로 이동하여 build 명령어를 수행합니다. 

package.json

...
"scripts": {
    ...
    "build": "react-scripts build",
    ...
  },
...

yarn build

빌드가 완료되면 nginx를 설치합니다. 

3. nginx 설치

sudo apt install nginx

4. nginx 설정

설치가 완료되면 /etc/nginx로 이동합니다. 

cd /etc/nginx
ll

sites-available, sites-enabled 폴더 내부의 default 설정 파일들을 제거합니다. 

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

이제 react 프로젝트의 build 결과물을 배포할 설정 파일을 생성합니다. 

sudo vi /etc/nginx/sites-available/myapp.conf

server {
  listen 3000;
  location / {
    root   /home/ubuntu/src/spb-admin/build;
    index  index.html;
    try_files $uri /index.html;
  }
}

• location / : 루트 진입 설정.
• root: 앞서 생성한 react 프로젝트의 build 폴더 경로를 설정.
• index: 해당 폴더에서 redirect 할 index 파일에 대한 설정.
• try_files: 일종의 nginx 자체의 라우팅 설정으로, 특정 패턴의 url에 특정 파일 등을 redirct 하는 설정을 한다. react 프로젝트인 경우, 웹서버에서 먼저 리퀘스트 url을 가로채면 react-router의 기능을 사용할 수 없게 되므로, 모든 요청이 index.js로 향하게 설정한다.

파일 작성이 완료되면 site-enabled 폴더에 심볼릭 링크를 만듭니다. 

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

5. 결과 확인하기

nginx를 설치하면 자동으로 실행되므로, 재기동하여 상태를 확인합니다. 

sudo systemctl stop nginx
sudo systemctl start nginx
sudo systemctl status nginx

nginx 실행이 완료되면 해당 브라우저로 ip:port를 입력하여 확인해봅시다!

참고 블로그: https://www.hanumoka.net/2019/12/29/react-20191229-react-nginx-deploy/

React를 Nginx웹 서버에 배포하기