在 ServBay 中設定 Ngrok 反向代理服務指南

Ngrok 是一款功能強大的工具，可讓您將本機執行的 Web 服務安全公開到全球網際網路。當 Ngrok 集成於 ServBay 之後，您可以輕易為本機開發的網站建立安全的公網訪問隧道，非常適合用於專案演示、Webhook 測試或與團隊外部成員共用開發成果。本指南將詳細說明如何在 ServBay 中設定及使用 Ngrok 反向代理服務。

概述

ServBay 內建對 Ngrok 的支援，大幅簡化了其安裝與設定流程。您可以直接於 ServBay 圖形介面中管理 Ngrok 隧道，輕鬆將在 ServBay 主機上的任一本機網站對應至臨時產生的公網網址 (URL)。

應用場景

• 客戶演示： 在本機電腦上運行的開發網站即時向客戶展示。
• Webhook 開發： 測試需要公開回呼網址的第三方服務（如支付閘道、API）。
• 行動裝置測試： 讓行動裝置可經由公網 URL 存取本機後端 API。
• 協作開發： 臨時與團隊成員共用本機開發環境存取權限。

前置條件

1. 已安裝 ServBay： 請確保您的 macOS 系統已經成功安裝並運行 ServBay。
2. Ngrok 帳號： 需要一個 Ngrok 帳號。可前往 Ngrok 官方網站 註冊免費或付費帳號。
3. 本機網站： 至少需在 ServBay 中新增並運行一個本機網站，例如 servbay.demo。

操作步驟

1. 在 ServBay 中安裝 Ngrok 軟體包

第一次使用 Ngrok 前，請先於 ServBay 安裝 Ngrok：

1. 開啟 ServBay 應用程式。
2. 在左側導覽欄點擊 軟體包 (Packages)。
3. 在套件清單中尋找或搜尋 Ngrok。
4. 點擊 Ngrok 旁的安裝按鈕。
5. 安裝後，嘗試點擊 Ngrok 右側的啟動開關。因為尚未設定 Ngrok，服務可能會啟動失敗或顯示異常狀態。此為正常現象，我們會在接下來的步驟完成設定。

2. 取得您的 Ngrok Authtoken

Ngrok 需透過 Authtoken 驗證帳號並授權服務存取。

1. 前往 Ngrok Dashboard 並登入 Ngrok 帳號。

2. 登入後，在儀表板左側導航找到 Your Authtoken（「Getting Started」->「Your Authtoken」）。

3. 複製您的 Authtoken。這是一串較長的字元，請妥善保存。

   

3. 在 ServBay 中設定 Ngrok

取得 Authtoken 後，回到 ServBay 進行設定：

1. 在 ServBay 左側導航欄點擊 Tunnel。

2. 於 Tunnel 服務列表中選取 ngrok。

   

3. Auth Token（授權令牌）：

   • 在 Auth Token 輸入框貼上剛才複製的 Ngrok Authtoken。

4. 設定隧道（Local Domain 與 External Domain）： ServBay 可讓您為多個本機網站建立 Ngrok 隧道。

   • Local Domain（本機網站）：
     • 點擊下拉選單，選擇您欲經由 Ngrok 公開的本機網站。此列表會自動載入已加至 ServBay 的網站，如 servbay.test 或 servbay.demo。
   • External Domain（外部網域）：
     • Ngrok 免費用戶： 請將此欄位留白。 Ngrok 會自動為隧道產生一組隨機、以 .ngrok-free.app（或其他 Ngrok 提供的免費網域後綴）結尾的公開網址。ServBay 於隧道成功啟動後，會自動顯示此生成網址。
     • Ngrok 付費用戶： 若您在 Ngrok 帳號設定了自訂網域或保留網域，可於此輸入想要的外部網域。

5. 新增多個隧道：

   • 如需為多個本機網站建立隧道，可點選已新增隧道右側的 +（加號）按鈕，新增一組設定，依前述步驟分別設定本機網站及外部網域。

6. 儲存設定：

   • 全部設定完成後，點擊右下角 Save（儲存） 按鈕。

4. 啟動並驗證 Ngrok 服務

1. 確認設定已儲存後，ServBay 會自動執行新的 Ngrok 設定來啟動服務。
2. 觀察 ngrok 服務條目旁的狀態指示燈。若設定無誤且服務連線正常，指示燈應變為綠色，代表服務運行中。
3. 各個已成功啟動的隧道條目中，External Domain 欄位（若此前為空）會自動顯示 Ngrok 分配的公網網址。
4. 驗證訪問：
   • 可點選外部網域旁的 複製圖示，方便複製該網址。
   • 或點選 瀏覽器圖示（通常是一個指南針或地球），直接於預設瀏覽器開啟該公網網址。
   • 若一切設定正確，將能經由 Ngrok URL 成功訪問到您的本機網站。

5. 管理 Ngrok 隧道

於 ServBay 的 Ngrok 設定畫面中：

• 複製外部網域： 點擊複製圖示，便於分享網址。
• 瀏覽器開啟網址： 點擊瀏覽器圖示，快速測試公開網址。
• 新增隧道： 點擊 + 圖示。
• 移除隧道： 點擊 -（減號）圖示，移除不再需要的隧道設定。
• 停止服務： 可點擊 ngrok 服務條目旁的開關停止整個 Ngrok 服務。再次點擊即會嘗試重新啟動。

注意事項

• Ngrok 免費版限制： 免費版產生的外部網域為動態網址，每次重啟 Ngrok 服務或隧道時可能改變。同時免費版對連線數、頻寬及使用時間有諸多限制。若需固定網域或進階功能，建議升級至 Ngrok 付費方案。
• 本機服務狀態： 請務必確認於 Local Domain 選擇的本機網站在 ServBay 已正常運作（如對應之 PHP 版本、Web 伺服器如 Nginx/Apache 已啟動且網站設定正確）。Ngrok 僅負責流量轉發，並無法啟動或修復本機服務。
• 防火牆設定： 請確認 macOS 防火牆或第三方安全軟體未阻擋 ServBay 或 Ngrok 的網路連線。
• HTTPS 支援： Ngrok 隧道預設即支援 HTTPS，對於現代網頁開發及測試尤為便利。

常見問題 (FAQ)

• Q: Ngrok 服務啟動失敗，狀態燈為紅色或橙色怎麼辦？
  • A: 請先檢查 Ngrok Authtoken 是否正確填寫。再確認您的網路連線正常，能順利訪問 Ngrok 官方網站。也可點選服務右側的 log 圖示檢查詳細日誌內容以獲取錯誤原因。
• Q: 我是 Ngrok 免費用戶，為什麼 External Domain 欄位是空的或顯示「Leave blank if you're a free user」？
  • A: 這是正常現象，免費用戶無需填寫此欄位。隧道成功啟動後，ServBay 會自動從 Ngrok 取得分配給您的隨機公開網址並顯示於該欄。
• Q: 我可以同時使用 Ngrok 及其他隧道服務（如 frp、Cloudflared）嗎？
  • A: ServBay 允許安裝和設定多種隧道服務。一般建議根據需求選擇啟用一種或多種。多個隧道服務同時將同一網站公開可能造成設定複雜或互相衝突，請務必審慎配置並清楚網路路由細節。

小結

經由 ServBay 對 Ngrok 的整合，Web 開發者可大幅簡化在 macOS 上將本機開發網站公開到網際網路的操作流程。無論進行即時產品演示、Webhook 集成測試，或團隊協作共用，ServBay 的 Ngrok 隧道功能都能提供便捷高效的解決方案。請依帳號型態（免費/付費）正確設定外部網域，並務必確保本機網站正常運行。