Zenn
😽

ローカル開発環境のHTTPS化を5分で実現！https-portalを使った設定方法

2024/03/24に公開
Docker
https
tech

LINEアプリをローカルで開発するときにエンドポイントURLがhttpsに対応していないといけなかったので調べた。

ngrokでも対応出来たけど、無料プランのため毎回URLが変わってしまう。
毎回LINE側のエンドポイントURLを変更するのは手間がかかるのでhttps-portalというDockerイメージを使って対応してみた。
日本語のREADMEもあります。

前提

  • Dockerがインストールされていること
  • Docker Composeがインストールされていること

セットアップ手順

Docker環境を構築する

docker-compose.ymlファイルには、https-portalとwebのサービス定義が含まれています。

以下は全体の設定。

version: "3"
services:
  https-portal:
    image: steveltn/https-portal:1
    ports:
      - "80:80"
      - "443:443"
    environment:
      DOMAINS: "local.example.com -> http://web:80"
      STAGE: "local"
    restart: always
    networks:
      - app-network

  web:
    build: ./public
    volumes:
      - ./public:/usr/share/nginx/html
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

DOMAINSにはHTTPS化したいローカルドメインと、httpサーバのコンテナを指定しています。

この設定をすることでlocal.example.comというドメイン名でHTTPS接続を受けた際に、内部的にはhttp://web:80、つまりwebコンテナの80番ポートにHTTPで転送するように設定しています。
これにより、外部からのHTTPSリクエストを内部のHTTPサービスに安全に転送することができます。

services:
  https-portal:
    image: steveltn/https-portal:1
    ports:
      - "80:80"
      - "443:443"
    environment:
      DOMAINS: "local.example.com -> http://web:80"
      STAGE: "local"
    restart: always
    networks:
      - app-network

表示するhtmlファイルを作成する

publicディレクトリを作成して、その中にindex.htmlを作成する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https-portal</title>
</head>
<body>
    <h1>HTTPS化されたローカル環境</h1>
</body>
</html>

Docker環境のビルドと起動

次のコマンドを実行して、Dockerコンテナをビルドし、起動します。

docker compose up --build

動作確認

hostsファイルにローカルで使用するドメインを追加します。
今回はhttps://local.example.comを追加した。

ブラウザを開きhttps://local.example.comにアクセスします。
HTTPS化されたサンプルアプリケーションが表示されるはずです。

初回アクセス時にはセキュリティ警告が表示される場合がありますが、これはローカルで自己署名証明書を使用しているためです。警告を承認して進めてください。

HTMLの内容が画面に表示されれば、設定は成功です。

日本語のREADMEに色々書いているので、他にも設定したいことがあれば読んでみてください。

Discussion