環境
・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アプリのルートディレクトリに配置してください。
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で起動することが可能になります。