ngrokでvagrantの開発環境に外部からアクセスする

概要

vagrantで立ち上げたVM上(ローカル開発環境)で稼働しているWebサービスに、外部からインターネット越しにアクセスする方法の備忘録。

ローカル開発環境で開発中のWebサービスを、ちょっとだけ他の人に見てもらう際に、サーバにデプロイしたりパソコンを持って相手の元に行ったりするような億劫な作業を改善する。

本記事では、LAN外とLAN内をリレーしてくれるツール(サービス)である、ngrokを用いる。

前提

deban 8.6
ngrok 2.2.8

また、VM内で何らかのWebサービスが3000番で動いていることを想定する。動いているものは何でも良いが本記事ではRailsアプリを使用している。

ngrokについて

ngrokは、LAN外とLAN内をリレーしてくれるツール及びサービス。本来はインターネット越しにアクセスできない閉じた環境に対して、リクエストとレスポンスを中継することで、外部から内部へのアクセスを実現する。

ngrokの料金について

ngrokはフリープランなら無料で、それも会員登録無しで利用できる。フリープランの他にはベーシックプラン、プロプラン、ビジネスプランとランクがあり、それぞれ月額利用料がかかる。

もちろんプランのランクに応じて、よりセキュアな利用ができたり、独自ドメインを使えたり、最大接続数を増やせたりと恩恵が受けられるが、開発環境をサクッと共有したい程度ならフリーで問題ない。

当然本記事ではフリープランを利用する。

ngrokクライアントのインストール

ngrokを、Webサーバが稼働している環境にインストールする。vagrantやdockerを使った仮想マシン上で開発している場合も、ゲストに直接インストールするだけで良い。

64bitLinuxの最新版をダウンロード

$ wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip

zipで落ちてくるので解凍

$ unzip ngrok-stable-linux-amd64.zip

ngrokという単体のコマンドが展開される。これを使うだけ。

$ ls
ngrok  ngrok-stable-linux-amd64.zip

グローバルコマンドにしたい場合はパスが通ってるディレクトリにこれを移動すれば良い

$ mv ngrok /usr/local/bin

ngrokコマンドが使えるようになる

$ ngrok -v
ngrok version 2.2.8

ngrokでローカル開発環境を公開する

3000番ポートでWebアプリケーションが動作している状態で、以下コマンドを実行する。

$ ngrok http 3000

すぐにフォワーディングが開始され、専用URLが発行される

ngrok by @inconshreveable                                                                                (Ctrl+C to quit)

Session Status                online
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://af23f838.ngrok.io -> localhost:3000
Forwarding                    https://af23f838.ngrok.io -> localhost:3000

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

この場合、ローカル開発環境にアクセスして欲しい人に、”http://af23f838.ngrok.io”にアクセスしてもらえば、ローカル開発環境の3000番ポートにフォワーディングされる。

実際に上記URLにアクセスされると、ステータス200を無事に返却していることがわかる

HTTP Requests
-------------                                                                                   200 OK
GET /favicon.ico                                                                                
GET /                                                                                            200 OK

Ctrl+Cで停止する。停止後は上記URLが以下のように無効になるので、相手の利用が終了するまでは立ち上げたままにすること。

Tunnel af23f838.ngrok.io not found

所感

  • 想像を遥かに超えて簡単に導入、利用できた。比較的古くからあるサービスなのに何故気づかなかったのか。
  • フリープランだとどうしてもセキュリティ的に弱いので、機密情報などが見えてしまうような場合は気をつける必要あり。
  • URLがランダム文字列になると、URLを伝える手間がかかる。月5ドルのプランで独自ドメインが使えるなら組織で契約するのもいいかも

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です