ngrokを使って外部からローカルサーバを閲覧可能にする手順（Windows 7用）

Web2016年8月17日

作業マシンのローカルサーバを出先で見せたい場面があり、どうにかできないか試行錯誤していたところ、トンネリングサービス「ngrok」がとても便利だったのでご紹介いたします。

具体的にはテストサーバへのファイルアップが面倒だったり、テストサーバ自体が無い状況で開発中のサイトを共有したい場合において、ngrokを使うことでローカルサーバをLANを超えて閲覧させることが可能になります。

ダウンロード

以下のページより、ご自分のマシンに合ったファイルをダウンロードしてください。

ngrok

ダウンロードしたファイルを解凍し、ngrok.exeをローカルサーバのルートフォルダに格納します。

D:hogengrok.exe

ngrokを起動

ngrok.exeをダブルクリックで起動すると、コマンドプロンプトが表示されます。

NAME:
   ngrok - tunnel local ports to public URLs and inspect traffic

DESCRIPTION:
    ngrok exposes local networked services behinds NATs and firewalls to the
    public internet over a secure tunnel. Share local websites, build/test
    webhook consumers and self-host personal services.
    Detailed help for each command is available with 'ngrok help <command>'.
    Open http://localhost:4040 for ngrok's web interface to inspect traffic.

EXAMPLES:
    ngrok http 80                    # secure public URL for port 80 web server
    ngrok http -subdomain=baz 8080   # port 8080 available at baz.ngrok.io
    ngrok http foo.dev:80            # tunnel to host:port instead of localhost
    ngrok tcp 22                     # tunnel arbitrary TCP traffic to port 22
    ngrok tls -hostname=foo.com 443  # TLS traffic for foo.com to port 443
    ngrok start foo bar baz          # start tunnels from the configuration file

VERSION:
   2.1.3

AUTHOR:
  inconshreveable - <alan@ngrok.com>

COMMANDS:
   authtoken    save authtoken to configuration file
   credits      prints author and licensing information
   http         start an HTTP tunnel
   start        start tunnels by name from the configuration file
   tcp          start a TCP tunnel
   tls          start a TLS tunnel
   update       update ngrok to the latest version
   version      print the version string
   help         Shows a list of commands or help for one command

ngrok is a command line application, try typing 'ngrok.exe http 80'
at this terminal prompt to expose port 80.
D:hoge>

ローカルサーバのポートを解放

ngrok.exeを起動後、以下のコマンドを叩くと乱数のURLが表示されます。ここではポートは「80」としました。

ngrok http 80

以下のように、乱数のURLが発行されます。

Tunnel Status                 online
Version                       2.1.3
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://●●●●●●●.ngrok.io -> localhost:80
Forwarding                    https://●●●●●●●.ngrok.io -> localhost:80

これで、D:hogeをhttp://●●●●●●●.ngrok.ioで閲覧することが可能になります。

Basic認証をかけたい場合

以下のコマンドで起動することで、Basic認証をかけることもできます。

ngrok http -auth="ユーザ名:パスワード" 80

サブドメインを使用したい場合

なお、この乱数URLは毎回ngrokを起動するたびに変わります。
固定のサブドメインで閲覧したい場合は、ngrokにサインアップして有料プランを申し込む必要があります。

ngrokにサインアップ

以下のURLから必要事項を入力し、サインアップします。

https://dashboard.ngrok.com/user/signup

authtokenを実行

以下のURLよりauthtokenの文字列をコピーし、ngrok.exeから起動後、コマンドを実行します。

https://dashboard.ngrok.com/get-started

ngrok authtoken ●●●●●●●●●●●

続けて、以下のコマンドを打つと固有のサブドメインでURLが発行されます。

ngrok http -subdomain=hogemoge 80

発行されたURLが「hogemoge」になっていれば成功です。

Tunnel Status                 online
Version                       2.1.3
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://hogemoge.ngrok.io -> localhost:80
Forwarding                    https://hogemoge.ngrok.io -> localhost:800

バーチャルホスト名で閲覧したい場合

これもサブドメイン同様有料プランを申し込まないと使えませんが、バーチャルホストの設定で名前を割り当てている場合、vhosts.confに以下の記述を加えることで指定したバーチャルホストを外部PCから閲覧可能にすることができます。

<VirtualHost *:80>
  ServerName hoge
  ServerAlias hoge.ngrok←この行を追加
</VirtualHost>

以下のコマンドで指定のバーチャルホストにアクセスできるようになります。

ngrok -subdomain='hoge' 80

まとめ

ファイアウォールに一部穴を空ける（ポートを解放する）ため、セキュリティには十分注意が必要ですが、いざという時に使えます。
有償利用しても年額5ドルとかなので、お財布にも優しいです。
テストサーバが何かしらの事情で用意できなかったり、気軽に開発状況をシェアしたい際などにぜひ活用してみてください。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。