[React] proxy 여러개

프로젝트 진행 중에 다양한 이유로 프록시를 공유해야 하는 상황이 있을 수 있습니다.

여기서 처리해야 할 두 가지 상황이 있습니다.

1. API 버전이나 제공 환경이 다른 경우 Proxy 공유 필요

기본 수동 프록시 설정은 src > setupProxy.js 파일을 생성하고 다음과 같이 설정하면 가능합니다.

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

module.exports = function(app) {
    app.use(
        createProxyMiddleware("/api/v1", {
            target: "https://api.test.com",
            changeOrigin: true,
            cookieDomainRewrite: "localhost"
        })
    );
    app.use(
        createProxyMiddleware("/api", {
            target: "https://api.test.com",
            changeOrigin: true,
            cookieDomainRewrite: "localhost"
        })
    );
};

createProxyMiddleware는 Express.js 미들웨어 패키지 중 하나이며 프록시 서버를 생성하는 데 사용됩니다.

• 대상: 프록시 대상 서버의 주소를 입력합니다.
  
  
• changeOrigin: 대상 서버의 호스트 헤더를 요청된 도메인으로 변경하는 역할, 기본값: false
• cookieDomainRewrite: 쿠키의 도메인을 변경하는 옵션으로, localhost의 원격 서버에서 반환된 쿠키를 사용하려는 경우 설정합니다.
  
  

2. 프록시를 운영체제별로 분할해야 하는 경우

이런 일이 일어날 것이라고 생각하겠지만 놀랍게도 그렇게 되었습니다.

이러한 상황은 일반적으로 병합 후 SI 개발자가 기존 팀 구성원과 작업할 때 발생합니다.

SI를 한 것들은 보통 Windows OS와 Spring + Vue로 풀 스택입니까? 프론트엔드와 백엔드를 동시에 개발하기 때문에 로컬에서 시작해야 하므로 프론트 프록시는 localhost로 설정하고 프론트를 막 만든 사람은 프론트를 열고 프록시를 Set 개발 서버 API로 설정하면 됩니다.

// src/setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");
const os = require("os");
module.exports = function(app) {
    app.use(
        createProxyMiddleware("/api/v1", {
            target: "https://api.test.com",
            changeOrigin: true,
            cookieDomainRewrite: "localhost"
        })
    );
    app.use(
        createProxyMiddleware("/api", {
            target: os.platform().includes("darwin") ? "https://api.test.com" : "http://localhost:8080",
            changeOrigin: true,
            cookieDomainRewrite: "localhost"
        })
    );
};

운영 체제별로 API 대상을 분기합니다.

Mac OS가 나처럼 Darwin으로 분류된다는 것을 처음 알았습니다…