Post

nginx proxy 설정

현재 의뢰를 받아 Web 어플리케이션을 개발하고 있는데, 보안 상의 이유로 nginx를 통해서만 backend에 접속하도록 수정하였습니다. 이전에는 backend의 api 주소가 노출되었습니다.


🛠️ 시스템 구성

  • Backend: Sprint Boot
  • Frontend: React
  • Database: MS-Sql

Backend, Frontend 둘 다 같은 docker(Docker Desktop)에 올라와 있습니다. Backend, Frontend Docker를 생성할 때 동일한 네트워크에 묶어줘야 합니다. Dockerfile 상단에 추가합니다.

1
2
3
4
5
# 네트워크가 없으면 생성
if (!(docker network ls -q -f name=my-net)) {
    Write-Host "Creating network: my-net"
    docker network create my-net
}
1
docker network inspect my-net

Docker를 생성했다면 커맨드 창에서 위 명령어로 my-net에 대한 정보를 확인할 수 있습니다.

Backend, Frontend가 구성되었으면 nginx.conf에서 proxy 설정하여 /api/가 포함된 요청이 들어오면 Backend로 전달하여 처리하도록 합니다. proxy_pass 설정할 때 앞서 생성한 Backend Docker 이름을 기입해야 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
server {
	listen 80;
	server_name localhost;

	location / {
		root /usr/share/nginx/html;
		index index.html index.htm;
		# SPA(Single Page Application) 라우팅을 위해 필요
		try_files $uri $uri/ /index.html;
	}
  
	# Backend API 프록시 설정
    location /api/ {
		# Spring Boot 기본 포트가 8080이라고 가정합니다.
        proxy_pass http://BackendName:8080;

        # 헤더 전달 (IP 추적 등을 위해 필수)
        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;

        # 타임아웃 설정 (필요 시 늘리세요 - 엑셀 업로드 등)
        proxy_read_timeout 300s;
        proxy_connect_timeout 300s;
    }
}

마지막으로 .env.production 파일을 확인합니다. 이전에 입력된 Backend API 서버 주소를 삭제합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# [수정 전] 백엔드로 직접 접속 (Nginx 우회, CORS 위험)
# NEXT_PUBLIC_API_SERVER=http://localhost:8090

# [수정 후] 빈 값으로 설정 (추천)
# 빈 값으로 두면 브라우저는 API 요청을 '/api/...' 상대 경로로 보냅니다.
# 즉, http://localhost:3000/api/... 로 요청이 가고, Nginx가 이를 잡아 백엔드로 넘깁니다.
NEXT_PUBLIC_API_SERVER=

# 만약 빈 값이 동작하지 않는 구조라면 아래처럼 Frontend 주소를 적으세요.
# NEXT_PUBLIC_API_SERVER=http://localhost:3000

# -----------------------------------------------------------

# [SSE 설정]
# SSE(알람)도 Nginx를 통하게 하려면 동일하게 설정합니다.
# 단, Nginx에서 SSE 헤더 설정이 필요할 수 있습니다. 
# 일단 API 서버 설정과 맞추는 것이 좋습니다.
NEXT_PUBLIC_SSE_SERVER=