미들웨어 프록시란?
프록시는 클라이언트(브라우저)와 서버 사이에 중계 역할을 하는 서버입니다. 클라이언트가 특정 서버에 직접 요청을 보내지 않고, 중간에 위치한 프록시 서버가 요청을 대신 전달하고 그 응답을 다시 클라이언트로 보내는 방식입니다.
미들웨어 프록시는 개발 환경에서 자주 사용되며, 개발 중 클라이언트와 외부 API 간의 요청을 중계하여 발생할 수 있는 CORS(Cross-Origin Resource Sharing) 문제를 우회할 수 있도록 도와줍니다.
왜 미들웨어 프록시가 필요한가?
React 같은 싱글 페이지 애플리케이션(SPA)을 개발할 때, 클라이언트 측에서 외부 API로 요청을 보낼 때 CORS 정책에 의해 브라우저에서 차단될 수 있습니다. 브라우저는 동일 출처 정책(Same-Origin Policy)을 따르기 때문에, 클라이언트가 다른 도메인에 직접적으로 요청을 보내는 것을 허용하지 않습니다. 이 문제를 해결하기 위해 개발 환경에서는 프록시 미들웨어를 사용합니다.
개발 환경 http://localhost:3000 브라우저'에서' 외부 API 요청'을'차단하는 겁니다.
미들웨어 프록시 사용법 (React와 http-proxy-middleware)
React에서 개발 환경에서만 동작하는 미들웨어 프록시는 http-proxy-middleware 라이브러리를 사용해 설정할 수 있습니다. 이 미들웨어는 주로 create-react-app 환경에서 사용되며, 로컬 개발 서버(webpack-dev-server)에서 동작합니다.
http-proxy-middleware 설정 방법
1. 설치
먼저 http-proxy-middleware 라이브러리를 프로젝트에 설치합니다:
npm install http-proxy-middleware --save2. setupProxy.js 파일 생성
src/ 디렉토리에 setupProxy.js 파일을 생성합니다. 이 파일에 프록시 설정을 추가합니다. 예를 들어, 클라이언트에서 /api로 시작하는 모든 요청을 외부 API 서버로 프록시하려면 다음과 같은 설정을 사용할 수 있습니다:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'https://api.example.com', // 외부 API 서버의 주소
changeOrigin: true, // 서버의 origin을 변경
pathRewrite: {
'^/api': '', // /api로 시작하는 경로를 빈 문자열로 바꿈
},
})
);
};이 설정은 다음과 같은 역할을 합니다:
/api경로로 들어오는 모든 요청을https://api.example.com으로 프록시합니다.pathRewrite설정을 통해/api부분을 제거하고 실제 API 서버로 요청을 보냅니다.
3. 프록시 동작 과정
클라이언트가 http://localhost:3000/api/some-endpoint로 요청을 보낼 경우, 이 요청은 미들웨어 프록시에 의해 https://api.example.com/some-endpoint로 전달됩니다. 클라이언트는 이 과정을 인식하지 못하고, 응답만 받게 됩니다.
주의사항: 배포 환경에서의 프록시
중요한 점은 이 미들웨어 프록시는 개발 환경에서만 동작한다는 것입니다. create-react-app으로 시작한 개발 서버(webpack-dev-server)가 실행될 때만 프록시가 활성화됩니다. 하지만 배포된 환경에서는 이 미들웨어가 동작하지 않습니다.
왜 배포 환경에서는 동작하지 않는가?
- 정적 파일로 배포: React 애플리케이션이 배포되면, 일반적으로 Vercel, Netlify, GitHub Pages와 같은 플랫폼에서 정적 파일로 제공됩니다. 이때 프론트엔드 애플리케이션은
webpack-dev-server같은 Node.js 서버를 사용하지 않으며, 단지 정적 파일(HTML, CSS, JavaScript)로만 제공됩니다. 따라서setupProxy.js에 설정된 프록시 미들웨어는 더 이상 작동하지 않습니다. - CORS 문제: 배포 환경에서는 클라이언트에서 API 서버로 직접 요청을 보내기 때문에 다시 CORS 문제가 발생할 수 있습니다. 이 문제를 해결하려면 배포 환경에서도 CORS를 허용할 수 있는 백엔드 서버가 필요하거나, 외부 API가 CORS 요청을 허용해야 합니다.
배포 환경에서의 해결 방법
-
API 요청을 직접 HTTPS로 보내기:
배포된 애플리케이션은 보안(HTTPS)으로 제공되므로, API 요청도 HTTPS로 보내야 합니다. 만약 API 서버가 HTTPS를 지원하면, 클라이언트에서 직접 HTTPS로 요청을 보내어 CORS 문제를 피할 수 있습니다.엥간~한 openAPI서버들은 HTTPS를 지원하기때문에 기존 http로 보냈던 API를 https로 바꿔주면 됩니다.
-
백엔드 서버 설정:
백엔드 서버가 있다면, 클라이언트가 외부 API로 직접 요청을 보내는 대신 백엔드 서버로 요청을 보내게 하고, 백엔드가 외부 API에 요청한 결과를 클라이언트로 전달하도록 설정할 수 있습니다. 이 방식은 클라이언트와 외부 API 간의 CORS 문제를 우회할 수 있는 좋은 방법입니다. -
서버리스 함수(Serverless Function) 사용:
Vercel이나 Netlify와 같은 호스팅 플랫폼에서는 서버리스 함수(예: AWS Lambda)로 API 요청을 중계할 수 있습니다. 클라이언트가 서버리스 함수로 요청을 보내면, 이 함수가 외부 API로 요청을 보내고, 응답을 다시 클라이언트로 전달합니다. 이를 통해 CORS 문제를 해결할 수 있습니다.
예시: 서버리스 함수 사용
Vercel에서는 서버리스 함수를 쉽게 설정할 수 있습니다. 예를 들어, Vercel에서 API 요청을 처리하는 서버리스 함수는 다음과 같습니다:
// api/proxy.js
export default async function handler(req, res) {
const response = await fetch('https://api.example.com/some-endpoint');
const data = await response.json();
res.status(200).json(data);
}클라이언트는 /api/proxy 경로로 요청을 보내면, Vercel 서버리스 함수가 외부 API에 요청을 보내고, 응답을 전달합니다. 이 방법은 배포 환경에서도 CORS 문제를 해결할 수 있습니다.
결론
- 미들웨어 프록시는 개발 환경에서 CORS 문제를 해결하고, 클라이언트와 외부 API 간의 요청을 중계하는 역할을 합니다. 하지만 이는 배포 환경에서는 동작하지 않기 때문에 클라이언트에서 직접 HTTPS로 API 요청을 보내거나 백엔드 서버를 이용해 요청을 중계해야 합니다.
- 배포 환경에서는 백엔드 서버 또는 서버리스 함수가 이러한 역할을 대신하여 CORS 문제를 해결하고, 클라이언트가 안정적으로 API와 통신할 수 있도록 도와줍니다.
요약
- 미들웨어를 통해 프록시 역할을 수행하도록 코드를 작성한다!
- http-proxy-middleware 같은 라이브러리는 미들웨어 코드로서 프록시 기능을 구현한다!
- 이 경우 미들웨어가 프록시 서버 역할을 간접적으로 수행한다!
- 클라이언트가 서버에 요청을 보내면, 미들웨어가 그 요청을 가로챈다!
- 미들웨어는 요청을 처리하고, 다른 서버로 전달하는 역할(프록시 역할)을 한다!
- 해당 서버의 응답을 다시 받아서 클라이언트에게 반환한다!
