[React] proxy 여러개 설정하여 협업하는 방법

프로젝트를 진행하다보면 여러 이유로 proxy를 나눠야할 상황이 발생할 수 있다.

여기서 다룰 상황은 2가지 이다.

1. api 버전 혹은 제공하는 환경이 달라져 proxy를 나눠야 할 경우

기본적인 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의 미들웨어 패키지 중 하나로 프록시 서버를 만드는데 사용된다.

• target : 프록시 대상 서버의 주소 입력
• changeOrigin : 대상 서버의 host 헤더를 요청하는 도메인으로 바꿔주는 역할 , 기본값 : false
• cookieDomainRewrite : 쿠키의 도메인을 수정할 수 있는 옵션으로, 원격 서버에서 반환된 쿠키를 localhost 사용하고 싶을 때 설정

2. OS에 따라 proxy를 나눠야 할 경우

이런경우가 있겠냐고 생각하겠지만.. 놀랍게도 일어났다.

기존의 팀원들과 합병되어서 들어온 SI개발자가 협업을 할 때 대체로 이러한 상황이 연출된다.

 

SI를 하던 분들은 대체로 window OS에다가 spring + vue로 풀스택? 으로 개발하기 때문에 프론트와 백엔드를 모두 로컬에서 띄워야해서 프론트 proxy를 localhost로 하고 기존에 프론트만 하던 분들은 프론트만 띄우고 proxy를 개발서버 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의 target을 os 별로 분기처리하면 된다.

하면서 mac OS가 darwin으로 분류되는지 처음 알았다...