React CRA 기반 프로젝트 proxy 설정

jybaek96·2022년 7월 26일
0

React

목록 보기
1/1
post-thumbnail

현재 회사에서 진행중인 프로젝트는 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 라이브러리

0개의 댓글