Webflow Cloud Apps：可在任何域名上部署

AI 討論
1

了解如何將 Next.js 或 Astro 應用程式部署到 Webflow Cloud，並在自訂域名或 Webflow 網站旁邊運行，享受完整的儲存、環境變數與日誌功能。

Webflow Cloud Apps：可在任何域名上部署

Webflow Cloud 讓開發者可以將 Next.js 或 Astro 專案直接部署到自訂域名，或與 Webflow 網站共存，無需額外的主機或服務。以下說明如何開始、支援的應用類型，以及 Cloud 所提供的功能。

什麼是 Webflow Cloud App？

  • 定義：任何使用 Next.js 或 Astro 等 JavaScript 框架構建，並部署到 Webflow Cloud 的專案，都被視為 Webflow Cloud App。
  • 特點：
    • 透過 Git 推送自動部署。
    • 支援多環境（可使用 Git 分支）。
    • 完整的執行時環境、日誌與儲存。

如何開始使用 Webflow Cloud Apps

1. 從 Webflow UI 開始

  1. 進入 專案儀表板。
  2. 點擊 Create new app。
  3. 連結你的 GitHub 帳號。
  4. 選擇：
    • Import an existing repo：將現有的 Next.js / Astro 專案匯入。
    • One‑click deploy a starter：從 Webflow 提供的範本快速啟動。
  5. 選擇部署位置：
    • Own domain：部署到獨立域名。
    • Alongside existing Webflow site：與現有 Webflow 網站共存。
  6. 點擊 Deploy，Webflow 會構建並提供一個可直接使用的 URL。

2. 從命令列啟動

# 初始化新專案（使用 Next.js 或 Astro 範本）
webflow cloud init

# 部署已建好的專案
webflow cloud deploy

init 會根據 UI 的流程產生範本並連結到新的 Cloud 專案；deploy 會將你已經在 GitHub 上的專案推送到 Cloud。

支援的應用類型

  • Next.js：SSR、API 路由、靜態生成。
  • Astro：靜態網站生成器，支援多種前端框架。
  • 其他可擴充框架：Webflow 正在逐步加入更多框架支援。

Webflow Cloud 提供的功能

功能 說明
部署 Git 推送即構建，支援多環境。
儲存 3 種儲存層：
- Key‑Value Store（小型設定、會話、功能旗標）
- Object Storage（圖片、PDF、檔案）
- SQLite Database（關聯資料）
環境變數 明文與加密密鑰，方便在不同環境使用。
日誌 產生即時執行時日誌，支援實時串流。
DevLink 將 Webflow 設計元件匯出為 React/JSX，讓 Cloud App 能直接使用相同的 UI 元件，實現「單一設計源」的體驗。

一個工作區，一個平台

Webflow Cloud 讓你在同一個工作區內管理：

  • Webflow 網站
  • Cloud App（獨立域名或共存）
  • 儲存、環境變數、日誌、部署等所有基礎設施

這樣你只需關注應用程式本身，而不必再維護多個主機或服務。

開始部署

只要把專案推送到 main 分支，Webflow 會自動構建並部署，讓你快速看到變更。若你使用自訂域名，請在 Cloud 專案設定中添加對應的 DNS 記錄。

參考文件