Nginx로 React 배포하기 (우분투 환경)

Nginx ?

웹 서버 소프트웨어로, 가벼움과 높은 성능을 목표로 한다. Nginx는 요청에 응답하기 위해 비동기 이벤트 기반 구조를 가진다. 이러한 구조는 서버에 많은 부하가 생길 경우의 성능을 예측하기 쉽게 해준다. nginx의 핵심은 가벼움과 높은 성능이다. Apache에 비하여 스레드를 많이 사용하지 않기 때문에 CPU 소모도가 상대적으로 낮다. 적은 수의 스레드로 효율적인 일처리가 가능하기에 많은 접속자들이 와도 대응을 할 수 있다.

• 웹 서버 : 웹 브라우저와 같은 클라이언트로부터 HTTP 요청을 받아들이고, HTML  문서와 같은 웹 페이지를 반환하는 컴퓨터 프로그램이다. 웹 서버의 주된 기능은 웹 페이지를 클라이언트로 전달하는 것이다. 주로 그림, CSS, 자바스크립트를 포함한 HTML 문서가 클라이언트로 전달된다.

그럼 이제 Nginx로 React를 배포해보자.

여기서 하는 환경은 우분투 환경이다.

그럼 먼저 개발중인 React앱이 있어야 한다. npm start로 본인의 로컬 환경에서 문제없이 잘 돌아가야 한다. 잘 돌아가는 것을 확인했다면, npm run build를 해주자. 웹 서버(Nginx)는 빌드된 파일을 사용하기 때문에, 미리 빌드 산출물을 만들어 놔야 한다.

npm run build

Nginx 설정

이제 빌드된 React앱을 Nginx를 통해서 실행되도록 만들어주면 된다. 그럼 Nginx를 설치해야할 것이다.

sudo apt install nginx

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

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

그럼 이제 myapp에 대한 Nginx 설정파일을 생성하자. 아래 경로로 설정 파일을 만들어주면 된다.

sudo nano /etc/nginx/sites-available/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 에 있는 설정파일을 참조한다.

• 심볼릭 링크(symbolic link) : 절대 경로 또는 상대 경로의 형태로 된 다른 파일이나 디렉터리에 대한 참조를 포함하고 있는 특별한 종류의 파일이다. 즉, 링크를 연결하여 원본 파일을 직접 사용하는 것과 같은 효과를 내는 링크이다. 윈도우의 바로가기와 비슷한 개념이다.

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

파일 생성은 이제 모두 끝났다. 이제 Nginx를 실행하면 된다.

sudo systemctl stop nginx
sudo systemctl start nginx

웹서버 동작 상태 확인하는 명령어

sudo systemctl status nginx

Nginx가 동작중이면, 브라우저에서 localhost:80으로 접속해보자. 포트설정을 다른 곳으로 했다면 거기로 접속하면 될 것이다.

 

참고 사항

Nginx로 React를 배포하는 방법 참고 링크
[macOS] nginx로 웹서버 띄우기 참고 링크