ローカル開発環境の https 化を実際にやってみた

はじめに

以前 ローカル開発環境の https 化 | blog.jxck.io を読んで、自分の開発環境でもこれをやってみたいなぁと思っていたので、試してみた内容を書いてみる。

環境

• MacBook Pro (13-inch, M1, 2020)
• macOS Big Sur (11.6)
• Docker Desktop (4.1.1)

A レコードの設定

localhost.example.com. と *.localhost.example.com. の A レコードに、 127.0.0.1 を設定する。

;; ANSWER SECTION:
localhost.example.com.	3600	IN	A	127.0.0.1

;; ANSWER SECTION:
app.localhost.example.com. 3600	IN	A	127.0.0.1

TLS 証明書の取得

Let's Encrypt の TLS 証明書を、 DNS-01 チャレンジを使用して取得する。

# --config-dir, --logs-dir, --work-dir は必要に応じて指定する。
certbot certonly -d localhost.example.com -d '*.localhost.example.com' --agree-tos -m [e-mail] --manual --preferred-challenges dns

nginx の設定

以前試した時はここでどうしようか悩んだ。今回は nginx の Docker コンテナを立ち上げてみる。

docker-compose.yml

version: "3.9"

services:
  nginx:
    image: nginx
    ports:
      - "443:443"
    volumes:
      - ./conf.d:/etc/nginx/conf.d

localhost.example.com は今のところ特に使い道がないので、デフォルトのページを表示。

conf.d/root.conf

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name localhost.example.com;

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    include /etc/nginx/conf.d/ssl.conf;
    server_name localhost.example.com;

    root /usr/share/nginx/html;
}

8080 番ポートで起動しているアプリケーションに、 app.localhost.example.com でアクセスできるようにする。

conf.d/app.conf

server {
    listen 80;
    listen [::]:80;
    server_name app.localhost.example.com;

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    include /etc/nginx/conf.d/ssl.conf;
    server_name app.localhost.example.com;

    location / {
        include /etc/nginx/conf.d/proxy.conf;
        proxy_pass http://host.docker.internal:8080;
    }
}

TLS とプロキシの設定は別ファイルに分割しておく。 Mozilla SSL Configuration Generator で生成している。

conf.d/ssl.conf

ssl_certificate /etc/nginx/conf.d/fullchain.pem;
ssl_certificate_key /etc/nginx/conf.d/privkey.pem;
ssl_session_timeout 1d;
ssl_session_cache shared:MozSSL:10m;  # about 40000 sessions
ssl_session_tickets off;

# modern configuration
ssl_protocols TLSv1.3;
ssl_prefer_server_ciphers off;

# HSTS (ngx_http_headers_module is required) (63072000 seconds)
add_header Strict-Transport-Security "max-age=63072000" always;

conf.d/proxy.conf

proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;

アプリが増えたら、 server_name, proxy_pass ディレクティブだけが違う設定ファイルを追加して nginx を再起動すればよい。

まとめ

• 開発環境が正規の証明書で HTTPS になるとうれしい。
• nginx コンテナが 443 ポートで普通に起動するのは知らなかった。（怒られるかと思った）
  • com.docker.vmnetd が root で起動しているからか。
• host.docker.internal を使うのがなんとなくハックっぽいので、他にいい方法が思いついたら書く。