Help us understand the problem. What is going on with this article?

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

More than 3 years have 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部分は起動する度に変わります。
固定したい場合は、有料プランでお布施をすると固定できるみたいです。

以上。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away