Nginx로 React 프로젝트 배포하기(2) - nginx.conf 파일 설정

1. Nginx 설정파일(nginx.conf) 찾기

설정 파일의 위치는 설치 방법에 따라 달라질 수 있다. 컴파일을 통해서 설치한 경우라면 기본적으로 /usr/local/nginx/conf 디렉토리에 위치하고, 앞선 포스팅에서는 yum 명령어를 통해 설치했기 때문에 /etc/nginx에 위치한다. 설치 방법에 따라서 파일의 위치는 다를 수 있기 때문에 아래의 명령을 이용하여 설정 파일의 위치를 찾을 수 있다.

sudo find / -name nginx.conf

2. Nginx 설정파일 종류

• nginx.conf
  메인 설정 파일

• fcgi.conf
  FastCGI 환경설정 파일

• sites-enabled : 활성화된 사이트들의 설정 파일들이 위치. 아파치에서는 Virtual host의 설정에 해당하고 기본적으로 존재하지 않을수도 있습니다.

• sites-available : 비활성화된 사이트들의 설정 파일들이 위치

필자는 nginx 1.14.1을 설치하였는데 sites-enabled, sites-available 설정파일은 존재하지 않았습니다.

3. nginx.conf 설정

worker_processes auto;
events {
    worker_connections  1024;
}
http { 
    include       mime.types;
    server {
        listen       80;
        location / {
            root   html;
            index  index.html index.html;
        }
    }
}

• core 모듈 설정
  위의 예의 work_processes와 같은 지시자 설정 파일 최상단에 위치하면서 nginx의 기본적인 동작 방식을 정의한다. 여기서 사용되는 지시어들은 다른 곳에서 사용되지 않는다. 코어모듈 지시어 사전을 참고하자.

• events 블록
  이벤트 블록은 주로 네트워크의 동작방법과 관련된 설정값을 가집니다. 이벤트 블록의 지시어들은 이벤트 블록에서만 사용할 수 있고, http, server, location와는 상속관계를 갖지 않습니다.

• http 블록
  http 블록은 HTTP 서버에 대한 구성이 들어있습니다. server, location의 루트 블록이라고 할 수 있고, 여기서 설정된 값을 하위 블록들은 상속합니다.
  http, server, location 블록은 계층구조를 가지고 있고 하위 블록에서 선언된 지시어는 상위의 선언을 무시하고 적용됩니다.

• server 블록
  server 블록은 하나의 웹사이트를 선언하는데 사용되며 가상 호스팅(Virtual Host)의 개념이다. 예를들어 하나의 서버로 http://test1.com과 http://test2.com 을 동시에 운영하고 싶은 경우 사용할 수 있습니다.

• location 블록
  location 블록은 server 블록 안에 등장하면서 특정 URL을 처리하는 방법을 정의합니다.

• 설정 파일의 반영
  설정 파일의 내용을 변경한 후에는 이를 nginx에 반영해야 하는데 아래와 같이 restart, reload 명령을 이용하면 됩니다.

sudo systemctl restart nginx;
sudo systemctl reload nginx; //권장

4. nginx.conf 예시

user test; 		   						   //Nginx는 ycits라는 사용자로 실행
worker_processes auto;                     //CPU 코어 수에 따라 worker_processes의 개수를 자동으로 설정
error_log  /home/test/log/error.log; 	   //해당 위치에 에러로그 생성

events {
    worker_connections 1024; //각 워커 프로세스가 처리할 수 있는 동시 연결 수
}

http {
    include       mime.types; 				//MIME 타입에 대한 맵핑을 정의한 파일
    default_type  application/octet-stream; //기본 MIME 타입을 설정
    
  	sendfile        on; 					//sendfile을 사용하도록 설정합니다. 정적 파일을 전송할 때 더 효율적
    keepalive_timeout  65; 					//keep-alive 연결의 유휴 시간을 65초로 설정
    client_max_body_size 100M; 				//클라이언트 요청 본문의 최대 크기를 설정

    proxy_pass_request_body on;
    proxy_pass_request_headers on;
    proxy_buffer_size 10m; 
    proxy_buffers 8 10m; 프록시용 버퍼의 크기를 설정

    server {
        listen       9090; 	   //서버가 80포트를 듣고 있음
        server_name  homepage; //server 이름

        location / { //루트 URL 설정
            root   /home/ycits/homepage/dist; //루트 URL 경로에서의 물리적 파일이나 디렉토리의 위치
            index  index.html; 				  //디렉토리가 요청된 경우 제공할 기본 파일
	        try_files $uri /index.html; 	  //요청된 URI으로 파일을 찾고, 실패한 경우 /index.html을 제공
        }

        location /api { // /api URL 패턴에 대한 설정
            
            proxy_pass   http://localhost:13799; // /api로 들어온 요청을 이 주소로 프록시
            
          	/*CORS 관련 설정*/
            //localhost:9090 도메인에서 온 요청 허용
            #add_header 'Access-Control-Allow-Origin' 'http://localhost:9090';
            
            //허용되는 HTTP 메서드 설정
            #add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            
            //서버에 요청할 때 사용할 수 있는 헤더설정
            #add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; 
            
            //자격 증명 (예: 쿠키, 인증 헤더) 포함 여부 설정
            #add_header 'Access-Control-Allow-Credentials' 'true';
            
            //클라이언트가 응답에서 접근할 수 있는 헤더 설정
            #add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }

        error_page   500 502 503 504  /50x.html; //서버 에러 발생시 표시할 웹페이지를 설정
        location = /50x.html { //에러 페이지의 위치를 설정
            root   html; 
        }
    }
}

주요 설정

1. user
해당 계정이 nginx 또는 root로 되어 있다면 일반 계정으로 변경하는 것이 좋습니다. nginx는 마스터 프로세스와 워커 프로세스로 동작하고, 워커 프로스세가 실질적인 웹서버의 역할을 수행하는데 user 지시어는 워커 프로세스의 권한을 지정합니다. 만약 user의 값이 root라면 워커 프로스세를 root 권한으로 실행시키므로 보안상의 이슈와 권한 에러등이 발생할 수 있으므로 변경해주는것이 좋습니다.

2. worker_process
worker_process는 워커 프로세스를 몇개 생성할 것인지 설정합니다. 만약 설정값이 1이라면 CPU 코어가 여러개 있는 시스템에서 하나의 코어만으로 요청을 처리한다는 의미이므로 auto로 설정하여 코어의 숫자만큼 자동설정 하는게 좋습니다.

3. worker_connections
몇개의 접속을 동시에 처리할 것인가를 설정합니다. worker_process의 값과 조합하여 계산하면 하나의 머신이 처리 할 수 있는 커넥션의 양을 산출할 수 있습니다. 예를 들어, worker_process의 값이 4이고, worker_connections의 값이 1024라면 4 X 1024 = 4096개의 커넥션을 맺을 수 있습니다. 퍼포먼스 테스트의 경우 Reference에 작성한 URL를 참고하면 도움이 될 거 같습니다.

4. client_max_body_size
업로드 할 수 있는 용량의 크기를 설정합니다. 기본값은 1MB이므로 더 많은 파일의 업로드를 허용하려면 이 값을 늘려줘야 합니다. 만약 해당 설정을 처리하지 않는다면 업로드 시 용량에러가 발생할 수 있습니다.

💡try_files 설정 이유
REACT의 FE 개발을 한 후 npm run build 명령으로 배포파일을 생성할 수 있다.
이 배포파일을 nginx 같은 웹서버에서 처리할 때 404 에러가 발생할 수 있다.
React 처럼 SPA 프레임워크를 사용하는 경우 index.html 을 기반으로 내부 모듈을 교체하는 방식으로 동작한다. 그러므로 /test 과 같이 상대주소를 통한 이동은 처리할 수 있지만 http://localhost:8080/test 과 같이 도메인 주소가 붙은 절대주소는 웹서버가 해당경로를 인식할 수 없어 처리할 수 없다.
그러므로 index.html을 통해 이동한 페이지에서 새로고침하는 경우 404에러가 발생하게 됩니다. 그래서 nginx를 사용할 때는 try_files $uri /index.html를 설정을 추가하여 uri를 못 찾을 경우 index.html로 서빙되도록 해줘야합니다.

Reference

• https://nginx.org/en/docs/
• https://opentutorials.org/module/384/4526
• https://royzero.tistory.com/entry/React-Nginx-%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8-404-%EC%97%90%EB%9F%AC-%EC%88%98%EC%A0%95
• MIME 타입관련 참고 URL
  https://velog.io/@aerirang647/MIME-type%EC%9D%B4%EB%9E%80
• 퍼포먼스 테스트(ngrinder) 참고 URL
  https://opentutorials.org/module/351/3334