0. ngrokとは

ngrokは、ローカル環境で動作しているWebサーバやアプリケーションを一時的にインターネット経由で公開するためのリバースプロキシツールです。ローカル環境をHTTPSとして公開できるため、以下のような用途で便利です。

HTTPS通信が求められる外部サービスとの連携（※）
第三者がローカル環境にアクセスする必要がある場合

※例えば、LINEのMessaging API > Webhookを用いた開発を行う場合には、通信はHTTPSで行う必要があります。（参考）

1. ローカル環境（Docker）の準備

環境構築

まずは、ngrokで公開するローカル環境を構築します。今回は簡潔にするため、Nginxのみを利用した最小構成にします。
（※GitHubにてローカル環境用のリポジトリを用意しておりますので、そちらもご参照ください。）

フォルダ構成

.
├── docker/
│   └── nginx/
│       └── Dockerfile
├── public/
│   └── index.html
└── docker-compose.yml

各ファイルの内容

docker/nginx/Dockerfile

FROM nginx:latest
RUN service nginx start

public/index.html

<h1>Hello World!</h1>
<h2>This network is enabled by ngrok.</h2>

docker-compose.yml

version: '3'
services:
  nginx:
    build: ./docker/nginx/
    container_name: ngrok_playground_nginx
    ports:
      - '8080:80'
    volumes:
      - ./public:/usr/share/nginx/html

動作確認

Docker環境を立ち上げて動作確認を行います。

ターミナル

docker compose up -d

ターミナル

open http://localhost:8080

ブラウザで正常に立ち上げればOKです。

2. ngrokのセットアップ

ngrokに新規登録をする

ngrok公式サイトのTOPページ上の右上のSign upボタンから新規登録に進みます。

登録方法はいくつかあるようなので、任意の方法で登録します。

登録完了したら自動的にWelcomeページ（セットアップページ）に遷移されます。

ローカルマシンにngrokをインストール

まずはngrokをインストールします。
（私の場合はmacOSなのでHomebrewを用いてインストールします。他OSの場合は公式サイトを参考にインストールしてください。）

ターミナル

brew install ngrok

下記のように表示されていればOKです。

ターミナル

〜〜　中略　〜〜
🍺  ngrok was successfully installed!

バージョン確認

ターミナル

ngrok --version

ngrokの認証トークンを設定する

サイドバーのYour Authtokenをクリックし、表示された認証トークンをコピーします。

ターミナルに戻り、コピーした認証トークンを設定します。

ターミナル

ngrok config add-authtoken <コピーした認証トークン>

下記の通り表示されればOKです。（設定ファイルの場所は環境によって差異があります。）

ターミナル

Authtoken saved to configuration file: xxxxxxxx/ngrok/ngrok.yml

3. ngrokを起動して、ローカル環境をHTTPSとして外部公開する

ngrokを起動

ターミナル

ngrok http http://localhost:8080

下記のように表示されればOK！

ターミナル

Session Status                online                                           
Account                       xxxxxxxxxxxxxxxx (Plan: Free)                                                                                                                                                          
Version                       3.19.1                                                                                                                                                                                        
Region                        Japan (jp)                                                                                                                                                                                    
Latency                       19ms                                                                                                                                                                                          
Web Interface                 http://127.0.0.1:4040                                                                                                                                                                         
Forwarding                    https://1de4-221-191-11-245.ngrok-free.app -> http://localhost:8080                                                                                                                           
                                                                                                                                                                                                                            
Connections                   ttl     opn     rt1     rt5     p50     p90                                                                                                                                                   
                              0       0       0.00    0.00    0.00    0.00

Forwarding部分のhttps://1de4-221-191-11-245.ngrok-free.appが外部公開用
URLとなります。

動作確認

先ほどのターミナル上ではngrokが起動されていますので、別タブで下記コマンドを実行します。

ターミナル

open https://1de4-221-191-11-245.ngrok-free.app

最初は下記画像のようなページが初期表示されますが、Visit Siteボタンを押下します。

ローカル環境を立ち上げた時と同じ画面が表示されればOKです。

以上です。

補足

無料版を利用する場合は、ngrokを起動/停止した後にもう一度起動するとURLは動的に変わるのでご注意ください。

参考