LoginSignup
27

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-12-24

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27