開発者のための証明書作成ツール「mkcert」徹底解説
そこで、今回紹介する新兵器が mkcert だ！
まず、なぜローカル開発でHTTPSが必要なのか、そこから話そう。
本番環境とのギャップをなくす
多くの本番サービスはHTTPSを使っている。ローカル環境も同じHTTPSにすることで、本番との違いによる予期せぬバグを防げる。
セキュリティ関連機能のテスト
Service WorkerやWebAuthnなど、一部のWeb APIはHTTPS環境でないと動かない。これらの機能をテストするためにHTTPSは必須だ。
クロスオリジン通信のデバッグ
HTTPSで動くAPIに、HTTPのフロントエンドからアクセスしようとすると、ブラウザにブロックされることがある。開発段階からHTTPSで統一しておけば、この手の問題に悩まされない。
mkcert は、このローカルHTTPS環境を、めちゃくちゃ簡単に 作ってくれるツールだ。通常、証明書を作るには、難解なコマンドをたくさん打ったり、設定ファイルをいじったりする必要がある。しかし、mkcertなら、たった数個のコマンドで、ブラウザが信頼してくれる証明書を作ることができる。
よし、早速導入して作戦を開始しよう。各OSによって少し手順が違うから、自分のOSに合った方法で進めてくれ。
Chocolatey を使う
choco install mkcert
Scoop を使う
scoop install mkcert
手動でインストール
mkcertのGitHubリリースページ から、mkcert-vX.X.X-windows-amd64.exe のような最新の実行ファイルをダウンロードする。
ダウンロードしたファイル名を mkcert.exe に変更し、PATHが通っているディレクトリ（例
C:\Windows\System32）に置く。
Homebrew を使う
brew install mkcert
brew install nss # Firefoxを使う場合のみ
MacPorts を使う
sudo port install mkcert
Linuxbrew/Homebrew を使う
brew install mkcert
Snap を使う
sudo snap install mkcert
注意：Snapでインストールした場合、証明書の保存場所が他の方法と異なる場合がある。
インストールが完了したら、いよいよ証明書を作っていく。
CA（認証局）のインストール
まず、ローカル用の認証局をインストールして、ブラウザに「信頼できるやつだぞ」と教えてやる必要がある。
mkcert -install
このコマンドを一度実行すればOKだ。この認証局が、今後作る全ての証明書を「信頼済み」にしてくれる。 注：このコマンドは管理者権限を要求されることがある。
証明書の作成
次に、開発中のアプリで使う証明書を作る。例えば、localhost と myapp.test というドメインで使いたい場合、以下のコマンドを打つ。
mkcert localhost myapp.test
このコマンドを実行すると、カレントディレクトリに localhost+1.pem と localhost+1-key.pem という2つのファイルが生成される。これらが、君のアプリが使う証明書と秘密鍵だ。
最後に、この証明書を実際にどう使うか、Node.jsのExpressフレームワークを例に見てみよう。
const express = require('express');
const https = require('https');
const fs = require('fs');
const app = express();
const port = 3000;
// 証明書ファイルを読み込む
const privateKey = fs.readFileSync('localhost+1-key.pem', 'utf8');
const certificate = fs.readFileSync('localhost+1.pem', 'utf8');
const credentials = { key: privateKey, cert: certificate };
// HTTPSサーバーを立てる
const httpsServer = https.createServer(credentials, app);
app.get('/', (req, res) => {
res.send('Hello HTTPS!');
});
httpsServer.listen(port, () => {
console.log(`HTTPS Server is running on https://localhost:${port}`);
});
このコードを実行したら、ブラウザで https://localhost:3000 にアクセスしてみてくれ。ブラウザが「このサイトは安全ではありません」という警告を出すことなく、正常に表示されるはずだ。
