Web Server - NGINX

Nginx란 무엇인가?

Nginx는 외부 요청을 가장 먼저 받아서, 내부 서비스로 전달해주는 역할을 한다.

• 웹 서버
• 리버스 프록시
• SSL 종료 지점 이 모든 역할을 하나로 묶은 서버 프로그램이다.

---

1. 프론트엔드 개발자에게 Nginx가 중요한 이유

프론트엔드 서버(Next.js, React SSR 등)는 보통 아래와 같이 실행된다.

npx next start -p 3000

하지만 이 상태는 운영에 부적합하며, 아래와 같은 문제가 발생한다.

• 3000 포트 직접 노출
• HTTPS 적용 어려움
• 보안 취약
• 서버가 죽으면 바로 서비스 중단

이 문제를 해결하는 역할이 Nginx이다.

---

2. 운영 배포 구조

[사용자 브라우저]
      |
   80 / 443
      |
    Nginx
      |
127.0.0.1:3000
      |
   Next.js

• 외부 사용자는 80/443만 접근
• Next.js는 내부 포트(3000)에서만 실행
• Nginx가 중간에서 요청을 전달

이 구조의 핵심은 **"외부에서는 Nginx만 노출하고, 애플리케이션 서버는 숨긴다"**는 것이다.

---

3. 127.0.0.1 vs 0.0.0.0

Next.js 실행 옵션 :

npx next start -p 3000 -H 0.0.0.0

npx next start -p 3000 -H 127.0.0.1

설정	의미	외부 접근
0.0.0.0	모든 네트워크 인터페이스	가능
127.0.0.1	자기 자신(서버 내부)	불가능

운영 서버에서는 0.0.0.0은 외부 공개, 127.0.0.1은 내부 전용을 의미하므로, Next.js는 반드시 127.0.0.1에 바인딩해야 한다.

---

4. Nginx 설치 방법

Ubuntu

sudo apt update
sudo apt install nginx -y

설치 확인 :

systemctl status nginx

브라우저에서 서버 IP 접속 -> Welcome to nginx! 페이지가 뜨면 성공

---

5. Nginx로 Next.js 프록시 설정하기

5-1. 설정 파일 생성

sudo nano /etc/nginx/sites-available/nextjs

5-2. 최소 설정 예시

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://127.0.0.1:3000;

        proxy_http_version 1.1;
        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;
    }
}

5-3. 활성화

sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

---

6. 방화벽 설정

열어야 할 포트

• 80
• 443
• 3000 (운영 환경에서는 외부에 절대 열면 안 되며, 내부 통신용으로만 사용)

sudo ufw allow 80
sudo ufw allow 443
sudo ufw enable

---

7. 프론트엔드 개발자가 알아두면 좋은 Nginx 패턴

7-1. 정적 파일 캐싱 (성능 향상)

location /_next/static/ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

7-2. API 분기 처리

location /api/ {
    proxy_pass http://127.0.0.1:3000;
}

7-3. 여러 서버로 확장 (로드 밸런싱)

upstream nextjs {
    server 127.0.0.1:3000;
    server 127.0.0.1:3001;
}

---

8. 정리

1. Nginx는 Next.js 앞단에서 요청을 받는 관문이다.
2. 운영에서는 3000 포트를 외부로 노출하면 안된다.
3. Next.js는 항상 127.0.0.1에 바인딩해야 한다.
4. HTTPS는 Nginx에서 처리한다.