以前も同じ内容の記事を書きましたが、auth0のブログにあった方法のほうが便利そうなので、試してみました。
auth0のブログの内容をちょこちょこ翻訳しながら紹介します。
元になったブログ記事はこちら
Why and How to Use HTTPS in Your Local Development Environment
auth0はOAuth・OIDCなどの認証認可基盤とよばれるようなシステムの開発会社です。認証認可(サインインやログインなど)に関するブラウザ等の機能(例:FIDO2認証)にはHTTPSが必要とされることがあり、ローカル開発環境にもHTTPSが必要になのでしょう。
HTTPSに必要な証明書などを作成するツールmkcertをインストールします。
OpenSSLが最もよく知られていて最も強力ですが、公開鍵基盤について充分な知識が必要なため、今回はmkcertを使うとのことです。
mkcertのインストール方法はmkcertのGitHubに記載されているとおりですが、WindowsなのでChocolateyを使います。WSLを使ってLinux版のインストール手順で実行することもできそうですね。
Chocolateyのインストール方法も公式サイトに記載されているとおりで出来ました。
Chocolatey Software | Installing Chocolatey
PowerShellを管理者権限で起動して以下のコマンドを実行
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
完了するまで待ち、完了したら以下のコマンドで確認します。
choco
バージョン情報が帰ってくれば完了です。
改めてmkcertのインストールをします。
choco install mkcert
インストールが完了すると、インストール成功という情報とバージョンの情報が返ってきました。
以下のコマンドを実行します。
mkcert -install
ポップアップ画面で以下の画像のようなセキュリティ警告が表示されました。
どうやら、Firefoxの機能・設定に関する警告(Setting Up Certificate Authorities (CAs) in Firefox | Firefox for Enterprise Help)であり、Firefoxを使わないのであれば無視してよいそうです。
今回は「はい」を選ぶことにしました。
まず、Node.js上に構築するアプリのフォルダを作成します。フォルダ名はブログ記事の内容と同じにしてmy-secure-app
とします。
作成したフォルダ内に入ります。
フォルダ内で以下のコマンドを実行し、localhost
というホスト名に対する証明書(localhost.pem
)と秘密鍵(localhost-key.pem
)を作成します。
mkcert localhost
先のmy-secure-app
フォルダ内にserver.js
というファイルを作成し、以下のコードを書いて保存します。
const https = require('https');
const fs = require('fs');
const options = {
key: fs.readFileSync('localhost-key.pem'),
cert: fs.readFileSync('localhost.pem')
};
https.createServer(options, function (req, res) {
res.writeHead(200);
res.end("I'm HTTPS-enabled!");
}).listen(8080);
console.log("The server is listening to port 8080 with HTTPS enabled.");
my-secure-app
フォルダ内でPowerShellかコマンドプロンプトを立ち上げ、以下のコマンドを入力します。
node server.js
これによってhttps://localhost:8080
でサーバがアクセスを待っています。
実際に上記のURLをChromeに入力すると、「I'm HTTPS-enabled!」というメッセージがブラウザに表示されます。
アドレスを変更してhttp://localhost:8080
にしてHTTPで接続を試みると、「ページは動作していません」というブラウザのエラー画面になります。
また、Firefoxでhttps://localhost:8080
にアクセスを試みると、以下の画像のように警告が表示されます。証明書が無効になっているHTTPSのサイトにアクセスしたときに表示される画面と同じです。
mkcertでローカル認証局を作成したときの警告と関連しており、Firefoxがこの認証局を信頼していないということが原因です。
対策としては、Setting Up Certificate Authorities (CAs) in Firefox | Firefox for Enterprise Helpに記載されている指定のいちにルート証明書を配置することらしい(ちゃんと読んでいない)。
すこし証明書のなかみのを確認
発行先は自分のPCの自分のアカウントで、発行元のは自分のPCの自分のアカウントのmkcertとのこと。
有効期限は2年3ヶ月(27ヶ月)ですね。Let's Encryptoよりも随分長い。こちらのほうが便利かもしれないですね。
詳細もスクショしようと思いましたが消すのめんどくさくなってきたので、文字情報だけで。
今回の方法はmkcertを使うことでlocalhost(127.0.0.1)を27ヶ月間更新する手間なくHTTPS化して開発することができます。また、WSLがなくてもWindows、Linux、Macで実行できます。
以前、書いた記事ではFreenomでドメインを取得して、certbotを使ってLet's Encryptoの証明書を作成し、3ヶ月ごとに更新する必要がありました。
今回の記事のほうが更新頻度も少なくて楽。また、環境を他の開発者に共有したり、配布するときにこちらのほうが良さそう(Dockerで配布とかもできる??)なので、こちらの方法に切り替えていこうかなと思っています。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント