ローカル HTTPS 開発への対応

本記事は元々 blog.logto.io に掲載されたものです。

ウェブアプリケーションを開発する際、特定のシナリオではローカル環境でも HTTPS が必要です。セキュアなサードパーティ API の統合、サービスワーカーや HTTP/2 のような HTTPS のみの機能のテスト、またはシームレスなデプロイを保証するために本番環境を再現するなど、HTTPS が重要になります。また、ジオロケーション、プッシュ通知、クレデンシャル管理など、特定のブラウザ API は、効果的に動作するためにセキュアなコンテキストが必要です。

例えば、Logto OSS は localhost を除いてデフォルトで HTTPS を要求します。このような場合、ローカル開発用の HTTPS の設定について学ぶと時間を節約できます。この記事では、ローカル開発用の HTTPS のセットアップを案内し、プロセスを簡素化するための Mkcert などのツールを紹介します。

localhost と HTTPS のみの機能の役割

localhost は、サービスワーカー、セキュアクッキー、HTTP/2 などの多くの HTTPS のみの機能を処理できる特別なドメインです。他のブラウザ API も http://localhost:xxxx でうまく動作しますので、必ずしもローカル HTTPS が必要ではないかもしれません。まず localhost を試してください。

Cloudflare トンネルを試す

以前 この記事 で紹介しましたが、Cloudflare トンネルは、HTTP が準備された状態でローカルサービスを簡単にインターネットに公開できます。

ローカル HTTPS の設定

上記の 2 つのオプションで問題が解決しない場合、ローカル HTTPS を設定しましょう。以下のステップでは、ローカルドメイン名を example.com と仮定します。

ステップ 1: hosts ファイルを更新する

始める前に、ターゲットドメインがあなたのローカルマシンに解決するようにしてください。これは hosts ファイルを更新することで行えます。Linux/macOS の場合は /etc/hosts、Windows の場合は C:\Windows\System32\drivers\etc\hosts を開いて、以下の行を追加します:

127.0.0.1 example.com

ステップ 2: 証明書を生成する

HTTPS の最初のステップは証明書です。本番環境では、"Let's encrypt" などのツールを使って行うか、サービスプロバイダから証明書を購入します。しかし、ローカル開発では、証明書を直接生成できます。

Mkcert は、任意の名前でローカルに信頼された開発証明書を簡単に構成なしで作成するためのツールです。

まず、公式ガイドに従って mkcert をインストールしてください。macOS を使用していると仮定します:

brew install mkcert

Windows や Linux の場合は、このリンク を確認してください。

mkcert が使用可能になったら、以下のコマンドを実行してローカル CA を生成し、ルート証明書をあなたのシステムトラストストアに保存します。"CA" と証明書についてもっと知りたい場合は、Cloudflare の ドキュメント を参照してください。

mkcert -install

次に、ローカル SSL 証明書を生成します。

mkcert example.com

この操作により、example.com.pem と example.com-key.pem ファイルがディレクトリに作成されます。

ステップ 3: アプリに HTTPS を設定する

証明書ファイルが準備できたら、アプリに HTTPS を有効にできます。本番環境とは異なり、逆プロキシのように Nginx が HTTPS を処理するのではなく、ローカル開発ではウェブアプリケーション内で直接設定できます。Express を例にとってみましょう。

以下のコードで簡単な Express サーバーを作成します:

const fs = require('fs');
const https = require('https');
const express = require('express');

const app = express();

// Load the HTTPS certificate and key
const options = {
  key: fs.readFileSync('example.com-key.pem'),
  cert: fs.readFileSync('example.com.pem'),
};

app.get('/', (req, res) => {
  res.send('Hello, secure world!');
});

// Start HTTPS server
https.createServer(options, app).listen(443);

アプリケーションを実行し、https://example.com を訪れてセキュアな Express アプリを確認してください。

Logto OSS のための HTTPS 有効化

Logto OSS はデフォルトで HTTPS を要求しますが、localhost は例外です。他のドメインで Logto をローカルに実行したい場合は、ローカル HTTPS を設定する必要があります。

1. Logto のセットアップ: ローカルマシンで Logto をセットアップする手順については、こちらのリンクを参照してください: https://docs.logto.io/docs/get-started/。
2. 証明書の準備: mkcert を使用して 2 つの .pem ファイルを生成し、それらをディレクトリに配置します。
3. 環境変数の設定: Node を介して HTTPS を有効にするために、HTTPS_CERT_PATH と HTTPS_KEY_PATH の両方を指定してください。詳しくは、こちらのリンク を参照してください。

まとめ

ローカル開発のための HTTPS の設定は、それほど複雑ではありません。Mkcert のようなツールを利用することで、信頼できるローカル証明書の生成が迅速かつ簡単なプロセスになります。localhost は多くの HTTPS のみの機能を処理することができますが、完全な HTTPS サポートが必要なときがあり、このガイドが役立ちます。API のテスト、Logto OSS での作業、または単に本番環境を再現する条件を求めている場合でも、これらのステップに従うことで、セキュアでシームレスな開発の準備が整います。