Nginx로 Reverse Proxy 설정하기

🔎 문제 상황

전시회 참여를 위해 사내 서버(Private망)에 구축되어 있는 솔루션을 외부망에서도 접근할 수 있도록 네트워크 설정을 변경하는 일이 있었다. 라우팅을 했는지 아님 포트포워딩을 했는지는 확실하지 않지만(아마도 포트포워딩?) 어쨌든 결론은 사내망 IP로 접속할 수 있던 것을 외부망에서도 접속이 가능하도록 변경한 것이다.

 

그러나 이렇게 외부망에서 접속할 수 있도록 변경하면서 리액트 앱이 연계된 API 서버와 연동이 안되는 문제가 발생하였다. 현재 우리 솔루션의 아키텍처는 약간 독특하게 구성되어 있는데 CSR인 리액트를 Node.js 서버 위에 올리고, 리액트에서 Node.js, Spring Server 및 python Server와 통신하는 구조이다.

 

 

리액트 앱에서 각 서버로 전송하는 API URL을 사내망 서버의 IP로 연동을 해 두었는데, 리액트가 외부망에서 동작하다 보니 사내망으로 접근이 안되기 때문에 발생한 문제였다.

 

외부망에서 리액트 앱이 로드 되었을 때에는 리액트 앱이 클라이언트 측에서 실행되므로, 내부망으로 직접 접근이 불가능하다. (외부망IP를 통해 내부망IP로의 연결을 설정하더라도, 실제 네트워크는 격리된 상태)

따라서 외부망 IP를 통해 간접적으로 접근하도록 만들어야 하고, 이를 위해 Reverse Proxy 설정을 통해 내부망으로 요청이 들어올 수 있도록 한다.

 

문제를 해결하기 위해 Nginx를 사용하여 클라이언트(외부망)에서 들어오는 요청을 Nginx를 거쳐 서버에 전달이 되도록 구성을 변경하였다.

 

🎁 해결방안

✔ Reverse Proxy란

Reverse Proxy란 클라이언트의 요청을 대신 받아 내부 서버로 전달해주는 것을 말한다.

 

예를 들어 /api/spring 경로로 들어오는 요청들은 Nginx의 리버스 프록시 설정을 통해 스프링 서버로 요청을 보내고, /api/python 경로로 들어오는 요청은 파이썬 서버로 요청을 보내는 등의 작업을 한다.

 

✔ Nginx Reverse Proxy 설정

# nginx의 기본 server 블록 설정
# /etc/nginx/conf.d/default.conf

server {
    listen       80;
    server_name  localhost;

		location / {
		    proxy_pass http://127.0.0.1:8080;
		}
		
		location /api {
		    proxy_pass http://127.0.0.1:5000;
		}
}

 

Nginx 설정을 위와 같이 하게 되면 localhost의 80포트를 nginx가 보고 있어, localhost의 80 포트로 접속하면 nginx로 접속하게 되고 localhost:80/ 경로로 접속할 때에는 8080 포트로 요청이 전달되고, localhost:80/api 경로로 접속하면 5000 포트로 요청이 전달된다.

 

 

실제로는 위의 그림과 같이 리버스 프록시 설정이 가능하도록 아래와 같이 설정을 작성하였다.

api 혹은 ai일 경우의 경로를 우선 처리하기 위해 location의 위치를 /api, /ai 다음 /로 설정 하였다.

 

server {
    listen       5000;
    server_name  사내망IP;
    
		location /api {
		    proxy_pass http://사내망IP:3000/api;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		    proxy_set_header Host $host;
		    client_max_body_size 10M;
		}
		
		location /ai {
		    proxy_pass http://사내망IP:8010/ai;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		    proxy_set_header Host $host;
		    client_max_body_size 10M;
		}
		
		location / {
		    proxy_pass http://사내망IP:3000;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		    proxy_set_header Host $host;
		    client_max_body_size 10M;
		}	
}

 

👊 적용 후 CORS 에러 발생!

위와 같이 Nginx 설치 및 설정 후 Spring Server단에서 CORS 에러가 발생하였다.

원인은 Spring Server에서 Cors가 사내망IP로만 설정이 되어 있기 때문이다. 결국 외부망에서 들어오는 요청은 외부망 IP를 타고 들어오기 때문에 외부망 IP까지 허용해주어야 CORS 에러가 발생하지 않는다.

 

Reverse Proxy는 클라이언트의 요청을 대신 받아 내부 서버로 전달해 주는 역할만 하며, CORS는 클라이언트의 원래 출처(Origin)을 기준으로 허용 여부를 판단하기 때문에 외부망 IP를 추가하지 않으면 요청이 차단된다.

 

이렇게 설정 후 테스트 한 결과 정상적으로 요청을 주고 받을 수 있었다.

 

👊 적용 후 1MB 이상 파일 업로드 안되는 문제 발생!

또한 NGINX 설정 후 1MB 이상의 파일이 업로드 되지 않는 문제가 발생하였다. 기본적으로 Nginx에서는 파일 업로드시 1M 이상의 파일이 업로드 되지 않게 되어있다. 따라서 위의 conf 파일에서 업로드 크기 제한 설정을 변경해 주어야 한다.

 

⁉ proxy_set_header X-Forwarded-For와 proxy_set_header Host 설정하는 이유

1. X-Forwarded-For
   • 원래 클라이언트 IP를 내부 서버에 전달한다.
   • 기본적으로 Nginx는 리버스 프록시로 작동할 때, 요청이 마치 Nginx 서버에서 온 것처럼 내부 서버에 전달한다. 따라서 내부 서버는 원래 클라이언트의 IP를 알 수 없다.
   • proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 를 사용하면, Nginx가 원래 요청의 클라이언트 IP를 X-Forwarded-For 헤더에 추가하여 내부 서버로 전달한다. 이를 통해 내부 서버는 요청의 원래 출처 IP를 식별할 수 있으며, 로그 분석이나 보안 설정에 유용하다.
2. Host
   • 원래 요청의 호스트 헤더를 내부 서버에 전달한다.
   • 이 설정이 없으면, 내부 서버는 Nginx가 설정한 IP나 호스트 정보를 호스트로 인식하여 처리할 수 없다.
   • 이 설정은 특히, 가상 호스트 설정을 사용하는 경우에 유용한데, 내부 서버가 여러 호스트에 따라 다르게 응답하는 경우, 원래 요청의 호스트 정보를 알아야 정확한 응답을 할 수 있기 때문이다.

---

참고자료

https://narup.tistory.com/238