証明書TECHNOLOGY2019.07.10みなさんローカル環境での開発時は必要に応じて「自己署名入り証明書」(通称:オレオレ証明書)を作成していると思います。ほとんどは主にopensslなどを使って作成していたりすると思いますが、オプションが複雑で毎回ググったり、そもそもopensslのバージョンの問題などでコマンドがコケることもしばしばあるのではないでしょうか。webpackでServiceWorkerのオフラインキャッシュと戯れる」、「ServiceWorkerのキャッシュ戦略を考える」を参照)するにあたって調べたところmkcertというツールを発見。使ってみてものすごく簡単だったのでオススメしたいと思います。githubインストールそれではインストールしていきましょう。環境を汚したくないので、homebrewからインストールが可能な点はかなり嬉しい。mkcert次にローカル環境に認証局を作成します。以下のコマンドで任意のドメインでSSL証明書が作成できます。sample.co.jp複数ドメインを設定できるうえにワイルドカードもいけるみたいです!僕は主にBaseStationというサービスを開発しているのですが、ローカル環境用に“xxxxx.bst.co.jp”というドメインを使っているので、使い回しできるようにワイルドカードで使える証明書を作成しました。ワイルドカードを指定する場合、ダブルクォーテーション(“”)で囲む必要があるようです。念のためbst.co.jp、localhostとローカルのIPアドレスも入れておきます。127.0.0.1カレントディレクトリに証明書が生成されました。_wildcard.bst.co.jp+3-key.pem_wildcard.bst.co.jp+3.pemファイル名は先頭に指定したドメイン名と”+3′′はその他3つのドメインが指定されているという意味と思われます。SSL証明書を設置あとはこのファイルをWEBサーバーに設置しましょう。“ssl_certificate”と“ssl_certificate_key”にてファイルを設置したディレクトリを指定します。弊社ではDockerを使っているので、docker-compose.ymlのvolumesに指定して、起動時に設置されるようにします。certsディレクトリを作成してここに先ほど作成したSSL証明書ファイル一式を配置しています。./conf/default.conf:/etc/nginx/conf.d/default.conf起動してみてファイルがあるかどうかを確認します。execコマンドで起動中のコンテナにログインして確認します。指定したディレクトリにファイルが設置されています。ブラウザで確認ブラウザでローカル環境のドメインに接続してみます。昨今の開発では、https通信でないと正常に動作しないケースが増えてきています。ただでさえ新しい技術スタックのインプットに時間はあればあるだけよいという状況と思いますので、環境セットアップに貴重な時間を奪われたくない方々の一助となれば幸いです。隆行プロダクトマネージャー/フロントエンドエンジニア最近、肝臓が悪いと宣告されたので、何かというと牡蠣をアテに呑むように気をつけてます。酒飲むなよってハナシですがやめません。