Nginx 설정 파일 (nginx-front.conf) 작성

0. 전체 코드

worker_processes auto;

events {
    worker_connections 1024;
}

http {
	# ✅ MIME 타입 포함 및 기본 콘텐츠 타입 설정
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
        listen 80;
        server_name frontend;

        # ✅ React 정적 파일 서빙
        root /usr/share/nginx/html;
        index index.html;

        # ✅ 정적 파일이 있으면 서빙, 없으면 index.html 반환 (SPA 라우팅)
        location / {
            try_files $uri $uri/ /index.html;
        }

        # ✅ 정적 파일 캐싱 (CSS, JS, 이미지 등)
        location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|otf|svg)$ {
            expires 6M;
            access_log off;
            add_header Cache-Control "public, max-age=15552000, immutable";
            try_files $uri =404;
        }
    }
}

---

1. 개요

이 nginx-front.conf 파일은 React 정적 파일 서빙 기능을 담당하는 Nginx 설정을 제공합니다.

---

2. 기본 설정

(1) 워커 프로세스 자동 설정

worker_processes auto;

• 자동 설정: auto를 사용하면 Nginx가 시스템의 CPU 코어 수를 기반으로 워커 프로세스를 자동으로 결정하여 성능을 최적화합니다.

---

(2) 이벤트 설정

events {
    worker_connections 1024;
}

• 각 워커 프로세스당 최대 1024개의 연결을 허용합니다.
• 병렬 처리 최적화: 많은 동시 요청을 처리할 수 있도록 설정합니다.

---

3. HTTP 설정 및 서버 블록

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
        listen 80;
        server_name frontend;

• 포트 80 리스닝: HTTP 기본 포트(80번)에서 요청을 처리합니다.
• 도메인 설정: frontend를 기본 서버 이름으로 설정합니다.
• MIME 타입 포함: /etc/nginx/mime.types 파일을 포함하여 다양한 파일 유형을 올바르게 처리할 수 있도록 합니다.
• 기본 콘텐츠 타입 설정: 정의되지 않은 파일 타입은 application/octet-stream으로 처리됩니다.

---

4. 정적 파일 서빙 (React 앱)

        # ✅ React 정적 파일 서빙
        root /usr/share/nginx/html;
        index index.html;

• 정적 파일 경로: React 빌드된 정적 파일이 /usr/share/nginx/html에 위치합니다.
• 기본 파일 설정: index.html을 기본 파일로 지정합니다.

---

5. SPA 라우팅 및 파일 반환 방식

        # ✅ 정적 파일이 있으면 서빙, 없으면 index.html 반환 (SPA 라우팅)
        location / {
            try_files $uri $uri/ /index.html;
        }

• 파일이 존재하면 반환, 없으면 index.html 반환: try_files $uri $uri/ /index.html;을 사용하여 파일이 존재하지 않으면 React의 index.html을 반환합니다.
• SPA(Single Page Application) 라우팅 지원: React Router 같은 클라이언트 사이드 라우팅을 지원하기 위해 사용됩니다.

---

6. 정적 리소스 캐싱 설정

        # ✅ 정적 파일 캐싱 (CSS, JS, 이미지 등)
        location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|otf|svg)$ {
            expires 6M;
            access_log off;
            add_header Cache-Control "public, max-age=15552000, immutable";
            try_files $uri =404;
        }

• 정적 리소스 캐싱: HTML을 제외한 CSS, JS, 이미지 등의 정적 리소스를 6개월(6M) 동안 캐싱하여 성능을 최적화합니다.
• 액세스 로그 비활성화: access_log off; 설정을 통해 정적 파일 요청에 대한 로그를 기록하지 않음으로써 성능을 향상시킵니다.
• 파일이 없으면 404 반환: try_files $uri =404;를 사용하여 요청된 파일이 존재하지 않으면 404 응답을 반환합니다.