Ubuntu 20.04 - Nginx로 React를 배포하는 방법

Nginx는 Aphache(아파치)와 같은 웹서버로, React 앱을 배포할 때 사용할 수 있습니다.

우분투 20.04/22.04 환경에서 Nginx로 React앱을 배포하는 방법을 알아보겠습니다.

1. React 앱 준비 및 빌드 확인

아파치로 앱을 배포하려면, 먼저 개발중인 React 앱이 있어야 합니다.

저는 아래 명령어와 같이, myapp이라는 샘플 프로젝트를 만들고 빌드 및 실행되는 것 까지 확인하였습니다.

$ create-react-app myapp
$ cd myapp
$ npm start

웹서버(Nginx)는 빌드된 파일을 사용하기 때문에, 다음 명령어로 미리 빌드 산출물을 만들어 놔야 합니다.

$ npm run build

2. Nginx 설정

이제 빌드된 React앱을 웹서버인 Nginx를 통하여 실행되도록 만들면 됩니다.

먼저 다음 명령어로 Nginx를 설치해주세요. 설치가 끝나면 /etc/nginx 경로에 파일들이 생성됩니다.

$ sudo apt install 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/user/myapp/build는 위에서 만든 React의 빌드 산출물 경로입니다. 자신의 빌드 파일 경로로 변경해야 합니다)

server {
  listen 80;
  location / {
    root   /home/user/myapp/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

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

sudo systemctl status nginx

Nginx가 동작중이라면, 브라우저에서 localhost:80로 접속해보세요.

정리

자신이 개발한 React 앱을 Nginx로 배포하는 방법에 대해서 알아보았습니다.

npm start 명령어를 사용하면 개발 중인 앱을 브라우저에서 실행해볼 수 있습니다.

하지만 이것은 개발 편의를 위한 웹서버이기 때문에, 배포할 때는 Nginx와 같은 효율적이고 안정적인 웹서버를 사용해야 합니다.

React를 Docker로 배포하는 방법은 "React와 Nginx를 Dockerizing하는 방법"을 참고해주세요.