[Docker]ローカル開発環境をHTTPS化！

ローカル開発環境を構築していて、「HTTPS通信やSecure WebSocket（WSS）を使いたいけれど、SSL証明書の設定が面倒…」と感じたことはありませんか？

ブラウザの「保護されていない通信」という警告を無視して進めることもできますが、一部のAPIや機能（Service Workerや位置情報など）はHTTPSが必須な場合もあります。

そこで今回は、現在のデファクトスタンダードとも言えるツール 「mkcert」 を使って、Docker環境に信頼されたSSL証明書を導入する手順をステップバイステップでご紹介します。

1. なぜ「mkcert」なのか？
2. mkcert のインストールと準備
3. docker-compose.yml でのマウント
4. Nginx の設定（SSL終端）
5. ソケット通信（WSS）の注意点
まとめ

1. なぜ「mkcert」なのか？

これまで一般的だった openssl による自己署名証明書は、ブラウザに「このサイトは危険です」と怒られるため、手動で例外許可を出す必要がありました。

mkcert を使うと、自分のPC内に「ローカル認証局（CA）」を作成し、そこから証明書を発行します。これにより、ブラウザが最初から「安全なサイト」として認めてくれる（緑の鍵マークが出る） のが最大のメリットです。

2. mkcert のインストールと準備

まずはホストマシン（Mac/Windows/Linux）に mkcert をインストールしましょう。

# macOSの場合
brew install mkcert
brew install nss # Firefoxを使う場合

# ローカルCAをPCにインストール
mkcert -install

次に、プロジェクトのルートディレクトリで証明書を発行します。

mkcert localhost 127.0.0.1 ::1

これで、localhost+2.pem（証明書）と localhost+2-key.pem（秘密鍵）が生成されます。

3. docker-compose.yml でのマウント

生成した証明書をコンテナ内のWebサーバー（Nginxなど）から参照できるように設定します。

services:
  nginx:
    image: nginx:latest
    ports:
      - "443:443"
    volumes:
      - ./localhost+2.pem:/etc/nginx/ssl/cert.pem
      - ./localhost+2-key.pem:/etc/nginx/ssl/key.pem
      - ./nginx.conf:/etc/nginx/conf.d/default.conf

4. Nginx の設定（SSL終端）

Nginx側でSSLの設定を記述します。リバースプロキシとして構成すれば、バックエンドのアプリ側はHTTPのままでも、外部（ブラウザ）からはHTTPSとして通信可能です。

server {
    listen 443 ssl;
    server_name localhost;

    ssl_certificate     /etc/nginx/ssl/cert.pem;
    ssl_certificate_key /etc/nginx/ssl/key.pem;

    location / {
        proxy_pass http://app_container:8000;
        proxy_set_header Host $host;
    }

    # WebSocket (WSS) の対応
    location /ws/ {
        proxy_pass http://app_container:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

5. ソケット通信（WSS）の注意点

WebSocketで wss://localhost を使う場合も、上記のように Upgrade ヘッダーと Connection ヘッダーを適切に渡す設定が必要です。これにより、ブラウザ側からは安全なソケット通信として確立されます。

まとめ

DockerでWebアプリやWebSocket（WSS）を開発する際、避けて通れないのがSSL証明書の問題です。自己署名証明書（いわゆるオレオレ証明書）ではブラウザの警告が煩わしく、検証がスムーズに進まないことも。本記事では、ローカル認証局を簡単に構築できる「mkcert」を活用したスマートな解決策を解説します。証明書の発行からdocker-composeでのマウント、Nginxの設定まで、開発効率を劇的に上げる手順をまとめました。

「まだオレオレ証明書で消耗している」という方は、ぜひこの機会に mkcert + Docker の構成を試してみてください！