この記事は何？

ngrokというサービスを使って、ローカル環境に立ち上げたWEBアプリを外部公開する手順のメモです。

環境

Windows10 pro
WSL2
Docker 20.10.20
Docker Compose v2.12.0

ngrokとは？

ngrokは、ローカルで動作しているサーバーをインターネットに公開するための便利なツールです。一般に、ウェブ開発やアプリケーション開発などで、ローカル環境で開発したものをテストしたりデモンストレーションしたりする際に使用されます。

ngrokの仕組みは以下のようになっています。

1. ローカルサーバの起動

開発者は自身のマシン（PCなど）上でウェブサーバーを起動します。これにより、ローカルマシンで動作するウェブアプリケーションが生成されます。

2. ngrokの起動

開発者は同じマシン上でngrokを起動します。ngrokは指定されたポート（例えば、ウェブアプリケーションが起動されているポート）でリッスンを開始します。

3. トンネルの確立

ngrokはngrokのサーバー（ngrokのインフラストラクチャに存在）と開発者のマシンの間に安全なトンネルを確立します。これにより、ローカルマシン上のアプリケーションが、ngrokの公開URLからアクセス可能になります。

4. インターネットからのアクセス

開発者はこのngrokの公開URLを他の人と共有することで、インターネット上から自身のローカルマシン上のアプリケーションにアクセスできます。これにより、自身が開発したアプリケーションのテストやデモが可能になります。

準備

事前に ngrok のアカウントを作成し、Authtoken を発行しておきます。

環境構築

dockerを使用します。
ここでは nginx サーバーをwebアプリに見立て、これを外部に公開してみます。

docker-compose.yml

version: "3"
services:
  nginx:
    image: nginx:latest
    container_name: nginx
    expose:
      - 80

  ngrok:
    container_name: ngrok
    image: ngrok/ngrok:latest
    restart: unless-stopped
    command: ["http", "nginx:80"]
    ports:
      - 4040:4040
    depends_on:
      - nginx
    environment:
      - NGROK_AUTHTOKEN

docker-compose.yml と同フォルダに .env ファイルを用意し、アカウント作成で発行された NGROK_AUTHTOKEN を記述しておきます。

NGROK_AUTHTOKEN=<発行したトークン>

起動

docker-compose up -d

アクセス確認

localhost:4040 にアクセスすると、以下のように ngrokのアクセス用URLが表示されます。

このURLに別の端末からアクセスしてみると...

ローカルに立ち上げたnginxサーバーにアクセスすることができます。
docker-compose のログを確認してみると、確かにアクセスされていることが確認できます。

docker-compose logs -f nginx

まとめ

デプロイしなくてもアプリを外部公開できるのは便利ですね！
ローカルで作ったアプリをお試しで触ってもらうときなどに活躍しそうです。