ngrokを使って外部からローカルサーバを閲覧可能にする手順（Windows 7用）
Web2016年8月17日
作業マシンのローカルサーバを出先で見せたい場面があり、どうにかできないか試行錯誤していたところ、トンネリングサービス「ngrok」がとても便利だったのでご紹介いたします。
具体的にはテストサーバへのファイルアップが面倒だったり、テストサーバ自体が無い状況で開発中のサイトを共有したい場合において、ngrokを使うことでローカルサーバをLANを超えて閲覧させることが可能になります。
ダウンロード
以下のページより、ご自分のマシンに合ったファイルをダウンロードしてください。
ダウンロードしたファイルを解凍し、ngrok.exeをローカルサーバのルートフォルダに格納します。
D:hogengrok.exengrokを起動
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から必要事項を入力し、サインアップします。
authtokenを実行
以下のURLよりauthtokenの文字列をコピーし、ngrok.exeから起動後、コマンドを実行します。
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ドルとかなので、お財布にも優しいです。
テストサーバが何かしらの事情で用意できなかったり、気軽に開発状況をシェアしたい際などにぜひ活用してみてください。