local環境でReactをhttpsで立てる(WSL)

はじめに

wslのlocal環境でreactをhttpsで立てる際、少し特殊な設定が必要だったので備忘録として作業手順を残しておきます。

SSL証明書の発行まで

こちらの記事を参考に作業を進めます。(ルート証明書のインストールまで)
https://qiita.com/recordare/items/d51f50dc634187e20538

httpsでReactを立ち上げる

mkcert -CAROOTに移動し、mkcert localhostを実行する

次にReactのプロジェクトディレクトリに移動して、以下のコマンドを実行
HTTPS=true SSL_CRT_FILE=$(mkcert -CAROOT)/localhost.pem SSL_KEY_FILE=$(mkcert -CAROOT)/localhost-key.pem npm start

(公式: https://create-react-app.dev/docs/using-https-in-development/)

これで警告なくhttpsでlocalhost:3000にアクセスできる！！