Web (Gateway) 配置與存取指南

每次部署完後端服務或機器人，最麻煩的就是想看一眼目前的狀態卻得翻遍 Log。如果能有一個簡單的 Web 介面直接操作，而且還不用煩惱複雜的網路穿透或權限設定，開發體驗會好很多。

OpenClaw Gateway 內建了一個輕量化的 Control UI（基於 Vite 與 Lit），讓你直接透過瀏覽器就能管理。

需要準備的東西

只要 dist/control-ui 資料夾中有編譯好的檔案，Gateway 預設就會啟動 Web 介面。

{
  gateway: {
    controlUi: { enabled: true, basePath: "/openclaw" }, // basePath 為選填
  },
}

這是最推薦的遠端存取方式，你可以選擇以下幾種模式：

將 Gateway 保持在 loopback，並讓 Tailscale Serve 負責代理：

{
  gateway: {
    bind: "loopback",
    tailscale: { mode: "serve" },
  },
}

啟動 Gateway：

openclaw gateway

接著存取：https://<magicdns>/。

如果你想直接綁定到 Tailnet IP：

{
  gateway: {
    bind: "tailnet",
    controlUi: { enabled: true },
    auth: { mode: "token", token: "your-token" },
  },
}

啟動 Gateway（非 loopback 綁定必須提供 token）：

openclaw gateway

接著存取：http://<tailscale-ip>:18789/。

如果你需要從公網存取，可以使用 Funnel 模式：

{
  gateway: {
    bind: "loopback",
    tailscale: { mode: "funnel" },
    auth: { mode: "password" }, // 或使用 OPENCLAW_GATEWAY_PASSWORD 環境變數
  }
}

如果瀏覽器無法開啟介面，可能是因為 dist/control-ui 尚未編譯。你可以執行以下指令來手動編譯：

pnpm ui:build # 第一次執行會自動安裝 UI 相關依賴

Gateway 預設開啟身份驗證。非 loopback 的綁定必須提供 Token 或密碼。
如果使用 Tailscale Serve 且 gateway.auth.allowTailscale 為 true，則可以透過 Tailscale 身份標頭通過驗證。
Control UI 會發送 anti-clickjacking 標頭，且除非設定了 gateway.controlUi.allowedOrigins，否則只接受同源的 WebSocket 連線。

請確認你的設定檔中已開啟 Hook 功能：

如果你在設定過程中遇到任何問題，可以直接詢問 AI Setup Assistant。

OpenClaw Expert

如果這篇文件沒有解決你的情境，直接問 OpenClaw Expert，拿到可執行步驟。