localhostでHTTPSを使用する

2021-12-04  /  開発環境

開発用の Mac で localhost に対して HTTPS で接続したかったので設定を行いました。

mkcert を使用する

自己証明書を使う機会があまりないので知らなかったのですが、 mkcert というツールを使用すると簡単でした。

  1. 自己認証局の作成
  2. 自己証明書の作成

を簡単に行うことができます。

参考:

証明書の作成手順

mkcert のインストールは Homebrew で行えます。

brew install mkcert

自己認証局の作成は以下です。Keychain に保存する必要があるため sudo のパスワードを聞かれます。

mkcert -install

認証局が作成されたパスは以下で取得できます。

mkcert -CAROOT

iPhone などからアクセスする場合にはこちらにあるファイルをダウンロードさせる必要があります。

自己証明書の作成は以下のように実行します。アクセスしたいホスト名や IP を列挙します。

mkcert localhost hoge.local 192.168.1.10

以下のようなファイルが生成されます。

localhost+2-key.pem
localhost+2.pem

ファイル名は <最初に指定されたホスト名>+<残りのホスト数>-key.pem という感じでしょうか。オプションがあるかもですが調べていません。

Nginx の設定

今回は Nginx を使用して HTTPS のサーバーを構築したので、以下のように設定しました。

    server {
        listen       80;
        listen       443 ssl;
        server_name  localhost hoge.local;

        ssl_certificate      localhost+2.pem;
        ssl_certificate_key  localhost+2-key.pem;

        # other settings ...
    }

Chrome で https://localhost/ とアクセスしても問題なく鍵マークが表示されました。

localhost-https