ngrokを使ってお手軽に開発環境のWebサーバを外から接続できるようにしよう

はじめに

皆さん、こんにちは。Misocaチーム from ファントムタイプのこくぼ ( twitter:@yusuke_kokubo ) です。 炭酸水を箱買したら間違って自宅に発送してしまってしかたないので麦茶を飲んでいる最近です。 さて、本題に入る前にまず皆さんにお詫びを申し上げなければいけません。

前回記事の最後に『次回「ラグビー部の大学生とスクラムしてみた(ä»®)」でお会いしましょう。』と書いたにもかかわらず、今回も真面目な記事になってしまいました。 謹んでお詫び申し上げます。次回こそ正真正銘のネタ記事を書きますのでどうかもう少々お待ちいただければと思います。

*1

閑話休題

アプリケーションを開発していると社外のネットワークから開発環境へ接続したくなりますよね？ 例えば外部のサービスと連携させたいときとか。スマホから見たいときとか。とかとか。 そんなときはngrokを使ってポートフォワーディングするのが便利です。

ngrok.com

最初に諸注意！

ポートフォワーディングはネットワークに穴を開ける行為です。 セキュリティ上のリスクを承知したうえで使うようにしましょう。 *2

ngrokって？ (ポートフォワーディングとは)

画像はngrok.comから引用

• ローカルのネットワークとngrok.comの間にネットワーク上のトンネルを掘る(ポートを開放する)
• グローバルなネットワークからngrok.comにアクセスすると、ローカルなネットワークへパケットが転送される
• その結果、ローカルのPCに外部からアクセスできるようになる

ちょっとこわいですね。なので必要なときに必要な分だけ、リスクを考えて使いましょう。

まずはダウンロード

ngrok.com

環境にあったファイルをダウンロードしましょう。 (ここではMac用をダウンロードしたとします)

ダウンロードしたzipファイルを解凍すると実行ファイルができるので適当なディレクトリに配置します。

動かしてみる

早速動かしてみます。

$ ./ngrok http 80

これでローカルの80番ポートを外部に向けて開放したことになりました。

Tunnel Status                 online

Version                       2.0.19/2.0.19
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://1ccaa7cb.ngrok.io -> localhost:80
Forwarding                    https://1ccaa7cb.ngrok.io -> localhost:80
                                                                      
Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

これでインターネットにつながる端末ならどこからでも http://1ccaa7cb.ngrok.io にアクセスすればローカルの80番につながります。お手軽ですね。 サブドメインの 1ccaa7cb は動かすたびにランダムな文字列が設定されます。

サブドメインを固定にして使いたい

サブドメインにはデフォルトではランダムな文字列が設定されますが、自分で指定することもできます。 そのためにはngrok.comにサインアップしましょう。 ( freeプランで登録する場合はngrokへの感謝をつぶやくなりしてくださいね )

ngrok.com

サインアップするとトークンが発行されるので、画面に指示されたとおりにコマンドを実行します。

$ ./ngrok authtoken [token]
Authtoken saved to configuration file: /Users/[User]/.ngrok2/ngrok.yml

これで使えるようになりました。

試してみましょう。

$ ./ngrok http 80 --subdomain=praisev8

Tunnel Status                 online
Version                       2.0.19/2.0.19
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://praisev8.ngrok.io -> localhost:80
Forwarding                    https://praisev8.ngrok.io -> localhost:80

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

これで http://praisev8.ngrok.io にてアクセスできるようになりました。 *3

まとめ

ngrokを使えば非常にお手軽にポートフォワーディングができるようになります。 機会があればお試しください。

次回予告

アジャイルなみんなが大好きなスクラムをやってみたので今度こそ紹介できたらしたいと思います。

それでは。Enjoy ngrok !

*1:とあるお昼休みの様子です

*2:Misocaではセンシティブな運用データは開発環境から切り離されたセグメントで管理されています。そのため一時的とはいえ開発環境を外部に公開しても問題はありません

*3:当たり前のことですが、他のユーザーが praisev8を使用中の場合は使えません