📶

iOSシミュレータで自己署名証明書を使いローカル開発用HTTPS環境を構築する

に公開
iOS
nginx
Dockerfile
TLS
tech

iOSシミュレータで自己署名証明書を使いローカル開発用HTTPS環境を構築する手順

ローカル環境で開発しているWebサーバーにiOSシミュレータからHTTPSでアクセスしたい、そんな場面はありませんか？例えば、HTTPSが必須となるAPIの動作確認や、PWAの挙動を確かめたい場合などです。

この記事では、macOS上でmkcertという便利なツールを使ってプライベート認証局（CA）を構築し、そのCAによって署名されたサーバー証明書をiOSシミュレータとローカルサーバーに設定する手順を解説します。

なぜ自己署名証明書が必要なのか？

通常、ブラウザは信頼された第三者認証局（CA）によって発行されたSSL/TLS証明書でないと警告を表示します。ローカル開発環境では、この「信頼された」証明書を簡単に用意することが難しいため、自身で認証局を立て（プライベートCA）、そのCAによって署名された証明書（自己署名証明書）を利用することで、この問題を解決します。

やることの概要

mkcertのインストール: ローカル認証局の作成と証明書発行を簡単に行うためのツールをインストールします。

プライベート認証局（CA）の作成とシステムへの登録: mkcertを使って、ローカルマシンを信頼する認証局として設定します。

サーバー証明書の作成: 作成したCAによって署名された、ローカルサーバー用の証明書を発行します。

iOSシミュレータへのルートCA証明書のインストールと信頼設定: iOSシミュレータがプライベートCAを信頼するように設定します。

ローカルサーバーへの証明書設定: 開発用サーバー（例: Nginx）にサーバー証明書と秘密鍵を設定します。

手順

  1. mkcertのインストール
    まだmkcertをインストールしていない場合は、Homebrewを使ってインストールします。
brew install mkcert

mkcertを使うと、ローカルの信頼された認証局（CA）を自動で作成・インストールし、そのCAによって署名された証明書を簡単に発行できます。これにより、ブラウザやOS、そしてiOSシミュレーターからも「信頼されていない証明書」として警告されることなくHTTPS接続が可能になります。

2. プライベート認証局（CA）の作成とシステムへのインストール

次に、ローカル認証局を作成し、macOSのシステムトラストストアにインストールします。これにより、このCAが発行する証明書が自動的に信頼されるようになります。

mkcert -install

このコマンドを実行すると、ルートCA証明書 (rootCA.pem) とその秘密鍵 (rootCA-key.pem) がローカルの特定のディレクトリ（通常は $(mkcert -CAROOT) で確認できる場所）に作成され、OSのキーチェーンなどにも登録されます。

3. サーバー証明書の作成

次に、ローカルサーバーで使用するドメイン名（例: local.example.com や localhost）を指定して、サーバー証明書と秘密鍵を作成します。ここでは例として local.example.com と localhost の両方でアクセスできる証明書を作成します。

mkcert local.example.com localhost 127.0.0.1 ::1

これにより、カレントディレクトリに以下のファイルが作成されます。

local.example.com.pem: サーバー証明書

local.example.com-key.pem: サーバー証明書の秘密鍵

ファイル名は指定したドメイン名によって変わります。

4. iOSシミュレータへのルートCA証明書のインストールと信頼設定

mkcert -install を実行すると、多くの場合、自動的にiOSシミュレーターにもルートCAがインストールされるよう試みます。しかし、環境によっては手動での対応が必要になることがあります。

4-1. ルートCA証明書の場所を確認

まず、mkcertが作成したルートCA証明書 (rootCA.pem) の場所を確認します。

open "$(mkcert -CAROOT)"

このコマンドを実行すると、FinderでルートCA証明書が格納されているフォルダが開きます。

4-2. iOSシミュレータへのドラッグ＆ドロップ

開いたFinderウィンドウから rootCA.pem ファイルを、起動しているiOSシミュレータの画面上にドラッグ＆ドロップします。

すると、iOSシミュレータ側でプロファイルのインストールを求めるダイアログが表示されるので、指示に従ってインストールします。

4-3. 証明書の信頼設定

証明書をインストールしただけではまだ不十分で、iOSシミュレータにその証明書を信頼するよう設定する必要があります。

iOSシミュレータで「設定 (Settings)」アプリを開きます。

「一般 (General)」 > 「情報 (About)」 (または「VPNとデバイス管理」など、iOSのバージョンによって項目名が若干異なる場合があります) を選択します。

一番下にある「証明書信頼設定 (Certificate Trust Settings)」を選択します。

ここに、先ほどインストールした mkcert のルートCA（例: mkcert yourname@yourmacbook.local のような名前）が表示されているはずです。このスイッチをオンにします。

これで、iOSシミュレータがあなたのプライベートCAを信頼するようになりました。

5. ローカルサーバーへの証明書設定

次に、ステップ3で作成したサーバー証明書 (local.example.com+3.pem) と秘密鍵 (local.example.com+3-key.pem) をローカルの開発サーバーに設定します。

ここではNginxを例に説明しますが、お使いのサーバーに合わせて設定してください。

Nginxの場合:

例えば、証明書ファイルを /etc/local/nginx/certs/ ディレクトリに配置する場合：

証明書と秘密鍵を適切な場所にコピーまたは移動します。

sudo mkdir -p /etc/local/nginx/certs/
sudo cp local.example.com.pem /etc/local/nginx/certs/server.crt
sudo cp local.example.com-key.pem /etc/local/nginx/certs/server.key

(ファイル名はサーバー設定に合わせて変更してください)

Nginxの設定ファイル (nginx.conf やサイト別の設定ファイル) を編集します。

server {
listen 443 ssl;
server_name local.example.com localhost;

ssl_certificate /etc/local/nginx/certs/server.crt;       # サーバー証明書のパス
ssl_certificate_key /etc/local/nginx/certs/server.key;  # 秘密鍵のパス

# ...その他の設定...

location / {
    proxy_pass http://localhost:3000; # 例: ローカルで動いているアプリ
}

}

Docker Compose (Nginx) の場合:

docker-compose.yml でvolumesを指定して、コンテナ内に証明書をマウントすることもできます。

version: '3.8'
services:
nginx:
image: nginx:latest
ports:
- "80:80"
- "443:443"
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf:ro
- ./local.example.com.pem:/etc/nginx/certs/server.crt:ro # ホストの証明書パス:コンテナ内のパス
- ./local.example.com-key.pem:/etc/nginx/certs/server.key:ro # ホストの秘密鍵パス:コンテナ内のパス
# ...

上記はあくまで一例です。ご利用の環境に合わせてパスや設定を調整してください。設定変更後はNginxを再起動またはリロードします。

6. 動作確認

いよいよiOSシミュレータのSafariから、設定したローカルサーバーのドメイン（例: https://local.example.com や https://localhost）にアクセスしてみましょう。

これで、ローカルサーバー上のWebページがHTTPSで表示されれば成功です！一度アクセスできれば、次回以降は警告なしで表示されるはずです。

まとめ

mkcert を利用することで、比較的簡単にiOSシミュレータからローカル開発サーバーへHTTPS接続する環境を構築できました。手順をまとめると以下の通りです。

  1. brew install mkcert で mkcert をインストール。

  2. mkcert -install でプライベートCAを作成し、システムに登録。

  3. mkcert local.example.com localhost などでサーバー証明書を作成。

  4. $(mkcert -CAROOT) で rootCA.pem を探し、iOSシミュレータにドラッグ＆ドロップしてインストール。

  5. iOSシミュレータの「設定」 > 「一般」 > 「情報」 > 「証明書信頼設定」で該当CAをオンにする。

  6. 作成したサーバー証明書と秘密鍵をローカルサーバーに設定する。

これで、より本番環境に近い形でiOSシミュレータでの開発・検証が進められるようになります。

補足: mkcert -CAROOT について

mkcert -CAROOT コマンドは、mkcertがルートCA証明書やその他の関連ファイルを保存しているディレクトリのパスを表示します。このディレクトリの中身を直接編集することは通常推奨されませんが、rootCA.pem の場所を確認する際には便利です。

Discussion