ローカル HTTPS 開発への対応

> 本記事は元々 [blog.logto.io](https://blog.logto.io/ja/local-https) に掲載されたものです。

ウェブアプリケーションを開発する際、特定のシナリオではローカル環境でも 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 トンネルを試す

以前 [この記事](https://blog.logto.io/painless-local-debugging) で紹介しましたが、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](https://github.com/FiloSottile/mkcert) は、任意の名前でローカルに信頼された開発証明書を簡単に構成なしで作成するためのツールです。

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

```bash
brew install mkcert
```

Windows や Linux の場合は、[このリンク](https://github.com/FiloSottile/mkcert?tab=readme-ov-file#installation) を確認してください。

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

```bash
mkcert -install
```

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

```bash
mkcert example.com
```

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

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

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

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

```javascript
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://docs.logto.io/docs/references/core/configuration/#enabling-https) を参照してください。

## まとめ

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