webpack-dev-serverからリモートSSL環境のAPIを使用する

webpack-dev-serverにはproxyオプションがあり、エンドポイントをwebpack-dev-serverのホストに組み込むことができます。

• https://webpack.js.org/configuration/dev-server/#devserverproxy

また、webpack-dev-serverにはSSL化のオプションもあり、これらを組み合わせるとリモートのSSLのAPIをsame originで扱うことができます。

• https://webpack.js.org/configuration/dev-server/#devserverhttps

(あまりお目にかかることはないのですが、最終的にはsame originになるけど開発用のAPIがリモートしかない、といった場合を想定しています)

必要なもの

webpack-dev-serverを使用しますので、webpackでの開発環境が存在する前提です。

ローカル環境用の秘密鍵、証明書、中間証明書を用意しておく必要があります。私はmkcertを使用しました。

• https://github.com/FiloSottile/mkcert

ここではプロジェクトルートにlocalhost-key.pem(秘密鍵)、localhost.pem(証明書)がある想定で進めます。

中間証明書はmacであれば/Users/<ユーザー名>/Library/Application Support/mkcert/rootCA.pemに生成されます(異なる場合もあるかもしれません)

記述例

https://localhost:8080にDevServerが起動し、リモートSSL環境のホストはhttps://localhost:8080/apiに書き換えられ、same originでアクセスできます。

webpack.config.js

{
  /** ... */
  devServer: {
    /** ... */
    https: true,
    cert: fs.readFileSync('./localhost.pem', 'utf8'),
    key: fs.readFileSync('./localhost-key.pem', 'utf8'),
    ca: fs.readFileSync('/path/to/mkcert/rootCA.pem', 'utf8'),
    proxy: {
      '/api': {
        target: '<リモートSSL環境のURL>',
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // target以下をプロキシの/apiに書き換え
        }
      }
    }
    /** ... */
  }
}

おまけ

ビルド後のファイルを使ってdockerでnginxのproxyを立てる方法です。

ビルドファイルが./dist/以下に生成される前提です。

dockerに食わせるnginxの設定

あまり詳しくないです。とりあえず動く。

default.conf

server {
    listen              443 default ssl;
    ssl_certificate     /etc/nginx/conf.d/localhost.pem;
    ssl_certificate_key /etc/nginx/conf.d/localhost-key.pem;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

    location / {
        root      /usr/share/nginx/html;
        index     index.html index.htm;
        try_files $uri /index.html;
    }

    location /api {
        proxy_redirect off;
        proxy_pass <リモートSSL環境のURL>;
    }
}

Dockerfileの例

./dist/以下のファイル群、鍵、証明書、nginxの設定もろもろをコピーしてnginxを起動すればOK

Dockerfile

FROM nginx:latest
COPY ./default.conf /etc/nginx/conf.d/default.conf
COPY ./localhost.pem /etc/nginx/conf.d/localhost.pem
COPY ./localhost-key.pem /etc/nginx/conf.d/localhost-key.pem
COPY ./dist/ /usr/share/nginx/html/
EXPOSE 9000
# 適当なport