network 3분 읽기

Proxy!

프론트엔드 개발을 하다 보면 CORS, API 프록시, nginx, devServer proxy 같은 단어들과 함께 “프록시”라는 개념을 자주 마주치게 된다. 그런데 프록시에는 forward proxy(포워드 프록시)와 reverse proxy(리버스 프록시)라는 두 ...

network

🔀 포워드 프록시 vs 리버스 프록시

프론트엔드 개발을 하다 보면 CORS, API 프록시, nginx, devServer proxy 같은 단어들과 함께 “프록시”라는 개념을 자주 마주치게 된다. 그런데 프록시에는 forward proxy(포워드 프록시)와 reverse proxy(리버스 프록시)라는 두 가지 종류가 있다는 사실, 알고 있었는가?

두 개념은 동작 방식은 비슷하지만, 목적과 위치, 시선의 방향이 다르다. 이 글에서는 프론트엔드 개발자의 관점에서 두 프록시를 비교하고, 언제 어떤 상황에서 쓰이는지를 예시와 함께 설명해보려고 한다.

🧭 프록시란 무엇인가?

프록시는 말 그대로 대리 서버다.

사용자(클라이언트)가 어떤 서버에 자원을 요청할 때, 직접 요청하지 않고 프록시 서버를 거쳐서 요청하게 되며, 프록시 서버가 대신 응답을 받아서 사용자에게 전달한다.

이 기본 동작은 포워드 프록시와 리버스 프록시 모두 동일하다.

🔁 포워드 프록시 (Forward Proxy)

🔍 정의

클라이언트 앞단에 위치해서, 클라이언트의 요청을 대신 처리하는 프록시이다.

즉, 클라이언트가 익명으로 인터넷을 이용하거나, 특정 서버에 직접 접근하지 못하게 차단하거나, 요청을 기록/감시하기 위해 사용된다.

🧭 시선: 클라이언트 쪽을 숨긴다

📦 예시

•	회사 내부망에서 직원이 YouTube 접근 → 포워드 프록시 서버를 통해 요청
•	중국에서 구글에 접속할 때 사용하는 VPN, Shadowsocks 등
•	Tor 브라우저 (사용자 익명성 보장)

🧩 프론트엔드 개발과의 관련성

→ 보통 네트워크 보안, 기업 방화벽, 사용자 검열 우회 등에 사용됨

🔁 리버스 프록시 (Reverse Proxy)

🔍 정의

서버 앞단에 위치해서, 클라이언트의 요청을 받아 적절한 백엔드 서버로 라우팅해주는 프록시이다.

즉, 클라이언트는 프록시에게 요청을 보내고, 프록시가 어떤 백엔드에서 처리할지 결정하고 응답을 대신 전달한다.

🧭 시선: 서버 구조를 숨긴다

📦 예시

•	Nginx가 /api 요청을 localhost:3000의 Node.js 서버로 전달
•	Cloudflare가 실제 서버를 대신해 캐싱과 보안을 담당
•	하나의 도메인에서 여러 앱(프론트 + API + 관리자 페이지 등)을 서빙

🧩 프론트엔드 개발과의 관련성

•	개발 시 vite.config.js에서 proxy 설정
•	Nginx를 이용한 정적 파일 서빙 + API 서버 연결
•	CORS 문제 우회

🧠 실제로 프론트에서 어떻게 쓰일까?

개발 시 (Vite, Webpack DevServer 등)

// vite.config.js
server: {
  proxy: {
    '/api': 'http://localhost:3000',
  }
}

→ 리버스 프록시를 통해 CORS 없이 API 호출 가능

배포 시 (Nginx)

location /api/ {
  proxy_pass http://backend-server:3000/;
}

location / {
  root /usr/share/nginx/html;
  index index.html;
}

→ 정적 파일과 API 서버를 분리하고, 하나의 서버처럼 동작하게 함