環境

・Windows11
・React 18.0.2

最初の壁

このエラーが最初に出た時、

$ openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout localhost.key -out localhost.crt -subj "/CN=localhost"

とコマンドを打って自己署名証明書を作成し、windows＋Rでmmcと入れて証明書スナップインを開き、信頼されたルート機関証明書に証明書をインポートして更にPCを再起動してもどうしても接続はプライベートではありませんの警告が消えず、うまくいきませんでした。

次の壁

Let's encryptなどの認証局から無料でルート証明書をダウンロードしようとしましたが、それは本番環境でやることであり、開発環境では自己署名証明書をインポートするものだと知り振り出しに戻ります。

解決策

１．まず、どこのディレクトリでもいいので

$ openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout localhost.key -out localhost.crt -subj "/CN=localhost"

と打って自己署名証明書を作成します。

２．Windowsの場合、chocolatelyをインストールします。
この時、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'))

３．chocolatelyでmkcertをインストールします。

$ choco install mkcert

４．mkcertのインストール後、次のコマンドでlocalhost用の証明書を生成できます。

$ mkcert -install
$ mkcert localhost 127.0.0.1 ::1

５．生成した証明書と秘密鍵を使用して、ローカルの開発サーバーにHTTPSを設定します。例えば、Node.jsのExpressサーバーを使用している場合は、次のようにHTTPSサーバーを設定できます。
app.jsはReactアプリのルートディレクトリに配置してください。

app.js

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

const options = {
  key: fs.readFileSync('./localhost.key'),
  cert: fs.readFileSync('./localhost.crt')
};

https.createServer(options, app).listen(3000, function () {
  console.log('HTTPS server listening on port 3000');
});

最初に作成した自己署名証明書をコピーして、フロントエンド側のルートディレクトリに置くとコードのままのパスで自己署名証明書が読み込まれます。
この方法により、https://localhost:3000でローカルのHTTPSサーバーにアクセスできるようになります。localhostの後の数字は適宜自分の環境に合わせて変更してください。

６．その後、npm startすると自己署名証明書のインポートウィザードが開くので、信頼された機関ルート証明書に自己署名証明書をインポートすれば、完了です。

感想

何度やっても最初はうまくいかなかったのですが、この方法でやっとhttpsにアクセスすることができました。みなさんも開発環境でSSL認証したいときは、この解決策を試してみてください。

追加情報

Reactのアプリでは、最初はhttpsではなくhttpで起動されますが、ルートディレクトリに.envファイルを作ってhttps=trueと記載することでhttpsで起動することが可能になります。