Create React Appで作成したアプリをローカルのMacBook上でHTTPSで動作させる

MacBook上でReactアプリをHTTPSで動作させる必要があり、手順を調べたのでまとめておく。

 

 

[自己署名SSL証明書を作成する]

下記のサイトを参考に、自己署名証明書を作成する。

stackoverflow.com

 

利用している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とする。

subjectAltName = DNS:localhost

 

最後に、これまで作成したファイルを利用して、自己署名証明書を出力する。有効期限はざっくり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などのブラウザでアクセスした際に「この接続ではプライバシーが保護されません」と表示されてしまい、一発でアクセスすることができない。

f:id:kidani_a:20200607162117p:plain

 

MacBook上でこれを回避するには、先ほど作成した自己署名証明書をキーチェーンアクセスに登録して設定を行う必要がある。

 

まずは、server.crtファイルをキーチェーンアクセスで開く。

f:id:kidani_a:20200607162314p:plain

 

左下の「分類」で証明書を選択すると、先ほど作成した自己証明書を確認できる。

f:id:kidani_a:20200607162412p:plain

証明書の詳細を表示し、「信頼」の欄で表示されている「SSL (Secure Sockets Layer)」での利用を「常に信頼」に変更する。

f:id:kidani_a:20200607162720p:plain

ダイアログを閉じようとすると、証明書信頼設定に変更を加えて良いか確認される。Touch IDを利用するかパスワードを入力して、変更を完了する。

f:id:kidani_a:20200607162926p:plain

以上でMacBook自己署名証明書HTTPS通信で利用するための設定が完了した。

 

[HTTPSで起動するための環境変数]

Create React Appで作成したアプリを開発時に、ローカルでHTTPSで動作させる方法は公式サイトに解説があった。

Using HTTPS in Development

 

要点は以下の3つ。

 

環境変数を設定するので、以下のように.envファイルを作成する。

HTTPS=true
SSL_CRT_FILE=./ssl/server.crt
SSL_KEY_FILE=./ssl/server.key

 

この状態で、yarn startコマンドを実行すると、ブラウザが起動し、無事HTTPSで動作したReactアプリにアクセスできる。

f:id:kidani_a:20200607163535p:plain

 

[まとめ]

github.com