MacBook上でReactアプリをHTTPSで動作させる必要があり、手順を調べたのでまとめておく。
[自己署名SSL証明書を作成する]
下記のサイトを参考に、自己署名証明書を作成する。
利用しているopensslのバージョンは以下の通り。
$ openssl version
LibreSSL 2.8.3
まずはじめに、以下のコマンドで秘密鍵を作成する。
$ openssl genrsa -out server.key 2048
Generating RSA private key, 2048 bit long modulus
.........................................................................................+++
.......................................................+++
e is 65537 (0x10001)
つぎに、証明書署名要求(CSR)ファイルを作成する。ローカルで動作させるReactアプリで利用するので、CN(Common Name)をlocalhostに設定し、あとは適当に設定する。
openssl req -sha256 -new -key server.key -out server.csr -subj '/CN=localhost/O=kdnakt.com/C=jp'
つぎに、以下の内容で、サブジェクト別名(SAN)の設定を行うためのファイルを作成しておく。ファイルの名前はsan.config
とする。
最後に、これまで作成したファイルを利用して、自己署名証明書を出力する。有効期限はざっくり100年に設定する(うるう年があるので100年は使えないが)。
openssl x509 -req -sha256 -days 36500 -in server.csr -signkey server.key -out server.crt -extfile san.config
[自己署名SSL証明書をMacBookで信頼する]
これでserver.crtファイルを得ることができた。これを利用すればReactアプリをHTTPSで起動することができるが、このままではChromeなどのブラウザでアクセスした際に「この接続ではプライバシーが保護されません」と表示されてしまい、一発でアクセスすることができない。
MacBook上でこれを回避するには、先ほど作成した自己署名証明書をキーチェーンアクセスに登録して設定を行う必要がある。
まずは、server.crtファイルをキーチェーンアクセスで開く。
左下の「分類」で証明書を選択すると、先ほど作成した自己証明書を確認できる。
証明書の詳細を表示し、「信頼」の欄で表示されている「SSL (Secure Sockets Layer)」での利用を「常に信頼」に変更する。
ダイアログを閉じようとすると、証明書信頼設定に変更を加えて良いか確認される。Touch IDを利用するかパスワードを入力して、変更を完了する。
以上でMacBookで自己署名証明書をHTTPS通信で利用するための設定が完了した。
[HTTPSで起動するための環境変数]
Create React Appで作成したアプリを開発時に、ローカルでHTTPSで動作させる方法は公式サイトに解説があった。
要点は以下の3つ。
環境変数を設定するので、以下のように.env
ファイルを作成する。
HTTPS=true
SSL_CRT_FILE=./ssl/server.crt
SSL_KEY_FILE=./ssl/server.key
この状態で、yarn startコマンドを実行すると、ブラウザが起動し、無事HTTPSで動作したReactアプリにアクセスできる。