Edited at

ngrockでローカル環境と外部サービスをつなぐ

More than 1 year has passed since last update.


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

ローカル環境で開発していて、外部サービスからの通知・リクエストを受けとって中身を確認したい。ってことよくあると思います。でもローカル環境を外部に公開するなんて怖いし面倒くさい。そんなときに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部分は起動する度に変わります。

固定したい場合は、有料プランでお布施をすると固定できるみたいです。

以上。