DEV Community

Cover image for ngrok 讓本機發佈出可被訪問的網址
Leon
Leon

Posted on • Originally published at editor.leonh.space

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:

ngrok authtoken

拿這串 token 來做登入:

ngrok authtoken <TOKEN>
Enter fullscreen mode Exit fullscreen mode

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

Authtoken saved to configuration file: /home/leon/.ngrok2/ngrok.yml
Enter fullscreen mode Exit fullscreen mode

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

使用

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

ngrok http 1111
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

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

是不是很簡單。

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

ngrok http -region jp 1111
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

監控請求

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

結語

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

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

Top comments (0)