mkcertを利用してlocalhostに自己著名証明書を設定し、webpackで有効にする方法を紹介します
サーバのSSL設定はレンタルサーバなどにすでに設定されているか、Let's encryptなどを利用して証明書を簡単に設定できます。
はじめにmkcertを利用して、自己著名証明書を発行します。 （macでの作業を前提としています。windowsはすいません…）
** mkcertプラグイン **
https://github.com/FiloSottile/mkcert
インストール方法：
MacBook-Pro ~ % mkcert -install
サイトでは色々なURLやワイルドカード、IPなどを設定していますが、私は localhost のみを設定しました。
MacBook-Pro ~ % mkcert localhost
すると、
が生成されます。同時に、MacBookの ~/Library/Application Suport/mkcert/ に以下のファイルが生成されます。
以上で、mkcertの設定はここまでです。
webpack.config.jsファイルを編集します。設定方法はこちらを参考にしました。
webpack-dev-serverのオプション設定 https://webpack.js.org/configuration/dev-server/#devserverhttps
この中でdevServerオプションに以下のように追加するだけです。
...
devServer: {
https: {
key: fs.readFileSync('./localhost.pem'),
cert: fs.readFileSync('./localhost.pem'),
ca: fs.readFileSync('~/Library/Application Support/mkcert/rootCA.pem')
}
}
...
これでwebpack-dev-serverのサービスを立ち上げると、自動的にhttpがhttpsへリダイレクトするようになります。
設定方法を説明しましたが、実際に導入してみて、色々と問題がありました。
localhostがすべてSSL対応されるので、他のプロジェクトでSSLソケットを使えるようdevServerを設定していないプロジェクトは見れなくなってしまうことにっ。全部のプロジェクトを設定し直さなくちゃいけないです。
また、スマホもSSL対応となるので、ホームネットワーク内でIP指定して検証作業などを行うときもSSL対応がされないので、見れなくなりますっ。
このローカルのSSL問題はかなりネックで、もう止めようかと思ってます。 もしローカルでSSLを設定する利点などありましたら教えてくださいっ