数分でできる!mkcertでローカル環境へのSSL証明書設定

数分でできる!mkcertでローカル環境へのSSL証明書設定

みなさんローカル環境での開発時は必要に応じて「自己署名入り証明書」(通称:オレオレ証明書)を作成していると思います。
ほとんどは主にopensslなどを使って作成していたりすると思いますが、オプションが複雑で毎回ググったり、そもそもopensslのバージョンの問題などでコマンドがコケることもしばしばあるのではないでしょうか。僕だけですかね(苦笑)

日頃からサーバーサイドのことをやっているわけではないので結構ストレスを感じながらやっていましたが、今回ServiceWorkerをいろいろ検証(「Workbox + webpackでServiceWorkerのオフラインキャッシュと戯れる」、「ServiceWorkerのキャッシュ戦略を考える」を参照)するにあたって調べたところmkcertというツールを発見。使ってみてものすごく簡単だったのでオススメしたいと思います。

github

インストール

それではインストールしていきましょう。

環境を汚したくないので、homebrewからインストールが可能な点はかなり嬉しい。

brew install mkcert

次にローカル環境に認証局を作成します。

mkcert -install

SSL証明書を発行

以下のコマンドで任意のドメインでSSL証明書が作成できます。
簡単ですね。

mkcert sample.co.jp

複数ドメインを設定できるうえにワイルドカードもいけるみたいです!

僕は主にBaseStationというサービスを開発しているのですが、ローカル環境用に“xxxxx.bst.co.jp”というドメインを使っているので、使い回しできるようにワイルドカードで使える証明書を作成しました。ワイルドカードを指定する場合、ダブルクォーテーション(“”)で囲む必要があるようです。
念のためbst.co.jp、localhostとローカルのIPアドレスも入れておきます。

mkcert "*.bst.co.jp" bst.co.jp localhost 127.0.0.1

カレントディレクトリに証明書が生成されました。

  • _wildcard.bst.co.jp+3-key.pem
  • _wildcard.bst.co.jp+3.pem

ファイル名は先頭に指定したドメイン名と”+3″はその他3つのドメインが指定されているという意味と思われます。

SSL証明書を設置

あとはこのファイルをWEBサーバーに設置しましょう。

以下はnginxでの例ですが、設定ファイルの” “ssl_certificate”と“ssl_certificate_key”にてファイルを設置したディレクトリを指定します。

server {
    listen       443 ssl http2;
    server_name  sample.bst.co.jp;
    ssl  on;

    ssl_certificate     /etc/nginx/ssl/_wildcard.bst.co.jp+3.pem;
    ssl_certificate_key /etc/nginx/ssl/_wildcard.bst.co.jp+3-key.pem;
    ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
}

Dockerの場合

弊社ではDockerを使っているので、docker-compose.ymlのvolumesに指定して、起動時に設置されるようにします。
certsディレクトリを作成してここに先ほど作成したSSL証明書ファイル一式を配置しています。

version: '3'
services:
  nginx:
    
    // imageの指定など

    volumes:
      - ./certs:/etc/nginx/ssl
      - ./conf/default.conf:/etc/nginx/conf.d/default.conf

起動してみてファイルがあるかどうかを確認します。
docker execコマンドで起動中のコンテナにログインして確認します。

指定したディレクトリにファイルが設置されています。

ブラウザで確認

ブラウザでローカル環境のドメインに接続してみます。

感想

昨今の開発では、https通信でないと正常に動作しないケースが増えてきています。
ただでさえ新しい技術スタックのインプットに時間はあればあるだけよいという状況と思いますので、環境セットアップに貴重な時間を奪われたくない方々の一助となれば幸いです。

ライターおすすめ記事

OUR SERVICE

Fan Commerce

ファンコマース

ファンとのダイレクトなコミュニケーションを実現して「感動体験」をビジネスに結びつけます。

Digital Marketing

デジタルマーケティング

未来を創造する価値ある「顧客体験」を実現する仕組みづくりを提案。