React Proxy 설정

✒️ 2025-05-28 10:13 내용 수정

• 참고 자료 : Create React App Configuring the Proxy Manually, iberis2's React Proxy
• 팀 프로젝트에서 같은 프로젝트 경로 내에서 client와 server 폴더를 따로 만들고, script로 둘을 동시에 실행하도록 설정했다.
• 이 때 React와 Node(서버)가 개발 환경에서 실행할 때는 서로 다른 포트를 사용하면서 CORS 에러가 발생한다.
  • CORS(Cross-Origin Resource Sharing) 참고.
  • 프로젝트에서도 React는 3000번, Node는 10000번 포트를 사용하면서 CORS 에러가 발생했었다.
• React의 Proxy 설정을 추가하면 CORS 정책을 우회하여 클라이언트와 서버가 통신할 수 있도록 설정할 수 있다.

Proxy

네트워크에서 클라이언트와 서버 사이에 중개 역할을 하는 서버나 소프트웨어

• 클라이언트의 요청을 받아 실제 서버에 전달하고, 서버로부터 받은 응답을 클라이언트에 전송한다.
  • 클라이언트와 서버가 직접적인 통신이 아닌 간접적인 통신을 하게 해준다.
• PROXY 서버는 클라이언트의 IP를 숨길 수 있어 클라이언트의 정보를 보호할 수 있고, 서버에 직접적으로 접근하지 않기에 서버를 보호할 수 잇다.
• 자주 요청되는 리소스를 캐싱해서 서버에 불필요한 요청을 보내지 않고 네트워크 리소스를 줄일 수 있다.
• 특정 웹 사이트나 서비스에 대한 접근을 제어할 수 있다.

클라이언트의 package.json에 proxy 추가

• 아래 구문을 추가하면 fetch('/api/test')와 같은 요청을 개발 서버로 보낼 때, 요청을 http://localhost:5000/api/test 형식으로 proxy한다.
  • proxy는 개발 환경(npm start)에서만 영향을 주며, 배포 환경에서 /api/test와 같은 URL이 의도한 서비스와 일치하도록 설정하는 것은 본인이 작성하기 나름이다.
  • /api 접두사 말고 다른 접두사도 가능하며, text/html accept header가 없는 구분 불가한 요청들은 설정해둔 proxy로 리다리렉트 된다.
    • 즉 서버로 보낼 api들을 구분하고자 한다면 접두사를 추가하는 것이 좋다.
• proxy는 HTTP, HTTPS, WebSocket 연결을 지원한다.
  • WebSocket 연결 때도 CORS 에러가 발생해서 proxy 설정을 확인했었다.

// package.json
{
	// 생략
	"proxy" : "http://localhost:5000"
}

Proxy 직접 설정하기

• react-scripts@2.0.0 버전 이상만 지원한다.
• proxy를 package.json에 설정할 수도 있지만 proxy를 종종 바꿀 상황에서 package.json 파일을 일일이 수정하기 어렵다면 Node javascript syntax로 작성된 파일을 사용하는 방법으로 해결할 수 있다.
• 먼저 클라이언트 프로젝트 루트 경로에서 http-proxy-middleware를 설치한다.

npm install http-proxy-middleware --save

• 그리고 클라이언트 폴더에서 src 폴더에 setupProxy.js 파일을 만든다.
  • 이 파일은 수동으로 import할 필요 없이 개발 서버를 실행하면 자동으로 등록된다.
  • 이 설정을 적용한다면 package.json의 Proxy 구문을 지워야 한다.

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api', // proxy가 필요한 요청 경로, /api/test와 같이 /api로 시작하는 요청들 포함
        createProxyMiddleware({
            target: `${process.env.PROXY}`, // 타겟이 되는 api url
            changeOrigin: true, // 대상 서버 구성에 따라 host header 변경 설정
            ws: true // websocket 허용
        })
    );
};

• 프로젝트용 설정을 위해 클라이언트 프로젝트 루트 폴더에 .env 파일을 만들어 Proxy 환경 변수도 설정했다.
  • .env 파일의 Proxy만 변경하면 package.json에서 설정을 바꾸지 않아도 Proxy를 변경할 수 있다.
  • 이렇게 설정한 이유는 github에 package.json을 같이 올리면서 proxy를 이후에 배포용 서버에서 설정할 때 주소 누락 등을 방지하기 위해 package.json의 설정을 변경했다.

# .env
PROXY="http://localhost:5000"

• axios 설정에도 /api를 추가하고, 서버의 라우트에도 /api를 추가해 개발 환경에서의 proxy 요청이 필요한 라우트를 구분 지었다.

// src/lib/axios.js
import axios from 'axios';
axios.defaults.withCredentials = true; // 쿠키 공유 허용

const instance = axios.create({
    baseURL : `http://localhost:10000/api/`
});

export default instance;

// server.js
// `/api/main` 형식으로 요청을 받는다
app.use("/api", require('./api/main.js'));
app.use("/api", require('./api/login.js'));