React CRA 기반 프로젝트 proxy 설정

현재 회사에서 진행중인 프로젝트는 CRA 기반으로 만들어졌기에 eject를 통해 직접 webpack을 건드리지 않고 다른 방법으로 proxy를 설정했으며 내가 해본 방법으로는 크게 2가지가 있다.

1. package.json에서 간단한 설정

react-scripts 공식 문서를 참고해 package.json에 간단하게 설정

// package.json
{
	"proxy": "http://localhost:5051"
}

2. http-proxy-middleware 라이브러리 사용

해당 프로젝트에서는 websocket도 사용할 예정이었기에 다음과 같은 이유로 라이브러리를 선택하였다.

• websocket으로 서버와 통신시 protocol을 http가 아닌 ws를 사용
• 아래와 같이 proxy를 설정하면 websocket 요청들의 protocol이 http로 바뀐 상태로 서버에 전달되기에 websocket 사용 불가

ws://apiserver.com:9000/socketio?...

따라서 http-proxy-middleware 모듈로 해결하였으며 socket.io에 대해서는 다른 url을 사용해야 하므로 router라는 옵션을 활용했다.

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = app => {
  app.use(
    createProxyMiddleware(
      ['/api', '/socket.io'],
      {
        target: 'https://도메인.com',
        changeOrigin: true,
        ws: true,
        router: {
          '/socket.io': 'ws://nginx:80'
        },
        pathRewrite: {
          '^/api/': ''
        }
      }
    )
  )
}

참고 자료(Reference)

http-proxy-middleware 라이브러리