Nginx 설정

📄 Nginx 설정 문서

🎯 목적

이 문서는 Nginx 서버 설정을 구성하여 HTTP 요청을 HTTPS로 리디렉션하고, 정적 파일과 API 서버, WebSocket 요청을 처리하는 방법을 설명합니다. 이를 통해 SPA (Single Page Application)와 API 서버가 함께 동작하는 환경을 구성합니다.

🧩 배경 및 필요성

1. HTTPS 보안 강화:
   • 모든 HTTP 요청을 HTTPS로 리디렉션하여 보안 수준을 높임.
2. SPA와 API 서버 프록시:
   • 클라이언트 요청을 정적 파일 및 API 서버로 적절히 분배.
3. WebSocket 지원:
   • 실시간 통신(WebSocket) 기능을 제공하는 애플리케이션 지원.
4. CORS 처리:
   • 클라이언트와 서버 간 교차 출처 요청 허용.

🔍 기술적 분석 및 비교

웹서버란?

• 웹서버는 클라이언트(브라우저)의 요청에 따라 정적 파일(HTML, CSS, JS 등)이나 동적 콘텐츠(API, 서버사이드 렌더링 페이지 등)를 전달하는 역할을 합니다.
• 주요 역할:
  1. HTTP/HTTPS 요청 처리.
  2. 정적 파일 및 리소스 제공.
  3. 리버스 프록시로 동작하여 애플리케이션 서버와의 연결 담당.
  4. 로드 밸런싱, CORS 처리 등 부가 기능 제공.

Nginx와 Apache 비교

특징	Nginx	Apache
아키텍처	이벤트 기반 (비동기 처리)	프로세스 기반 (멀티프로세스/멀티스레드)
성능	고성능: 동시 연결(Concurrent Connections) 처리에 강점.	적은 동시 요청에서는 성능이 양호하나, 높은 동시 요청에서 병목 가능성 있음.
정적 파일 제공	빠른 정적 파일 처리.	상대적으로 느림.
리버스 프록시	기본적으로 리버스 프록시로 설계되어 있음.	모듈(mod_proxy) 추가가 필요함.
로드 밸런싱	내장 로드 밸런싱 기능 제공 (라운드로빈, 가중치 등).	별도 설정을 통해 가능.
사용자 편의성	설정이 간단하고 직관적임.	다양한 모듈과 설정 지원, 유연하지만 복잡한 설정 필요.
모듈화 지원	정적 모듈로 컴파일됨 (필요한 기능만 빌드 가능).	동적 모듈 로드 지원 (mod_rewrite, mod_ssl 등 다양한 모듈 제공).
HTTP/2 및 HTTPS	기본적으로 HTTP/2 및 HTTPS 지원 (SSL/TLS 설정 용이).	모듈(mod_http2) 추가 후 사용 가능.
호환성	이벤트 기반 처리 방식으로 현대적인 워크로드에 적합.	레거시 워크로드 및 요구 사항에 적합.
CORS 처리	간단한 설정으로 지원.	모듈(mod_headers)을 사용해야 CORS 처리 가능.

선택 이유: Nginx

1. 성능과 확장성:
   • 이벤트 기반 아키텍처를 채택한 Nginx는 동시 연결 처리에 뛰어나며, SPA 및 API 서버를 프록시로 처리할 때 최적의 성능을 제공합니다.
   • 정적 파일을 제공할 때 Apache보다 효율적.
2. 리버스 프록시와 로드 밸런싱:
   • 기본적으로 리버스 프록시 역할에 최적화되어 있어 설정이 간단.
   • 내장된 로드 밸런싱 기능으로 클라이언트 요청을 서버에 효율적으로 분산 가능.
3. HTTP/2 및 HTTPS 지원:
   • Nginx는 HTTP/2와 SSL/TLS 설정을 기본적으로 지원하여 보안 강화 및 성능 최적화가 용이.
4. SPA 및 API 서버 지원:
   • try_files와 같은 설정을 통해 SPA 라우팅 처리를 간단하게 지원.
   • WebSocket과 같은 실시간 통신도 간단하게 설정 가능.
5. 모던한 기술 요구에 부합:
   • 최신 웹 애플리케이션의 요구 사항(CORS, SSL, WebSocket 등)을 충족하는 데 적합.

설정 구성:

• HTTP 요청 → HTTPS 리디렉션.
• 정적 파일 → Object Storage 프록시.
• API 요청 → 로컬 Node.js 서버로 프록시.
• WebSocket 요청 → Node.js 서버로 프록시.

🗺️ 문제 해결 과정

SSL 인증서 발급 과정

1. Certbot 설치

   sudo apt update
   sudo apt install certbot python3-certbot-nginx
   

2. SSL 인증서 발급

   sudo certbot --nginx -d ask-it.site -d www.ask-it.site
   

3. 자동 구성 및 확인

   sudo systemctl restart nginx
   sudo certbot certificates
   

Nginx 설정

• 설정 파일 열기

  sudo vi /etc/nginx/sites-enabled/default
  

1. HTTP 요청을 HTTPS로 리디렉션

server {
    listen 80;
    server_name ask-it.site www.ask-it.site;
# 모든 HTTP 요청을 HTTPS로 리디렉션
return 301 https://$host$request_uri;

}

2. HTTPS 서버 설정

server {
listen 443 ssl;
server_name ask-it.site www.ask-it.site;
# SSL 인증서 경로 설정
ssl_certificate /etc/letsencrypt/live/ask-it.site/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/ask-it.site/privkey.pem;

# SSL 프로토콜 및 암호화 설정
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;

location / {
      proxy_pass <https://ask-it-static.kr.object.ncloudstorage.com/dist/index.html>;
      proxy_set_header Host ask-it-static.kr.object.ncloudstorage.com;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    # CORS 헤더
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';

    # SPA 라우팅 처리
    try_files $uri $uri/ /;
}

location /api {
    proxy_pass <http://localhost:3000>;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    # CORS 헤더
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';

    # OPTIONS 요청 응답 처리
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

location /socket.io/ {
    proxy_pass <http://localhost:3000>; # Socket.IO 서버 주소
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';

    # WebSocket 연결 타임아웃 설정
    proxy_read_timeout 60s;
    proxy_send_timeout 60s;
}

}

📈 결과 및 성과

• 보안 강화:
  • HTTP 요청을 HTTPS로 리디렉션하여 클라이언트-서버 간 통신 보안 강화.
• 애플리케이션 안정성:
  • 정적 파일, API 서버, WebSocket 요청을 효율적으로 분배.
• 유연한 설정:
  • Nginx를 활용한 프록시 구성으로 확장성과 유지보수성 개선.
• 향후 개선 방안
  1. Nginx 성능 최적화:
     • 캐싱 및 압축 설정 추가.
     • 정적 파일 서비스 속도 향상.
  2. 로깅 및 모니터링 통합:
     • Nginx 로그 분석 도구 도입(Grafana, ELK 스택).
  3. 환경별 설정 분리:
     • 개발, 테스트, 운영 환경에 따라 Nginx 설정을 분리하여 관리 용이성 향상.