Nginx

Nginx 란?

• Nginx는 Apache웹 서버와 같은 웹서버로 클라이언트부터 요청을 받았을때 요청에 맞는 정적파일을 응답해주는 HTTP Web Server로 활용되기도 하고, Reverse Proxy Server로 활용하여 WAS 서버의 부하를 줄일 수 있는 로드 밸런서로서 활용

Nginx 구조

• 요청에 응답하기 위해 비동기 이벤트 기반 구조(Event-Driven)를 지는데 이는 Apache HTTP 서버의 스레드/프로세스 기반 구조를 가진것과 대조적이며 이러한 구조는 서버에 많은 부하가 생길 경우 성능을 예측하기 쉽게 해줌

💡Event-Driven : Apache의 C10K 문제점(한 시스템에 동시 접속자수가 1만명이 넘어갈 때) 해결을 위해 만들어진 이벤트 기반 구조를 Event-Driven 구조의 웹서버라고 부름 

• 하나의 마스터 프로세스와 다수의 워커 프로세스로 구성이 되어 동작 마스터 프로세스 - 설정파일을 읽고 유효성 검사 및 워커 프로세스를 관리 워커 프로세스 - 요청에 대한 모든 요청 처리
  

사용방법

이 문서는 CRA (Create React App) 프로젝트로 생성된 프로젝트 기반으로 작성

💡 최신버전 설치하기 : https://it-svr.com/ubuntu-22-04-lts-nginx-install/

1. 설치

다음 명령어로 nginx를 설치

sudo apt install nginx

설치가 완료되면 /etc/nginx 경로에 설정파일들이 생성

• 설정파일
  • sites-available : 가상 서버 환경들에 대한 설정 파일들이 위치하는 부분
  • sites-enabled : sites-available 에 있는 가상 서버 파일들중에서 실행시키고 싶은 파일을 symlink로 연결한 폴더로 이 폴더에 위치한 가상서버 환경 파일들을 읽어서 서버를 세팅
  • nginx.conf : Nginx에 관한 설정파일로 Nginx 설정에 관한 블록들이 작성되어 있으며 이 파일에서 sites-enabled 폴더에 있는 파일들을 불러옴

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
  
  // 삭제
  sudo rm /etc/nginx/sites-available/default
  sudo rm /etc/nginx/sites-enabled/default

• 설정파일 생성 다음 명령어를 입력하여 admin.conf 이름을 가진 설정파일을 새로 생성하고 아래와 같은 내용을 추가

  // 생성
  sudo vi /etc/nginx/sites-available/admin.conf
  
  // 추가
  server {
    listen 80;
    location / {
      root   /home/apps/build;
      index  index.html index.htm;
      try_files $uri /index.html;
    }
  
  	location /arxbses {
  		proxy_pass http://127.0.0.1:3030;
  	}
  }

  • listen : 서비스 포트 지정 예로 react 프로젝트의 포트가 3000번이지만 listen을 80으로 입력하면 브라우저에서 localhost:3000이 아닌 localhost:80을 입력하면 접속가능
    
  • root : react 프로젝트의 build 폴더 경로
  • index : 해당 폴더에서 redirect 할 index.html 파일에 대한 설정으로 앞부터 우선순위가 존재
  • try_files : nginx 자체의 라우팅 설정으로 만약 페이지를 찾지 못할 경우 404 not found 설정
  • proxy_pass : 설정된 포트로 변경해서 요청 진행 예로 브라우저에서 /arxbses가 포함된 api요청을 했을때 nginx에 의해 이미 80포트 변경이 되어 80포트로 요청하는데 proxy_pass를 설정하면 설정한 3030포트로 변경해서 진행 즉 api 요청이 localhost:80/arxbses → localhost:3000/arxbses로 변경된다.
    

• https 적용 설정내용

  // 아래내용 추가
  server {
          listen 80 default_server;
          listen [::]:80 default_server;
          server_name _;
          return 301 https://$host$request_uri;
  }
  
  server {
      listen 443 ssl;
  
      location = /robots.txt {
          add_header Content-Type text/plain;
          return 200 "User-agent: *\nDisallow: /\n";
      }
  
      location / {
          root   /home/apps/build;
          index  index.html index.htm;
          try_files $uri /index.html;
      }
  
      location /arxpc {
          proxy_pass https://127.0.0.1:3030;
      }
  
      ssl_certificate /home/apps/mkcert/cert.pem;
      ssl_certificate_key /home/apps/mkcert/key.pem;
      add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload";
      add_header X-Frame-Options DENY;
      add_header X-XSS-Protection "1; mode=block";
      add_header Expect-CT 'enforce; max-age=300';
      add_header Content-Security-Policy "script-src 'self'; style-src 'self' 'unsafe-inline'; object-src 'none';";
      set $CSP_image  "img-src      'self' ;";
      set $CSP_script "script-src   'self' ; ";
      set $CSP_style  "style-src    'self' ; ";
      set $CSP_font   "font-src     'self' ; ";
      set $CSP_frame  "frame-src    'self' ; ";
      set $CSP_object "object-src   'self' ; ";
      set $CSP        "default-src  'self' ; ${CSP_image} ${CSP_script} ${CSP_style} ${CSP_font} ${CSP_frame} ${CSP_object}";
  
      #add_header Content-Security-Policy $CSP;
  }

3. 심볼릭 링크 생성

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

4. Nginx 서비스 재기동

sudo systemctl restart nginx
sudo systemctl status nginx

5. 브라우저 접속

💡 Tip : 방화벽이 설정되어 있는경우 80포트를 허가해주어야 외부에서 접근 가능

삭제

nginx는 삭제한 이후에 폴더가 완전히 삭제가 되지 않으므로 완전한 삭제 방법을 진행하여 완전하게 삭제

1. 설정파일을 제외한 삭제

sudo apt remove nginx nginx-common

2. 전체 삭제

sudo apt purge nginx nginx-common 

3. 종속성 관련 패키지 삭제

sudo apt autoremove

4. 설정파일 삭제

sudo rm -rf /etc/nginx

설정

1. 파일 업로드 크기 제한

Nginx를 이용해 웹서버를 올린 후 브라우저에서 파일 전송시 다음과 같은 에러가 발생하는 경우

Failed to load resource: the server responded with a status of 413

• nginx 설정파일 수정

// 설정파일 오픈 
sudo vi /etc/nginx/nginx.conf

// 기존 설정파일내용
http {
	...
	client_max_body_size 10M; // 맥스 사이즈 추가 (디폴트 1M)
}

1. https 리다이렉션 설정

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    return 301 https://$host$request_uri;
}

1. HTST 설정

• nginx 설정 파일 수정

// 사용자 설정파일 오픈 
sudo vi /etc/nginx/sites-enabled/myapp.conf

// 기존 설정파일내용
server {
	listen 80;
	return 301 https://$server_name$request_uri;
}

server {
	listen 443;
	add_header Strict-Transport-Security max-age=63072000;
  //add_header Strict-Transport-Security "max-age=63072000" always;
}

1. 약한암호

// 설정파일 오픈 
sudo vi /etc/nginx/nginx.conf

// 추가
ssl_ciphers   EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH;

// 혹은
ssl_prefer_server_ciphers on;
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;

레퍼런스

https://velog.io/@wijihoon123/Nginx란-무엇인가
https://ssdragon.tistory.com/60
https://www.hanumoka.net/2019/12/29/react-20191229-react-nginx-deploy/
http://techtree.kr:8090/display/TEC/Nginx+-+Chapter+3+-+Uninstall+and+reinstall