Xerixy Launch Kit
Astro SaaS 模板
前後端不必拆分,也能快速上線真正可用的 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 前伺服器再驗證一次。