外部からのリクエストをローカル環境で受け取りたい！

ローカル環境で開発していて、外部サービスからの通知・リクエストを受けとって中身を確認したい。ってことよくあると思います。でもローカル環境を外部に公開するなんて怖いし面倒くさい。そんなときにngrockを使うとお手軽に外部サービスとローカル環境をつなぐ事ができます。

アカウント登録

https://ngrok.com にアクセスしてアカウントを登録。
サブドメインとか使わないなら無料版で十分です。

インストール

OS: macOS 10.12.4 (Sierra)
brew caskでインストール

$ brew cask install ngrok

確認

$ ngrok -v
ngrok version 2.2.3

#　起動

$ ngrok http 8080

こんな画面がでればOK

grok by @inconshreveable                          (Ctrl+C to quit)

Session Status              online
Account                     account_name (Plan: Free)
Version                     2.2.3
Region                      United States (us)
Web Interface               http://127.0.0.1:4040
Forwarding                  http://602bc2c0.ngrok.io -> localhost:8080
Forwarding                  https://602bc2c0.ngrok.io -> localhost:8080

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

http://602bc2c0.ngrok.ioにアクセスするとlocalhost:8080につながります。
外部サービスのwebhookなんか試すときに、webhookの送信先URLにhttp://602bc2c0.ngrok.ioを指定してあげると、ngrokを経由してlocalhost:8080に届きます。

virtualhostとか

ローカル環境でvirtualhostを設定して、ホスト名で振分してるとかあると思います。
そんなときは、以下のように起動時のオプションで、host-headerを書き換えることができます。

$ngrok http --host-header=rewrite www.hogehoge.local:80

すると↓のように　http://3ff3ce28.ngrok.io　へのリクエストが、ホスト名www.hogehoge.localとして中継されます。

grok by @inconshreveable                         (Ctrl+C to quit)

Session Status              online
Account                     account_name (Plan: Free)
Version                     2.2.3
Region                      United States (us)
Web Interface               http://127.0.0.1:4040
Forwarding                  http://3ff3ce28.ngrok.io -> www.hogehoge.local:80
Forwarding                  https://3ff3ce28.ngrok.io -> www.hogehoge.local:80

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

ちなみにhttp://3ff3ce28.ngrok.ioの3ff3ce28部分は起動する度に変わります。
固定したい場合は、有料プランでお布施をすると固定できるみたいです。

以上。