一般而言，開發應用程式(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/
