Nginx 란 무슨 역할을 할까?

1. Nginx는 무엇인가?

Nginx는 한 단어로 정리하면 이거다.

“요청을 가장 먼저 받아서, 적절한 곳으로 전달해주는 관문”

공식적으로는:

• 웹 서버(Web Server)
• 리버스 프록시(Reverse Proxy)

역할을 동시에 수행한다.

2. 웹 서버로서의 Nginx

웹 서버란?

👉 정적인 파일을 직접 클라이언트에게 제공하는 서버

예:

• HTML
• CSS
• JS
• 이미지
• favicon

Nginx는 이걸 아주 빠르게 처리한다.

브라우저 → Nginx → (파일 있으면) 바로 응답

📌 이게 중요한 이유

Next.js 서버가 모든 요청을 다 처리할 필요가 없어진다

3. 리버스 프록시란?

프록시 vs 리버스 프록시

Nginx는 서버 앞에 서서 이런 역할을 한다.

“이 요청은 Next.js로 보내고

이 요청은 그냥 내가 처리할게”

4. 왜 Next.js 앞에 Nginx를 둬야 할까?

❌ Next.js 서버를 직접 노출하면?

브라우저 → 3000 → Next.js

문제점:

• 포트 노출 (3000)
• HTTPS 직접 처리 어려움
• 정적 파일도 Node가 처리
• 트래픽 증가 시 불안정

✅ Nginx를 앞에 두면?

브라우저 → 80/443 → Nginx → 3000 → Next.js

장점:

• 외부엔 80 / 443만 노출
• HTTPS 종료 지점
• 정적 파일 직접 처리
• Next.js 보호막 역할

👉 Next.js는 오직 “앱 로직”만 집중

5. 실제 요청 흐름 (진짜 중요)

예: 사용자가 /products 페이지 접속

1️⃣ 브라우저
   → https://example.com/products 요청
 
2️⃣ Nginx
   → 443 포트에서 요청 수신
   → HTTPS 해제 (SSL 종료)
 
3️⃣ Nginx 판단
   - 정적 파일인가? ❌
   - 앱 요청이다 → 프록시
 
4️⃣ Nginx → Next.js
   → http://localhost:3000/products
 
5️⃣ Next.js
   → SSR / API 처리
   → HTML or JSON 응답
 
6️⃣ Nginx
   → 응답 수신
   → 브라우저에 전달

📌 브라우저는 Next.js 서버의 존재를 모른다

👉 오직 Nginx만 알고 있다

6. Nginx가 없으면 생기는 문제들

1️⃣ HTTPS 문제

• Node에서 직접 SSL 처리 복잡
• 인증서 갱신 귀찮음

2️⃣ 정적 파일 성능

• Node는 정적 파일에 최적화 ❌
• Nginx는 정적 파일에 최적화 ⭕

3️⃣ 보안

• 서버 포트 직접 노출
• 공격 표면 증가

4️⃣ 확장성

• 나중에 서버 늘릴 때 구조 변경 큼

7. Nginx 설정 한 줄로 이해하기

location / {proxy_pass http://localhost:3000;
}

이 한 줄의 의미:

“모든 요청을

localhost:3000에서 실행 중인 Next.js로 전달해라”

📌 Next.js는 뒤에서 조용히 일만 한다

8. Nginx는 배포 구조의 중심이다

정리하면:

[ Client ]
    ↓
[ Nginx ]
  - HTTPS
  - 정적 파일
  - 리버스 프록시
    ↓
[ Next.js ]
  - SSR
  - API
  - 앱 로직