Dockerでローカル開発環境のhttps化

はじめに

ローカル開発環境の https 化
https://blog.jxck.io/entries/2020-06-29/https-for-localhost.html
この記事を読ませて頂き、自分の環境ではこうやってるよというのをシェアしようと思いました。
Let's Encryptによる証明書ではなくて、自己署名証明書を使う方法になります。
また、記事で指摘されているlocalhostの特殊性を無視して粗があっても手早くhttpsで開発したい人向けです

https化の動機

localhostとの通信を暗号化しても無意味な気がしますが、そうせざるをえない時もあります

• mixed contentでリソースがブロックされる
• FacebookのOAuthで設定するredirect URIはhttpsでないと動かない
• Geolocation APIで位置情報を取得する時にhttpsでないと動かない

そのような時のためにlocalhostをhttpsで使う手順があると便利です。
ngrokなどもありますが、手元で完結するタイプの方法になります。

steps

https-portal imageを使う

こちらのイメージを使わせて頂きます。
https://github.com/SteveLTN/https-portal

docker-compose.yml

version: "3"
services:
  https-portal3000:
    image: steveltn/https-portal:1
    ports:
      - '3443:443'
    environment:
      STAGE: local
      DOMAINS: 'localhost -> http://host.docker.internal:3000'

このコンテナは、 https://localhost:3443 でリクエストを受けて http://localhost:3000 にフォワーディングしてくれる設定となります。
(localhost:3000 で開発中のアプリケーションが動いていることを想定)
STAGE=local この環境変数を渡すとコンテナの中で自己署名証明書を作ってくれます（便利!)
Docker Desktop for Macを使っている場合はこれでOK。他の環境では extra_hosts の設定が必要でしょう。
例:

docker-compose.yml

version: "3"
services:
  https-portal3000:
    image: steveltn/https-portal:1
    ports:
      - '3443:443'
    environment:
      STAGE: local
      DOMAINS: 'localhost -> http://host.docker.internal:3000'
    extra_hosts:
      - "host.docker.internal:host-gateway"

Dockerでアプリケーションを動かしている場合は host.docker.internal でなくて直接コンテナに繋いでも動くと思います。

Chromeで警告を無視する

これをEnabledにすると localhost に限り自己署名証明書であっても警告が出なくなります。

chrome://flags/#allow-insecure-localhost

セキュリティを下げる設定ですが対象がlocalhostのみなので許容します。
以上で https://localhost:3443/ へhttpsアクセスできます。