ローカル環境のまま外部と連携を確認する方法

はじめに

LINEなどでBotを開発している場合、今までは公開されているサーバーにわざわざアップロードして動作を確認していました。
しかし、ngrokというサービスを使えばローカルのまま確認ができ、修正もしやすくなりました。
すごく便利だったのでメモを残しておきます。

セットアップ

https://ngrok.com/ に登録するとセットアップの手順が書かれています。

1. 「Download for Windows」というボタンからZIP圧縮されたngrokをダウンロードします。
2. ダウンロードしたファイルを解凍するとngrok.exeが入っていますので、適当なところに設置してください。
3. コマンドプロンプトを立ち上げて、以下のコマンドを実行すると設定ファイルngrok.ymlが作成され、セットアップが完了します。 アクセストークンはこちらで確認できます。

> ngrok.exe authtoken <YOUR_AUTH_TOKEN>

基本的な使い方

以下のコマンドでローカルホストの80にトンネルが設置されます。

> ngrok.exe http 80

実行画面

ngrok by @inconshreveable

Session Status                online
Account                       Xxxxxxxx Xxxxxxx (Plan: Free)
Version                       2.2.8
Region                        Asia Pacific (ap)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://53d87b73.ngrok.io -> localhost:80
Forwarding                    https://53d87b73.ngrok.io -> localhost:80

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

※53d87b73の部分は実行するたびに変わります。

応用的な使い方

接続先を変更する

ローカル環境の設定応じて接続するポート番号やIPアドレスを指定することができます。

WEBサーバーが8080番ポートで動作している場合

> ngrok.exe http 8080

vagrantのローカル環境を構築している場合

> ngrok.exe http 192.168.33.10:80

Regionを指定する

デフォルトのRegionはUnited Statesですが、他の地域を指定することもできます。

RegionにAsia/Pacificを指定

> ngrok.exe http -region=ap 80

Basic認証を設定する

ローカル環境を一部のメンバーにだけ公開したい場合はBasic認証を設定することもできます

ユーザー名：username、パスワード：passwowdで認証

> ngrok.exe http -auth="username:password" 80

設定を保存する

Windowsの場合はユーザーディレクトリに設定ファイルC:\Users\user\.ngrok2\ngrok.ymlが作成されます。
こちらを書き換えることで毎回オプションを指定する必要がなくなります。

ngrok.yml

authtoken: <YOUR_AUTH_TOKEN>
region: ap
tunnels:
  vagrant:
    proto: http
    addr: 192.168.33.10:80

設定を使って起動する場合

> ngrok.exe start vagrant

動作環境

• Windows 10 Home
• ngrok 2.2.8