mkcertというライブラリを使うとローカル環境でもHTTPS通信ができます。今回はmkcertを利用したローカル環境のSSL化手順について紹介します。なお、開発環境はMacです。
mkcertのインストール
mkcertをインストールします。
$ brew install mkcert
Firefoxを利用する場合はnssのインストールも行います。
$ brew install nss
mkcertを利用してローカル認証局を作成する
認証局とは証明書をもとにシステムや利用者が正しいことを確認する機関のことをいい、Certification Authorityの頭文字をとってCAと呼ばれています。
ローカルでHTTPS通信を実現するにはローカル環境に認証局を作成する必要があります。ローカル環境の認証局はローカル認証局やプライベート認証局と呼ばれています。
ローカル認証局の作成（インストール）は以下のコマンドで実行します。
$ mkcert -install
mkcert -CAROOTで表示されたディレクトリに秘密鍵と証明書が存在していればOKです。
$ mkcert -CAROOT
/Users/nishina/Library/Application Support/mkcert
### 秘密鍵とルート証明書が保存されていればOK
$ ls /Users/nishina/Library/ApplicationSupport/mkcert
rootCA-key.pem rootCA.pem
mkcertによって署名された証明書と秘密鍵の生成
ここまでで、任意のドメインでHTTPS通信するために必要な証明書と秘密鍵をmkcertで生成する準備が整いました。
証明書と秘密鍵の発行はmkcert 対象のドメインで行います。具体例は以下の通りです。
### localhostに対する証明書を発行
$ mkcert localhost
### mysite.exampleに対する証明書を発行
$ mkcert mysite.example
### 『example.com』と『*.example.com』に対する証明書を発行
$ mkcert example.com "*.example.com"
### 証明書を『foo.pem』、秘密鍵を『bar-key.pem』という名前で発行
$ mkcert -cert-file foo.pem -key-file bar-key.pem localhost
mkcertコマンドのオプションの詳細は公式ドキュメントをご覧ください。
動作確認
mkcertで証明書を発行してhttps接続できるか確認します。サーバはhttp-serverで用意します。
### http-serverをbrewでインストール
$ brew install http-server
### 証明書と秘密鍵を作成する
$ mkcert -cert-file local.pem -key-file local-key.pem localhost
Created a new certificate valid for the following names 📜
- "localhost"
The certificate is at "local.pem" and the key at "local-key.pem" ✅
It will expire on 15 May 2024 🗓
### 証明書と秘密鍵を指定し、TLS/SSL (HTTPS)を有効にして起動
$ http-server -S -C local.pem -K local-key.pem
Starting up http-server, serving ./ through https
http-server version: 14.1.0
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:8081
https://192.168.162.35:8081
Hit CTRL-C to stop the server
上記実行後、https://localhost:8081で接続できればOKです。curlの結果は以下の通りです。
### 『200 OK』のレスポンスが返ってくればOK
$ curl -I https://localhost:8081
HTTP/1.1 200 OK
accept-ranges: bytes
Content-Type: text/html
etag: W/"135023774-192-2022-02-14T22:14:17.770Z"
last-modified: Mon, 14 Feb 2022 22:14:17 GMT
cache-control: max-age=3600
Date: Mon, 14 Feb 2022 22:15:28 GMT
Connection: keep-alive
Keep-Alive: timeout=5
さいごに
Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！
