ngrok をインストール、起動、公開 URL の確認方法などをご紹介します。
ngrok インストール
公式サイトの手順
公式サイト ngrok - download からダウンロードして、unzip 後に ngrok ファイルを実行すると起動します。
macOS 編
macOS では Homebrew 経由で ngrok インストールすることもできます。
brew cask install ngrok
ngrok バージョン確認
念のため ngrok のバージョンを確認したところ、公式サイトと Homebrew 経由のバージョンは同じでした。
$ ngrok version
ngrok version 2.3.25
$ ~/Downloads/ngrok version
ngrok version 2.3.25
ngrok 起動方法
Expose a local web server to the internet | ngrok – documentation
ngrok http 8080
ngrok 公開 URL 確認方法
ngrok http 8080 で ngrok 起動後に Terminal に出力される Forwarding の項目から確認することができます。
$ ngrok http 8080
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Session Expires 7 hours, 59 minutes
Version 2.3.25
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://b0ef9220.ngrok.io -> http://localhost:8080
Forwarding https://b0ef9220.ngrok.io -> http://localhost:8080
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00 Web ブラウザから確認
Inspecting your traffic | ngrok – documentation
などの URL をブラウザで開いて確認することができます。
Client API から確認
List Tunnels - Client API | ngrok – documentation
http://localhost:4040/api/tunnels が JSON でレスポンスを返してくれまして、public_url の値が公開 URL に対応します。
$ curl -s http://localhost:4040/api/tunnels | jq | grep public_url
"public_url": "https://b0ef9220.ngrok.io",
"public_url": "http://b0ef9220.ngrok.io",
以下、curl の出力結果と jq コマンドで加工した出力結果です。
出力結果 curl http://localhost:4040/api/tunnels
$ curl -s http://localhost:4040/api/tunnels
{"tunnels":[{"name":"command_line (http)","uri":"/api/tunnels/command_line%20%28http%29","public_url":"http://b0ef9220.ngrok.io","proto":"http","config":{"addr":"http://localhost:8080","inspect":true},"metrics":{"conns":{"count":0,"gauge":0,"rate1":0,"rate5":0,"rate15":0,"p50":0,"p90":0,"p95":0,"p99":0},"http":{"count":0,"rate1":0,"rate5":0,"rate15":0,"p50":0,"p90":0,"p95":0,"p99":0}}},{"name":"command_line","uri":"/api/tunnels/command_line","public_url":"https://b0ef9220.ngrok.io","proto":"https","config":{"addr":"http://localhost:8080","inspect":true},"metrics":{"conns":{"count":0,"gauge":0,"rate1":0,"rate5":0,"rate15":0,"p50":0,"p90":0,"p95":0,"p99":0},"http":{"count":0,"rate1":0,"rate5":0,"rate15":0,"p50":0,"p90":0,"p95":0,"p99":0}}}],"uri":"/api/tunnels"}
出力結果 jq 加工版
$ curl -s http://localhost:4040/api/tunnels | jq
{
"tunnels": [
{
"name": "command_line",
"uri": "/api/tunnels/command_line",
"public_url": "https://b0ef9220.ngrok.io",
"proto": "https",
"config": {
"addr": "http://localhost:8080",
"inspect": true
},
"metrics": {
"conns": {
"count": 0,
"gauge": 0,
"rate1": 0,
"rate5": 0,
"rate15": 0,
"p50": 0,
"p90": 0,
"p95": 0,
"p99": 0
},
"http": {
"count": 0,
"rate1": 0,
"rate5": 0,
"rate15": 0,
"p50": 0,
"p90": 0,
"p95": 0,
"p99": 0
}
}
},
{
"name": "command_line (http)",
"uri": "/api/tunnels/command_line%20%28http%29",
"public_url": "http://b0ef9220.ngrok.io",
"proto": "http",
"config": {
"addr": "http://localhost:8080",
"inspect": true
},
"metrics": {
"conns": {
"count": 0,
"gauge": 0,
"rate1": 0,
"rate5": 0,
"rate15": 0,
"p50": 0,
"p90": 0,
"p95": 0,
"p99": 0
},
"http": {
"count": 0,
"rate1": 0,
"rate5": 0,
"rate15": 0,
"p50": 0,
"p90": 0,
"p95": 0,
"p99": 0
}
}
}
],
"uri": "/api/tunnels"
}
以上、ngrok を使って Android, iOS アプリ開発を快適にやっていきたい、現場からお送りしました。