Vagrantな開発環境でちょっとした確認環境を提供するときに今更ながらngrokが便利

自分のVagrantfileはだいたいこんな感じで、シンプルにlocalhostにポートフォワードして開発しています。

これのメリットは外部ネットワークに影響されないことですね。

ただ、そうすると困るのが「Macにないブラウザでの確認」です。具体的には I(ry とか ガラk(ry です

で、

ちょっとだけ確認したい。そういうときに使えるのが ngrok です。

インストール

$ brew install ngrok

使い方

このVagrantfileで起動したリモート側のWebサーバの80に接続するためには、ホスト側の8888とngrokをつなげます

$ ngrok 8888

これで http://*.ngrok.com/ドメインが当てられて外部から接続ができるようになります。

簡単ですね!

ちょっといろんな人にアクセスされるかもしれないのがちょっと。。。という人にはBASIC認証も設定可能です。

$ ngrok -httpauth="helmet:12345" 8888

https接続をする際に気をつけなければならないこと

HTTPSな接続をしたい場合があると思います。 このVagrantfileでは4444ですね。

$ ngrok 4444

これで、ブラウザは https://*.ngrok.com/ への接続ができますが、実はngrok.comを経由する時点で、はHTTPSからHTTPに変換されてます。

+----------+ HTTPS                  443 +-----------+ HTTP  4444 +---------------------+ 
| browser  |--> https://*.ngrok.com/ -->| ngrok.com |----------->| localhost (Vagrant) |
+----------+                            +-----------+            +---------------------+

なので、Vagrant内のWebサーバではX-Forwarded-Protoを確認する必要があります。

逆にいうと気をつけるのはこれだけ!

今更ながらngrok便利!

というわけで

良いVagnrat開発ライフを!