webpack-dev-server: 회사 프록시를 통해 HTTPS API 호출 라우팅하기

webpack-dev-server의 기존 프록시 미들웨어에 HttpsProxyAgent를 추가하되 대상과 경로 재작성 설정은 그대로 유지합니다.

Node 쪽 API 연결을 webpack.config.mjs에서 현재의 프록시 배열 형식으로 구성합니다.

import { HttpsProxyAgent } from 'https-proxy-agent';

export default {
  devServer: {
    proxy: [{
      context: ['/api'],
      target: 'https://service.example',
      changeOrigin: true,
      agent: new HttpsProxyAgent('http://proxy.example:8080'),
      pathRewrite: { '^/api': '' },
    }],
  },
};

경로는 다음과 같습니다.

browser → webpack dev server → corporate proxy → HTTPS API

target은 실제 HTTPS API로 남습니다. 프로젝트에 이미 있다고 가정하는 에이전트가 HTTP 중개자를 통해 경로를 협상합니다.

context은 브라우저가 보는 요청 경로를 선택하고, pathRewrite은 개발용 접두사를 제거합니다. 둘 다 회사 프록시의 이름을 지정하지 않습니다. API가 기대하는 경로에 맞게 이 매핑을 유지하십시오.

미들웨어의 일반적인 스트리밍과 응답 처리를 사용해 API 거부와 전송 실패가 구분되게 하십시오. 항상 200을 반환하는 두 번째 수제 중계를 두면 그 결과가 가려집니다.

브라우저 프록시 설정과 npm의 패키지 다운로드 프록시는 다른 사용자를 구성합니다. 이 설정은 외부 API 호출을 수행하는 webpack 프로세스에 속합니다.

관련 글