webpack-dev-server + mkcertで有効なhttpsリクエストでビルド済みのファイルを配信する

kintoneなどのSaaS環境へJavaScriptカスタマイズを行うときカスタマイズ方法が限られているケースがあります.

httpsのURLが登録可能な場合、ローカルの開発環境からhttpsでwebpackでビルドしたファイルを配信すると 開発効率をグッと上げることができます！

そこでwebpack-dev-serverをhttpsで動作させて、変更したファイルを即時配信してみよう.

単純にwebpack-dev-serverをhttpsモードで動作させることはできます. しかし、ブラウザから危険なhttpsリクエストと判断されてwebpack-dev-derverからの JavaScriptのダウンロードに失敗してしまいます.

そこで証明書インストールの便利ツールmkcertを使っていい感じに動作させてみましょう.

mkcert でlocalhostの証明書をインストールする

パッケージマネージャーを使っている場合はmkcert installation を参考にしてください

今回は, ローカルに mkcertをダウンロードして実行する.

chmod +x mkcert-v1.3.0-darwin-amd64 # macOSは実行権限を与える
./mkcert-v1.3.0-darwin-amd64 -install 
# Passwordを求められるので入力
./mkcert-v1.3.0-darwin-amd64 localhost 127.0.0.1 ::1

実行したディレクトリに証明書と秘密鍵が生成されているはずです

webpack-dev-serverをhttpsモードで起動する

サンプルコードはこちらを利用します:

GitHub - yokotaso/kintone-typescript-sample: TypeScriptをつかったkintoneカスタマイズを行うサンプルコードです

webpack-dev-serverをインストールしていない場合はまずこちらを実行します:

npm i -D webpack-dev-server # インストールしていない場合はインストール

実験として、証明書を使わずにhttpsモードだけで起動してみます.

npx webpack-dev-server --https true --mode development

webpack.config.jsのエントリーポイントからURLが決まります

• webpack.config.jsのentryに指定したentryの[プロパティ名].jsで出力されます.
• webpack.config.jsのentryにファイルを直接指定している場合はmain.jsで出力されます.

今回のサンプルコードは https://localhost:8080/kintone-typescript-sample.js になります.

アクセスするとブラウザから警告がでてしまいます.

次に証明書を使ってwebpack-dev-serverを起動します.

mkcertで作成した証明書は/opt/certに配置してあるとします.

npx webpack-dev-server --mode development \
  --https true --key /opt/cert/localhost+2-key.pem \
  --cert /opt/cert/localhost+2.pem

再び https://localhost:8080/kintone-typescript-sample.js にアクセスしてみます. 先ほどの実験のときの警告は消えてビルド済みのJavaScriptが表示されるはずです.

このURLをkintoneカスタマイズに登録するとJavaScriptがリロードするだけでkintoneの開発環境に反映されます.