0%

React를 Nginx웹 서버에 배포하기

개요

Create React App으로 배포 테스트용 React 프로젝트를 만들고, 빌드하여 배포하는 실습을 진행해보도록 하겠다.

실습 환경은 ubuntu 18.04 가상머신에서 진행하였으며, 기본적으로 nvm, node, npm(npx사용 가능한 버전)이 설치되어 있는 환경이다.

Ubuntu에 설치된 Nginx에 React 배포

ubuntu 18.04에 직접 설치된 Nginx 서버에 React를 배포해보자.

일단 현재 계정의 home 디렉토리에 examples 폴더를 만들고, 그 내부에서 create-react-app을 이용해서 배포할 리액트 프로젝트를 생성해보자.

create-react-app으로 배포할 react 프로젝트 생성

React%20Nginx/Untitled.png

1
npx create-react-app myapp

React%20Nginx/Untitled%201.png

위처럼 원하는 경로에 배포 태스트할 react 프로젝트를 생성하자.

create-react-app으로 프로젝트 생성이 완료되면 다음 명령어로 동작을 확인하자.

1
2
cd myapp
npm start

React%20Nginx/Untitled%202.png

React%20Nginx/Untitled%203.png

위처럼 localhost:3000으로 접속해서 방금 생성한 react 프로젝트 실행을 확인 했다.

react 프로젝트 build 하기

생성된 react 프로젝트를 build 해보자.

create-react-app 으로 생성한 react 프로젝트는 기본적으로 webpack이라는 번들러를 통해서 빌드 결과물을 생성한다.

프로젝트 경로에서 아래 명령어를 입력하자.

1
npm run build

React%20Nginx/Untitled%204.png

위처럼 react build가 진행되며 프로젝트 디렉토리 내부의 build 라는 폴더에 빌드 결과물이 생성된다.

React%20Nginx/Untitled%205.png

우리는 이 빌드 결과물이 있는 경로를 나중에 설정할 nginx라는 웹서버에게 알려줘야 한다.

정적인 웹을 위한 리소스를 번들링해주는 웹팩이라는 녀석은 정말 신기방기 한것 같다.

ubuntu18.04에 nginx 설치하기

이제 웹서비스를 위한 웹서버를 설치해보자.

다음 명령어로 설치하자.

1
sudo apt install nginx

설치가 완료되면 /etc/nginx 경로에 방금 설치된 nginx웹서버의 설정파일들이 생긴다.

참고:Nginx 기본파일과 폴더들

  • sites-available : 가상 서버 환경들에 대한 설정 파일들이 위치하는 부분입니다. 가상 서버를 사용하거나 사용하지 않던간에 그에 대한 설정 파일들이 위치하는 곳이다.
  • sites-enabled : sites-available 에 있는 가상 서버 파일들중에서 실행시키고 싶은 파일을 symlink로 연결한 폴더입니다. 실제로 이 폴더에 위치한 가상서버 환경 파일들을 읽어서 서버를 세팅합니다.
  • nginx.conf : Nginx에 관한 설정파일로 Nginx 설정에 관한 블록들이 작성되어 있으며 이 파일에서 sites-enabled 폴더에 있는 파일들을 가져옵니다.

그중 아래처럼 sites-available, sites-enabled 폴더를 수정하게 된다.

혹시 모르니 이 폴더들을 미리 백업해 놓자.

React%20Nginx/Untitled%206.png

1
2
sudo cp -r /etc/nginx/sites-available/ /etc/nginx/sites-available-origin
sudo cp -r /etc/nginx/sites-enabled/ /etc/nginx/sites-enabled-origin

그 다음에 sites-available, sites-enabled 폴더 내부의 default 설정 파일들을 아래 명령어로 제거해주자.

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

React%20Nginx/Untitled%207.png

그리고 앞서 생성한 react 프로젝트의 build 결과물을 배포할 설정 파일을 생성하자.

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

그리고 내용을 아래처럼 채워준다.

1
2
3
4
5
6
7
8
server {
listen 80;
location / {
root /home/hanumoka/examples/myapp/build;
index index.html index.htm;
try_files $uri /index.html;
}
}

위 설정을 보면 해당 설정은 80포트로 서비스 한다는 것을 보여준다.

location / 이부분은 루트 진입시 설정이다.

root 설정은 앞서 생성한 react 프로젝트의 build 폴더 경로를 설정한다.

index 설정은 해당 폴더에서 redirect 할 index html 파일에 대한 설정이다. 앞 부터 우선순위가 있다.

try_files 설정은 좀 중요해보인다.

nginx를 잘 써보지 않아 이번에 찾아 봤는데, react 프로젝트의 경우 페이지 라우팅을 react-router가 보통 하게 될것이다.

즉 index.html 자체에서 페이지 라우팅을 하는 것이다.

try_files 설정은 일종의 nginx 자체의 라우팅 설정이다. 보통 이 부분에서 특정 패턴의 url에 특정 파일등을 redirct 하는 설정을 한다. 만약 페이지를 못 찾을 경우 404 not found 설정등도 이곳에서 한다.

하지만 react 프로젝트인 경우, 웹서버에서 먼저 리퀘스트 url 을 가로채면 react-router의 기능을 사용할수 없게 된다.(vue등도 마찬가지일 것이다.)

따라서 위처럼 모든 request를 index.html로 곧장 가게 설정해 줘야 한다.

sites-available 폴더에 가상호스트 설정을 끝냈다.

하지만 이 설정만으로는 서비스가 동작하지 않는다. 방금 생성한 설정파일을 sites-enabled 폴더로 symlink해야 해당서비스가 활성화 되며 실제 서비스가 가능한 상태가 된다.

아래 명령어를 입력해서 site-enabled 폴더에 심볼릭 링크를 만들자.

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

React%20Nginx/Untitled%208.png

위처럼 심볼릭 링크를 생성했다.

Nginx를 재기동하고 동작을 확인보자.

1
2
3
sudo systemctl stop nginx
sudo systemctl start nginx
sudo systemctl status nginx

React%20Nginx/Untitled%209.png

위처럼 nginx를 재기동하고 동작을 확인했다.

(주의: ubuntu 방화벽에서 80포트를 허가 해야 외부에서 접근이 가능하다. 아래 명령어로 포트를 방화벽에서 허용 시킬수 있다.)

1
sudo iptables -I INPUT 1 -p tcp --dport 80-j ACCEPT

아래처럼 nginx에 react가 정상적으로 배포된 것을 알 수 있다.

React%20Nginx/Untitled%2010.png

만약 아래처럼 nginx가 500 Internal Server Error 에러를 던진다면 /etc/nginx/sites-available/myapp.conf 파일에 문제가 있을 가능성이 있다.

내 경우 build 경로에 오타가 있을경우 500에러가 발생했다.

React%20Nginx/Untitled%2011.png

해당 설정파일을 다시 확인하고, nginx 를 재부팅하니 정상동작했다.

끝!!!

참고자료

ubuntu에 create react app을 nginx로 배포하기

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

create react app을 nginx 도커나이즈 배포하기

https://codechacha.com/ko/dockerizing-react-with-nginx/

nginx에러 로그 확인

https://annajinee.tistory.com/17

nginx try_files 설정

https://stackoverflow.com/questions/43951720/react-router-and-nginx