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

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

ngrok 的特性

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

ngrok 的工作原理

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

安裝與初始化

根據 Install ngrok 頁面的指南，使用適合自己的方式安裝 ngrok。

開始前必須先註冊帳號，在 ngrok 的網站登入後會看到一組 token：

拿這串 token 來做登入：

ngrok authtoken <TOKEN>

正確的話應該會看到一行寫著 authtoken 已被寫入 ngrok.yml 的訊息：

Authtoken saved to configuration file: /home/leon/.ngrok2/ngrok.yml

登入只要做一次就好，有這組 authtoken 才能去向 ngrok 伺服器要到一些後面操作會用到的的基本權限。

使用

假設電腦內已經有某個監聽 1111 埠的服務，例如用 Caddy server 提供的靜態網頁，而我們想要用 ngrok 讓 1111 埠也可以對外服務：

ngrok http 1111

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

ngrok by @inconshreveable

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

從上面的狀態畫面可以得知一些訊息，包括有一組 Web Interface，以及對外提供服務的 HTTP / HTTPS 網址。

是不是很簡單。

從上面可以看到，預設的節點是在美國，訪客透過 ngrok.io 網址連線會先到美國的節點，節點再把請求傳送到我們位於台灣的電腦，回覆的路徑也是相仿，如果追求更快的連線，可以改用 ngrok 位於東京的節點，指令稍微改一下即可：

ngrok http -region jp 1111

從狀態就可以看到變成東京節點了：

ngrok by @inconshreveable

Session Status      online
Account             Leon (Plan: Free)
Version             2.3.40
Region              Japan (jp)
Web Interface       http://127.0.0.1:4040
Forwarding          http://e25b.jp.ngrok.io -> http://localhost:1111
Forwarding          https://e25b.jp.ngrok.io -> http://localhost:1111

監控請求

在 ngrok 執行時的狀態訊息內，除了有網址之外，還有一個 Web Interface，我們可以透過這個 Web Interface 來監控往來的請求與回覆內容，包括 HTTP 檔頭與 body （payload）都可以檢視，對開發中的除錯是滿實用的工具。

結語

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

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