Nginx - React 설정

React 를 Nginx 웹서버를 이용해 배포하려고 할 때 기본적인 설정에 대해 알아보자.

algosketch 의 환경 (참고로 AWS 는 putty 로 연결하여 사용하였다. putty 연결하는 방법을 모른다면 그냥 EC2 인스턴스에서 연결 누르고 웹 환경에서 조작하면 된다. Free Tier 말고 유료 버전도 쓰고 있는데 Free Tier 버전은 입력할 때 딜레이가 생긴다. 서버 스펙 차이인 듯...)

AWS EC2 - Free Tier
ubuntu 20.04
CRA(Create React App) 로 만들어진 React 프로젝트

 

1. nginx 설치 및 실행

sudo apt-get update
sudo apt-get install nginx
sudo service nginx start
sudo service nginx status # nginx 가 제대로 동작하는지 확인

 위와 같이 입력하면 기본 설정으로 nginx 가 실행된다. (아마도)

 

2. nginx 설정 변경

nginx 를 설치하면 다음 위치에 nginx 관련된 폴더가 생긴다.

/etc/nginx
# 현재 위치는 pwd 명령어를 통해 확인할 수 있다. (pring working directory)
# 이동한 적이 없다면 않았다면 보통 홈 위치이다. (~ 가 홈이다. 위치는 /home/<USER_NAME>)

설정 파일은 다음위치에 있는 파일을 수정하면 된다.

/etc/nginx/sites-available/*.conf

원래 default.conf 라는 이름으로 파일이 하나 있을 텐데, 사실 이름을 .conf 로 끝나기만 하면 상관 없다. 원래 있던 파일을 수정하든, 원래있던 파일을 지우고 새로운 이름으로 *.conf 파일을 만들든 상관 없다. 아래와 같이 설정파일을 작성하면 된다.

server {
  listen 80;
  
  location / {
    root	/home/USER_NAME/REACT_PROJECT_ROOT_DIRECTORY/build;
    index	index.html index.htm;
    try_files 	$uri $uri/ /index.html;
  }
}

• listen 80 : 80 번 포트로 들어오는 요청을 받는다. AWS 보안 설정에서 80 번 포트를 열어 놓아야 한다. 요청할 때는 127.0.0.1:80/... 이런 주소로 요청하는데, 포트번호를 생략하면 알아서 80번으로 요청한다.
• location / : /... 으로 들어오는 요청을 받는다. 우리는 React 만 설정하기 때문에 모든 요청이 들어온다고 봐도 된다.
• root : 웹서버이기 때문에 html 파일을 보여줄 폴더의 root 위치를 지정해 준다. build 폴더는 React 프로젝트에서 npm run build 를 통해 생성 및 업데이트할 수 있다.
• index : 기본으로 보여줄 페이지로 index.html 파일을 설정한다. 만약 index.html 이 없으면 index.htm 을 보여줄 것이다.
• try_files $uri $uri/ /index.html : URI 로 들어온 값과 동일한 파일이나 폴더를 찾고 없으면 index.html 을 보여준다. 예를 들어 /login 으로 요청이 들어온다면 login.html 혹은 login/index.html 을 찾을 것이다. React 는 SPA(Single Page Application) 이기 때문에 index.html 밖에 없다. 따라서 해당 이름으로 된 파일이 없을 경우 index.html 을 보여주도록 설정하면 된다. 기본 nginx 설정에는 try_files $uri $uri/ =404 아마 이런 식을 되어있을 텐데, 이렇게 되면 React 상에서 /login 이 구현되어 있더라도 404 페이지가 뜨게 된다.

다음 위치에 있는 설정 파일도 우리가 설정한대로 되어 있는지 확인한다.

/etc/nginx/sites-enabled/*.conf
# 우리가 설정한 파일이 sybolic link 형태로 있어야 한다.

왜 sites-enabled 에도 같은 설정파일이 있어야할까? 사실 nginx 가 참조하는 설정파일은 nginx.conf 이다.

# /etc/nginx/nginx.conf 를 참조한다.
# 이 설정파일을 살펴보면 /etc/nginx/sites-enabled/*.conf 를 포함하는 것을 알 수 있다.
...
include /etc/nginx/sites-enabled/*.conf
...

따라서 이름은 .conf 로 끝나기만 하면 되고, sites-available 보다 sites-enabled 에 있는 파일이 더 중요하다.

 

3. nginx 재시작

nginx 설정을 변경했다면 nginx 를 재시작해야 적용된다.

sudo service nginx restart
sudo service nginx status

 

4. 참고

server {
  listen 80;
  server_name algosketch.me www.algosketch.me; # 도메인이 있을 경우
  location / {
    root   /home/ubuntu/uni-on/build;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

# 아래는 reverse proxy 관련된 설정이다.
  location /api {
    add_header 'Access-Control-Allow-Origin' '*'; # CORS 관련 설정을 nginx 에서도 할 수 있다.
    proxy_pass http://localhost:8000; # :80/api 으로 들어온 요청을 :8000/api 으로 포워딩한다.
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
  }
}

# 위처럼 포워딩하면 /* 으로 들어오는 요청과 /api/* 으로 들어오는 요청을 분리할 수 있다.
# location /api 설정은 하나의 서버로 여러 가지 작업을 처리하기 위한 것이다.
# 서버 프레임워크에서 설정한 method 이름이 user 라면 /api/user 로 처리해야하기 때문에
# 번거로움이 발생한다. 다음과 같이 한 줄을 추가해 주자.
# rewrite ^/api(.*)$ $1 break;
# /api 로 들어오는 요청을 localhost:8000/api 가 아닌 localhost:8000/ 으로 바꿔준다.

 

글 내용의 상당 부분이 기억에 의존하고 있음을 알립니다.