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 プロセスに属します。

関連記事