ngrok 讓本機發佈出可被訪問的網址

最近湊巧看到了 ngrok 這樣的工具,覺得很實用,試著把它簡單介紹一下。

常常會遇到需要把本機開發環境的 web app 給別人或自己預覽,甚至開放給外網連入的需求,這時候就需要 ngrok 這樣的工具幫我們搞定這一切。

ngrok 的特性

  • 綁定本機的埠號並接受外部連入。
  • 可穿透 NAT 或防火牆讓外部連入。
  • 會拿到一個 ngork 的網址方便貼到信件或訊息內。
  • 有 web 界面讓我們可以監看連入的請求內容。
  • 可加設 HTTP 帳密認證,避免被不必要的人亂連。
  • 除了支援 HTTP 外,也支援 WebSocket 和 SSH。
  • 可同時發布多個服務。
  • 還支援 API,可以用 API 操控 ngork。
  • 付費方案可以自定網址。

ngrok 的工作原理

其實 ngrok 並未真正的穿透 NAT,它只是接受 ngork cloud 機台轉發來的請求並做出回應,而那個 ngrok 的網址其實也就是連到 ngrok cloud 的網址。

下載與初始化

ngrok 下載下來解壓縮只有單一個執行檔,不需要安裝,把執行檔移到自己喜歡的地方放,我是把它移到某個需要它的程式專案資料夾內。

開始前必須先註冊帳號,在 ngrok 的網站登入後會看到一組 token,拿這串 token 來做登入:

./ngrok authtoken <TOKEN>

一台電腦登入只要做一次就好,有這組 auth token 才能去向 ngrok 伺服器要到一些基本的權限。

使用

假設電腦內已經有某個監聽 1111 埠的服務,而我們想要用 ngrok 讓 1111 埠也可以對外服務:

./ngrok http 1111

此時會出現下面的狀態畫面:

ngrok by @inconshreveable                               (Ctrl+C to quit)

Session Status      online
Account             Leon H. (Plan: Free)
Version             2.3.35
Region              United States (us)
Web Interface       http://127.0.0.1:4040
Forwarding          http://1b0f8233f8de.ngrok.io -> http://localhost:1111
Forwarding          https://1b0f8233f8de.ngrok.io -> http://localhost:1111

Connections         ttl     opn     rt1     rt5     p50     p90
                    0       0       0.00    0.00    0.00    0.00

從上面的狀態畫面可以得知一些訊息,包括有一組 web 界面的網址,以及對外提供服務的網址。

是不是很簡單。

監控請求

在 ngrok 執行時的狀態訊息內,除了有網址之外,還有一個 Web Interface 在 http://127.0.0.1:4000,我們可以透過這個 Web Interface 來監控接收到的請求內容,對開發中的除錯是滿實用的工具。

結語

其實免費版能調用的設定不多,並且免費版最大的缺點就是那又亂又長的網址了吧,只有付費版支援自訂網址,還可以用自有的網域,不過免費版就滿適合我這種小資宅宅。

有一些我認為次要的功能就沒寫上來,或許之後有用到再說吧。