常常會遇到需要把本機開發環境的 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)都可以檢視,對開發中的除錯是滿實用的工具。
結語
其實免費版能調用的設定不多,並且免費版最大的缺點就是那又亂又長的網址了吧,只有付費版支援自訂網址,還可以用自有的網域,不過免費版就滿適合我這種小資宅宅。
有一些我認為次要的功能就沒寫上來,或許之後有用到再說吧。
Top comments (0)