Zenn
😊

「How to use HTTPS for local development」をためす

2021/08/21に公開
https
#
mkcert
tech

はじめに

「How to use HTTPS for local development」に記載のmkcertを利用する方法で証明書エラーの出ないローカルにHTTPSサーバーを起動します。ローカルでHTTPSサーバーを起動する方法として、自己署名の証明書を利用する方法がありますが、今回の方法はアクセスした際にブラウザに証明書エラーを表示させなくて済むという違いがあります。

https://web.dev/how-to-use-local-https/

mkcertのインストール (初回のみ)

mkcertをインストールします。macOSを利用している場合は以下のコマンドでインストールできます。その他のOSについては、mkcertの公式ページをご覧ください。

$ brew install mkcert
$ brew install nss # Firefoxを利用する場合

Local Root CAにmkcertの追加

以下のコマンドを実行します。

$ mkcert -install
Created a new local CA 💥
Sudo password:
The local CA is now installed in the system trust store! ⚡️
Warning: "certutil" is not available, so the CA can't be automatically installed in Firefox! ⚠️
Install "certutil" with "brew install nss" and re-run "mkcert -install" 👈

これにより、ローカルCAが生成されます。mkcertにより生成されたローカルCAは、あなたのローカルのデバイス上においてのみ信頼されます。

mkcertによって署名された証明書の生成

証明書を配置するディレクトリに移動し、以下のコマンドを実行します。

$ mkcert localhost
Note: the local CA is not installed in the Firefox trust store.
Run "mkcert -install" for certificates to be trusted automatically ⚠️

Created a new certificate valid for the following names 📜
 - "localhost"

The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅

It will expire on 21 November 2023 🗓

上記のコマンドは以下の2つの処理を実行しています。

  • 指定したホスト名 (localhost) の証明書の生成
  • ローカルCAとして追加mkcertによる証明書への署名
    もしlocalhost以外のドメインの証明書を生成したい場合は、mkcert mysite.exampleのように実行します。
    コマンドが正常に実行されるとディレクトリに証明書と秘密鍵が生成されていることが確認できます。
$ ls
localhost-key.pem localhost.pem

動作確認

最後に生成した証明書を利用してHTTPSサーバーを起動します。
証明書や鍵の指定方法は利用予定のサーバーに合わせて適宜指定してください。
今回はあくまで動作確認を目的として、手軽に起動できるコマンドラインツールであるhttp-serverを利用した方法で確認します。
まず、以下のコマンドを実行してhttp-serverををインストールします。Homebrewによるインストールもできるようなので詳しいインストール方法については公式ページををご覧ください。

$ npm install --global http-server

以下の通りオプションで証明書と秘密鍵を指定してサーバーを起動します。

$ http-server -S -C localhost.pem -K localhost-key.pem
Starting up http-server, serving ./ through https

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  https://127.0.0.1:8080
  https://192.168.138.1:8080
  https://172.16.219.1:8080
  https://192.168.3.4:8080
Hit CTRL-C to stop the server

サーバーが起動しているhttps://localhost:8080にアクセスすると、証明書エラーが出ずにアクセスすることができました。

おわりに

今回はmkcertを利用した証明書の生成を試してみました。
ローカルで動作確認をする際、証明書エラーを出してくない場合に便利かもしれません。
本記事はあくまで試してみた系の記事ですので、細かい仕組みなどは元の記事から確認いただくようお願いいたします。
https://web.dev/how-to-use-local-https/

参考

GitHubで編集を提案

Discussion