nginx をリバースプロキシとして利用して1つの ngrok ドメインで複数のサーバーを公開する

こんにちは､ Omni Hub チームの shunten31 です. 今回は小さめな内容ですが､ nginx をリバースプロキシとして利用することで､ 1つの ngrok のドメイン経由で複数のローカル環境ホストを公開する方法を紹介します.

ngrok とは

ngrok は、ローカルで動作している開発中アプリケーションに対して、手軽にインターネット経由でアクセスできる仕組みを提供するリバースプロキシツールです. 手元で ngrok を起動することで､ hoge.ngrok.io のようなドメインに対するリクエストを､指定したローカル環境のアドレスとポート (ex. 127.0.0.1:3000) にルーティングすることができます.

ngrok の制約

我々のチームでは開発環境を構築する目的で ngrok の Personal Plan を契約しています。
このプランでは「サブドメイン（例：hoge.ngrok.io）」を1つしか利用できません. また､上位プランでも､サブドメインの追加には料金がかかるようです.

しかしながら､Omni Hub の開発環境では外部からアクセスが必要なサーバーが複数あり、同一の ngrok サブドメインへのリクエストを複数のローカルサーバーに振り分ける必要がありました.

nginx をリバースプロキシとして利用する

リクエストの振り分けを行うため､ nginx をリバースプロキシとして利用することにしました.

ローカルで nginx を Docker コンテナとして起動
ngrok は nginx に対してトンネルを張る（例：ngrok http <nginx_port>）
nginx は受けたリクエストを URL のパスに応じて、複数のローカルサーバー（Docker 内外問わず）に振り分け

nginx 自体も docker コンテナとなっているので､開発環境構築の手間も削減できます.

終わりに

Nginx のリバースプロキシを利用して､ ngrok の単一ドメインを使って複数のサーバーを公開する方法を紹介しました. わりと一般的な方法なのかなと思ったのですが､他の技術ブログで紹介されているものを特に見つけることができなかったので､今回記事にしてみました. 参考になれば幸いです.

関連する設定ファイルを､利用したものを多少改変した状態で､下記に載せています. 是非参考にされてください.

付録: 設定方法

リバースプロキシを構築する

compose.yml

  reverse-proxy:
    image: nginx:latest
    container_name: reverse-proxy
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/nginx.conf
    ports:
      - 5000:8080
    restart: always

nginx.conf

server {
        listen 8080;
        server_name localhost;
        location /s3{
            rewrite ^/s3/(.*)$ /$1 break;  # パスの書き換えも行える
            proxy_pass http://localstack:4566;
        }
        location /webhook {
            proxy_pass http://host.docker.internal:6000;

        }
        # 上記にマッチしなかったリクエストは､ここにマッチする
        location / {
            proxy_pass http://host.docker.internal:5000;
        }
}

ngrok の設定

ngrok.yml

tunnels:
  dev:
    proto: http
    hostname: hoge.ngrok.io
    addr: 127.0.0.1:5000  # nginx コンテナのポート

Feedforce Developer Blog

フィードフォース開発者ブログ