CodeNote

ngrok をインストール、起動、公開 URL の確認方法などをご紹介します。

• ngrok – secure introspectable tunnels to localhost

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

• http://localhost:4040/inspect/http
• http://localhost:4040/status

などの 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 アプリ開発を快適にやっていきたい、現場からお送りしました。

参考情報

• ngrokが便利すぎる – Qiita