##はじめに
先日Zennに以下の記事を投稿しました。

クレジットカードの読み取り機能を使用する為には、ローカル環境にhttps接続する必要があり、ngrokというライブラリを使用して、https接続を実現しました。
このZennの記事で、ngrokの使用について以下のコメントを頂きました。(ありがとうございます！)

ローカル環境でSSL使う場合mkcertを使う方が安全かもしれません。
情報はググれば結構出てくると思います。

なので、mkcertでhttps接続をやってみようと思いこの記事を書きました！

##環境

macOs Catalina バージョン 10.15.7
iOS 14.4.2

※サンプルのアプリケーションはAngularを使用したアプリケーションです。

##やっていく

やる事は主に以下になります。
・mkcertのインストール
・ローカル認証局（CA）のインストール
・証明書と秘密鍵を作成
・トラストストアにローカル認証局（CA）をインストール
・"ng serve"を使用してHTTPS経由でAngularアプリケーションを起動
・iPhoneのSafariからHTTPS接続

○mkcertのインストール
Homebrewを使ってインストールします。

$ brew install mkcert

インストールが出来ているか確認。

$ mkcert --version
v1.4.3

○ローカル認証局（CA）のインストール

# ローカル認証局用ののディレクトリを作成  ※作成は必須ではありません。
$ cd
$ mkdir mkcert
$ cd mkcert

# ローカル認証局のインストール
$ mkcert install
Created a new local CA 💥
Note: the local CA is not installed in the system trust store.
Run "mkcert -install" for certificates to be trusted automatically ⚠️

Created a new certificate valid for the following names 📜
 - "install"

The certificate is at "./install.pem" and the key at "./install-key.pem" ✅

It will expire on 8 August 2023 🗓

○証明書と秘密鍵を作成

# ※証明書, 秘密鍵用のディレクトリを作成　 ※作成は必須ではありません。
$ mkdir mkcert/ssl
$ cd mkcert/ssl

#　証明書と秘密鍵を作成 
$ mkcert localhost 192.168.0.7 127.0.0.1  #localhost 現在のIPアドレス ループバックアドレスを指定

Note: the local CA is not installed in the system trust store.
Run "mkcert -install" for certificates to be trusted automatically ⚠️

Created a new certificate valid for the following names 📜
 - "localhost"
 - "192.168.0.7"
 - "127.0.0.1"

The certificate is at "./localhost+2.pem" and the key at "./localhost+2-key.pem" ✅

It will expire on 8 August 2023 🗓

※ここでIPアドレスを間違えて指定していた為、接続できず無駄な時間を過ごしました。
間違えていた場合、作成した証明書と秘密鍵を削除して、再度作成したら問題なく動作しました。

○トラストストアにローカル認証局（CA）をインストール

$ mkcert -install
Sudo password: #macのパスワードを入力
The local CA is now installed in the system trust store! ⚡️

○"ng serve"を使用してHTTPS経由でAngularアプリケーションを起動

以下のコマンドを実行してアプリケーションを起動します。

$ ng serve --host 0.0.0.0 --ssl true --ssl-key ~/mkcert/ssl/localhost+2-key.pem --ssl-cert ~/mkcert/ssl/localhost+2.pem

--host はiPhoneから接続する為、全てのIPアドレスからの接続を許可します。
--ssl はHTTPSでサービスを提供する場合にtrueを指定します。
--ssl-key はHTTPSでのサービスに使用する秘密鍵を指定します。(秘密鍵までのパスで指定)
--ssl-cert はHTTPSでのサービスに使用するSSL証明書を指定します。(証明書までのパスで指定)

https://localhost:4200/でアクセスしたら、下記画像のようにとりあえずPCからのHTTPS接続は上手く出来ました。続いてiPhoneからHTTPS接続をします。

**○iPhoneのSafariからHTTPS接続する。**

iPhoneからHTTPS接続する為には、以下の2つの作業が必要になります。
・ルート証明書をiPhoneにインストールする。
・iPhoneでルート証明書を信頼する。

・ルート証明書をiPhoneにインストールする。
Macのキーチェーンアクセスで[システム]を開く。
今回作成した証明書があるので、右クリックしてフォーマット「pem」を選択して、保存する。 (どのフォーマットでも問題ないみたいです。)
保存したファイルをメールに添付するなり、Airdropで送るなりして、iPhoneに送信します。
iphoneでダウンロードが出来たら、[設定]→ [プロファイルがダウンロード済み]を選択。
↓
下記画像のように、ダウンロード済のルート証明書が表示されるはずです。

右上のインストールをクリック。
↓

右上のインストールをクリック。
↓

インストールが完了しました。続いて、iPhoneでルート証明書を信頼する作業を行います。

**・iPhoneでルート証明書を信頼する。** [設定] → [一般] → [情報] → [証明書信頼設定] → ルート証明書を全面的に信頼するの項目で、インストールした証明書をONにします。

[設定] → [プロファイル]でインストールしたプロファイルを選択するとルート証明書を確認できます。

この状態で、iPhoneのsafariを開いて、https://192.168.0.7:4200/にアクセスします。

iPhoneのsafariからアクセスできました！

##まとめ
ngrokを使用した方が簡単にhttps接続が可能ですが、証明書は使わず、外部のどこからでもアクセスできてしまう為、セキュリティー的に安全ではないです。
少し手間ですが、証明書を使用したmkcertの方が安全なのでローカル環境にhttps接続する際はmkcertの使用を推奨します！

##参考

○mkcertについて

○iPhoneの証明書の設定について

○ng serve オプションについて