🌐

webpack-dev-serverでhttpsを利用する

1 min read

自身の端末を認証局に見立てて、オレオレ証明書をローカルサーバー(webpack-dev-server)に配置する。

完成形のプロジェクト

https://github.com/asano-yuki/webpack-dev-server-https

1. バージョン情報

$ node -v
v14.16.0
$ yarn -v
1.22.10
$ openssl version
LibreSSL 2.8.3

2. 自己署名証明書を作成

秘密鍵の生成(server.key)。

./private/server.key
$ openssl genrsa -out server.key 2048

証明書の生成(server.csr)

CN(Common Name)はlocalhostを設定すること。

./private/server.csr
$ openssl req -sha256 -new -key server.key -out server.csr -subj '/CN=localhost'

別名(SAN)の設定を行うためのファイルを作成。ファイルの名前はsan.configとする。

./private/san.config
subjectAltName = DNS:localhost

上記ファイルを利用して、証明書を生成。

./private/server.crt
$ openssl x509 -req -sha256 -days 36500 -in server.csr -signkey server.key -out server.crt -extfile san.config

3. webpack.config.jsの設定

必要な部分のみ抜粋。

./webpack.config.js
module.exports = {
  ...,
  devServer: {
    https: {
      key: '秘密鍵のパス(./private/server.key)',
      cert: '証明書のパス(./private/server.crt)',
    },
    ...,
  },
}

4. 自身の端末で自己署名証明書を信頼する

Macであればキーチェーンアクセスに登録して設定する。
詳細な設定方法はCreate React Appで作成したアプリをローカルのMacBook上でHTTPSで動作させるを参照。

Discussion

ログインするとコメントできます