X

Xerixy Launch Kit

Astro SaaS 模板

Lang 繁體中文
Cloudflare 原生 MVP

前後端不必拆分,也能快速上線真正可用的 SaaS 介面。

這個 starter 把 Astro SSR、React islands、D1 持久化、R2 媒體分發,以及可直接部署的 Wrangler 設定放進同一個專案。它夠有主張,能快速交付 MVP;也夠輕,方便你繼續改造成下一個產品。

執行環境

Workers SSR

資料庫

D1 + Drizzle

儲存

透過 Worker 路由存取 R2

R2 空狀態

你的落地頁視覺素材會顯示在這裡。

頁面已經在查詢 Cloudflare R2 儲存桶中的 `landing-page/` 前綴。設定好 `R2_BUCKET_NAME` 後執行 `pnpm r2:seed`,即可上傳示例 SVG 資源。

模板已內建

一套真正理解 Cloudflare 的技術棧。

這個模板把關鍵職責切得很清楚:Wrangler 管綁定,Drizzle 管 schema,Astro 管渲染,React 只為真正需要互動的部分做 hydration。

透過 Drizzle 串好 D1

Schema、遷移與真實的線索收集 API 都已就緒,可直接接上遠端 Wrangler 工作流。

行銷素材由 R2 提供

落地頁資源透過 Worker 路由從 Cloudflare R2 取得,快取與存取策略都由你掌控。

下一階段可直接接入認證

Better Auth 已安裝並保留伺服器入口與開關,不會阻礙目前 MVP 的交付。

上線路徑

為 MVP 設計的遠端優先操作方式。

這些腳本刻意貼近 Cloudflare 的實際工作流:用 Drizzle Kit 產生 SQL,用 Wrangler 執行遷移,遠端查看 D1,並在同一個倉庫中初始化 R2 內容。

更新占位的 D1 與 R2 綁定後,以 `wrangler deploy` 直接部署。

執行 `pnpm r2:seed` 上傳示例 SVG 圖庫,驗證 R2 取用流程。

拿到真實資料庫 ID 後,對 D1 執行 `pnpm db:migrate:remote`。

線索流程

把聯絡資訊直接收進 D1。

這個示例表單展示完整流程:React island 先在瀏覽器做驗證,Astro 在 Workers 上處理請求,再由 Drizzle 把線索寫入 Cloudflare D1。

內建 SEO 能力

  • Canonical、Open Graph、Twitter Card 與結構化資料。
  • 獨立的 `robots.txt`、`sitemap.xml` 與 SVG 社群分享圖端點。
  • 語意化標題結構,以及來自程式碼中繼資料的伺服器端圖片 alt 文字。
線索收集

不需要拆出獨立後端,也能收集真實購買意圖。

這個 React island 會直接提交到 Cloudflare Workers 上的 Astro API 路由。瀏覽器先驗證一次,寫入 D1 前伺服器再驗證一次。

表單回應會直接寫入 Cloudflare D1。Better Auth 與防垃圾擴充點保留到下一輪迭代。