ngrokでlocalhostに外部からアクセスできるようにする

ngrok

外部からlocalhostにアクセスを可能とするためのサービスです。

ngrok

利用シーン

• スマホアプリの動作確認

スマホからもアクセスが可能なので、スマホでの動作確認やアプリ内で利用しているAPIとの連携確認などにも利用できます。

• MacからIEの動作確認を行う(Modern.IE + ngrok)

Modern.IEというIEを動かすことができるVirtualBox用のイメージと組み合わせることで
MacでIEの動作確認を行うことができます。
もちろん外部からアクセスできるので、Windows用のマシンがあればそちらでも動作確認できます。

使い方

1. ダウンロード

https://ngrok.com/download から環境にあったものをダウンロードします。

2. 実行

下記のコマンドを実行します。

$ unzip ./ngrok.zip
$ ./ngrok 80

下記のような画面になれば Forwarding に表示されているURLからlocalhostへアクセスできるようになります。

Tunnel        Status online
Version       1.7/1.6
Forwarding    http://abcdefghijklmn.ngrok.com -> 127.0.0.1:80
Forwarding    https://abcdefghijklmn.ngrok.com -> 127.0.0.1:80
Web Interface 127.0.0.1:4040
# Con         0
Avg Conn Time 0.00ms

localhost以外にアクセスする

apacheのVirtualHostの設定で example.com というドメインで開発を行っていた場合
下記の手順を踏むことで example.com で動いているアプリケーションへアクセスすることができます。

1. VirtualHostの編集

VirtualHostの設定に下記を追加します。

<VirtualHost *>
  ServerName example.com
  ServerAlias example.ngrok.com

  ...
</VirtualHost>

2. 実行

下記のコマンドを実行します。

$ ./ngrok -subdomain='example' 80

ブラウザからexample.ngrok.comにアクセスすると無事につながります。

Tunnel        Status online
Version       1.7/1.6
Forwarding    http://example.ngrok -> 127.0.0.1:80
Forwarding    https://example.ngrok -> 127.0.0.1:80
Web Interface 127.0.0.1:4040
# Con         0
Avg Conn Time 0.00ms