使用 ngrok 服務讓人連線到你的 localhost 伺服器

Posted on  Dec 29, 2022  in  開發工具  by  Amo Chen  ‐ 3 min read

一般而言,開發應用程式(Application)的工作絕大多數都會在本機(localhost)上進行,如果要進行測試會將程式部署(deploy)到測試環境後,再進行測試。

但如果僅僅是一個最小可行性產品(MVP, Minimum Viable Product),或者是一個還在草稿(draft)階段的工作成果,又或者團隊沒有所謂的測試環境時,最不得已的方法就是開放本機(localhost)讓其他人連線進來進行 demo 或測試。

那要怎麼開放 localhost 讓其他人連線進來呢?

ngrok - put localhost on the internet 可能是你最方便又無痛的選項。

本文環境

  • macOS

ngrok 服務的運作原理

ngrok 服務的運作是基於 reverse tunneling 的技術,將遠端伺服器的指定 port 所收到的服務轉送(forwarding)到 localhost 上的指定 port, 例如將 ngrok.io 6789 port 所收到的 HTTP requests 轉送到 localhost 的 3000 port 。

此外, localhost 與遠端伺服器之間的連線,是由 localhost 所主動發起建立的,所以通常可以突破防火牆(firewall)的限制,讓其他人能夠透過 reverse tunneling 的技術連到 localhost 甚至是內網,因此在使用上需要注意衍生的資安問題,建議使用完 ngrok 一定要記得關掉

安裝 ngrok

ngrok 服務提供跨平台的 ngrok 指令供大家使用,目前主流的作業系統(macOS, Linux, Windows)都有支援。

可以在 ngrok - put localhost on the internet 註冊帳號完之後,在其頁面進行下載:

以 macOS 為例,下載完之後進行解壓縮,並將該執行檔(executable)放到路徑 /usr/local/bin/ 底下:

$ unzip /path/to/ngrok.zip
$ mv /path/to/ngrok /usr/local/bin/

認證(auth token)

每位 ngrok 使用者都有 1 組 auth token 需要認證,該 auth token 會在登入之後,顯示在 https://dashboard.ngrok.com/get-started/setup :

只要複製並貼上執行,即可完成設定:

$ ngrok config add-authtoken <your token>

接著就能夠開心使用 ngrok 了!

開放 HTTP 連線到 localhost

以開放 localhost 的 3000 通訊埠的 HTTP 連線為例,其指令為:

$ ngrok http 3000

如果想限制其他人必須輸入帳號密碼才能連線的話,可以加上 --basic-auth 參數:

$ ngrok http --basic-auth='<帳號>:<密碼>' 3000

p.s. 密碼長度須介於 8 - 128 字元

此外, ngrok 也支援 OAuth, OIDC, SAML SSO 等認證方式,有興趣的話可以使用 ngrok http --help 查看有哪些參數可以使用。

成功執行之後,會出現類似以下的畫面:

Visit http://localhost:4040/ to inspect, replay, and modify your requests

Session Status                online
Account                       ....... (Plan: Free)
Version                       3.1.0
Region                        Japan (jp)
Latency                       42ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://2c43-114-43-117-174.jp.ngrok.io -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              39      0       0.01    0.01    8.11    299.81

HTTP Requests
-------------

GET /_next/webpack-hmr         101 Switching Protocols

特別注意,上述畫面中的 Forwarding 一列中的 ngrok 網址:

https://2c43-114-43-117-174.jp.ngrok.io

該網址就是要提供他人連線到 localhost 的網址,其他人只要用瀏覽器(browser)打開該網址就能連到 localhost 的 3000 通訊埠,也就是 -> http://localhost:3000 所表示的意思。

另外, ngrok 會在 localhost 的 4040 通訊埠執行 Web UI, 只要以瀏覽器打開 http://localhost:4040 就能看到類似以下的畫面:

該 Web 管理介面可以看到 localhost 收到的 HTTP 要求(request)以及其詳細資訊(例如 HTTP headers), 以及可以重演(replay)發送該要求的功能,可以讓我們較好進行偵錯(debug)。

session 數限制

由於 ngrok 免費方案限制 ngrok agent 只能提供 1 個 session, 所以要建立超過 1 個的 session 時,就會出現以下錯誤:

ERROR:  Your account is limited to 1 simultaneous ngrok agent session.

如果有多個 session 的需求,建議可以付點錢升級至付費方案。

轉送 TCP networking

如果你開發的不是 HTTP 應用程式,可以改用 ngrok tcp <port> 指令進行轉送,例如:

$ ngrok tcp 22

編輯設定檔

如果想編輯 ngrok 設定檔,可以使用以下指令:

$ ngrok config edit

詳細設定項可參考 ngrok Agent Configuration File

設定 SSH 公鑰(Public Key)

ngrok 也提供以 SSH 直接進行 reverse tunneling 的功能,如此一來就不需要額外安裝 ngrok 指令,可以單純以 SSH 進行轉送。

只要將 SSH 公鑰在 https://dashboard.ngrok.com/tunnels/ssh-keys 頁面設定好之後:

就能用以下 SSH 指令做到跟 ngrok 指令一樣的事,例如轉送 HTTP 要求到 localhost:3000:

$ ssh -R 443:localhost:3000 tunnel.us.ngrok.com http

上述指令執行結果也會將 Forwarding 的網址顯示出來:

ngrok (via SSH) (Ctrl+C to quit)

Account     ...... (Plan: Free)
Region      us
Forwarding  https://97d4-114-43-117-174.ngrok.io

只要將 Forwarding 的網址交給其他人即可。

以上就是關於 ngrok 的詳細介紹。

Happy Coding!

References

https://ngrok.com/docs/

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!