React Proxy 설정하기

 

React Proxy 설정하기

 

React에서 http-proxy-middleware를 사용하여 Proxy를 설정하는 방법에 대해 정리한 내용입니다.

 

 

 

1. React Proxy 설정

---

웹 애플리케이션에서 다른 리소스로 요청이 발생할 때 출처(도메인, 프로토콜, 포트)가 다른 경우에는 CORS(Cross-Origin Resource Sharing) 문제가 발생합니다.

교차 출처 리소스 공유 (CORS) - HTTP | MDN

이러한 문제를 해결하기 위한 방법으로는 여러가지가 있는데 그 중에서 http-proxy-middleware를 이용하여 proxy를 설정하는 방법에 대해 알아보겠습니다.

GitHub - chimurai/http-proxy-middleware: The one-liner node.js http-proxy middleware for connect, express and browser-sync

 

 

1.1. http-proxy-middleware 설치

 

아래 명령어를 실행해서 http-proxy-middleware 라이브러리를 설치해줍니다.

$ yarn add http-proxy-middleware

yarn add v1.19.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
└─ http-proxy-middleware@2.0.1
info All dependencies
├─ @types/http-proxy@1.17.8
├─ http-proxy-middleware@2.0.1
└─ is-plain-obj@3.0.0
✨  Done in 9.96s.

 

 

1.2. setupProxy.js 작성

 

다음으로 src 하위에 setupProxy.js 파일을 작성해줍니다. package.json에서 proxy 속성을 사용할 수도 있지만 manual하게 설정하려면 다음과 같이 별도의 파일을 작성해줍니다. createProxyMiddleware 함수의 파라미터로 context와 options를 작성해줍니다.

Proxying API Requests in Development | Create React App

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = (app) => {
  app.use(
    createProxyMiddleware(
      ['/v1', '/v2'],
      {
        target: process.env.REACT_APP_API_URL,
        changeOrigin: true,
        router: {
          '/v2': process.env.REACT_APP_V2_URL
        },
        pathRewrite: {
          '^/v2': ''
        }
      }
    )
  );
}

 

위와 같이 설정하고 실행했을 때 context path 동작은 다음과 같습니다.

 

• /v1
  target에 설정된 URL로 요청이 이루어집니다.
• /v2
  router에 설정된 URL로 요청이 이루어집니다.
  pathRewrite 설정에 의해 '/v2' path는 공백('')으로 대체되어 요청이 이루어집니다.

localhost에서 실행한 React 프로젝트를 예시로 설명하면, '/v1' path의 경우엔 브라우저에서 'localhost:3000/v1' 으로 요청을 보낸 것으로 보이지만 실제로는 설정된 proxy에 의해서 target에 명시된 URL로 요청이 이루어지게 됩니다. 이렇게 proxy를 사용하면 CORS 문제를 해결하고 외부의 다른 출처에 요청을 보낼 수 있습니다.

 

추가로 TypeScript CRA를 이용한 프로젝트에서 http-proxy-middleware를 사용하여 proxy를 설정할 때는 setupProxy.ts가 아닌 setupProxy.js로 작성해야합니다. Node의 JavaScript만 지원하기 때문에 src/setupProxy.js로 작성해야 하는데, 이렇게 작성해도 내부에서는 이상없이 동작합니다.

Issues setting up proxy for TypeScript CRA with TypeScript Express app · Issue #8273 · facebook/create-react-app

 

이상으로 React에서 Proxy를 설정하는 방법에 대해 알아봤습니다.

 

 

※ Reference

 

• github.com/chimurai, http-proxy-middleware, https://github.com/chimurai/http-proxy-middleware
• developer.mozilla.org, 교차 출처 리소스 공유 (CORS), https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
• velog.io/@tw4204, React 개발환경에서의 CORS를 위한 proxy 설정, https://velog.io/@tw4204/React-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C%EC%9D%98-CORS%EB%A5%BC-%EC%9C%84%ED%95%9C-proxy-%EC%84%A4%EC%A0%95
• egas.tistory.com, [Typescript] CRA에서 http-proxy-middleware 사용법, https://egas.tistory.com/39
• hoons-up.tistory.com, [Develop/React] proxy 수동 설정(setupProxy), https://hoons-up.tistory.com/26