[Nginx] React 프로젝트 배포하는 방법

 

리눅스 Ubuntu 환경Nginx 웹서버에

React 프로젝트를 배포해보는 방법에 대해서 알아봅니다.

 

React Project Build

첫번째로 리액트 프로젝트 빌드 파일들이 준비되어야 겠죠

CRA(Create React App) 혹은 Webpack을 통해 번들링 및 빌드 된 파일들을 준비해주시면 됩니다.

---

Nginx Setting

저는 AWS EC2 인스턴스에 리눅스 Ubuntu 18.04 환경을 사용하고 있습니다.

 

1. Nginx Install

sudo apt install nginx

 

2. Nginx Config

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

위 명령어로 Nginx 설정파일에 접근합니다.

 

server {
   listen 3000;
   location / {
      root /home/ubuntu/webpack-react/build;
      index index.html;
      try_files $uri $uri/ /index.html;
   }
}

그리고 위 처럼 서버 설정을 추가해줍니다.

listen은 포트를 설정하는 것이고 root는 build된 파일들이 있는 경로를 잡아주시면 됩니다.

index는 기본(default) 인덱스 페이지를 설정해주는 것이고,

try_files는 적혀진 순서대로 파일들을 찾고 표출하겠다는 설정입니다.

 

 

Tip) Nginx, React Router Dom 404 Error

가끔 Nginx 로 React 앱을 배포했을때 진입 후 페이지 이동은 잘 되지만

새로고침 혹은 React Router Dom을 사용해 Routing을 한 경우 URL이 404가 뜨는 경우가 있는데

이 경우, try_files 설정을 잘못 해준 경우 발생하니 참고하시면 좋을 것 같습니다.

 

3. Nginx Restart

sudo service nginx restart

Nginx 재시작을 완료하였다면 브라우저에 설정된 주소:포트 로 접근해보시기 바랍니다.

(80포트로 설정하신분들은 포트제외하고 주소만 입력해도 됩니다)

 

이것으로 Nginx에 React 앱 배포하는 방법에 대해서 포스팅을 마무리 하겠습니다.