我們如何構建 OneClick 平台
本文將詳細介紹 OneClick 平台的技術架構和實現方案。
專案背景
Vercel 提供了極致的開發體驗，但其定價策略對許多專案來說成本過高。而 Cloudflare 雖然提供了慷慨的免費額度，但需要投入大量時間來熟悉其平台特性。
基於這樣的背景，我們提出了一個想法：能否將 Vercel 的開發體驗帶到 Cloudflare 平台上？這就是 OneClick 專案的起源。
設計目標
我們的核心目標是基於 Cloudflare 的服務構建一個完整的應用程式開發平台。這是一個充滿挑戰的目標，需要我們：
- 保持 Vercel 級別的開發體驗
- 充分利用 Cloudflare 的全球基礎設施
- 確保平台的高性能和可擴展性
核心框架
- Next.js - React 應用程式框架（採用 App Router 架構）
- 使用 @cloudflare/next-on-pages 建構和部署 Next.js 應用程式
- 完整支援 Cloudflare Pages 平台的特性
- 實現接近 Vercel 的開發體驗
- Auth.js - Next.js 專用身份認證系統
- 支援魔術連結（Magic Link）登入
- 整合 GitHub OAuth 認證
- 自訂電子郵件範本及驗證流程
- Drizzle - 類型安全的 TypeScript ORM
- 專門優化過的 Cloudflare D1 資料庫存取層
- 完整的類型推導支援
- 高性能查詢建構器
- React-email - 基於 React 元件的電子郵件系統
- 可重複使用的電子郵件範本元件
- 支援驗證郵件、行銷郵件等多種場景
- 與 Postmark 完美整合
- MDX - 現代文件系統
- 支援在 Markdown 中無縫使用 React 元件
- 針對 Cloudflare 平台優化的客戶端渲染
- 自動程式碼高亮和語法檢查
- Wrangler - Cloudflare 開發工具鏈
- 完整的本地開發環境支援
- 簡化的部署和配置管理
- 實時日誌和調試能力
基礎設施
- Stripe - 企業級支付系統
- 安全的支付處理流程
- 完整的訂閱管理體系
- 自動化的發票和退款處理
- Cloudflare - 全球雲端運算平台
- Pages 用於全棧應用程式部署
- Workers 提供邊緣運算能力
- 全球 CDN 網路支援
- Postmark - 專業郵件服務
- 可靠的郵件投遞能力
- 詳細的發送狀態追蹤
- 郵件模板管理系統
- GitHub - 程式碼託管與 CI/CD
- 自動化的構建和部署流程
- 程式碼品質檢查
- 版本控制和協作管理
用戶界面
- Tailwind CSS - 實用優先的 CSS 框架
- 高效的響應式開發
- 可定製的設計系統
- 優化的構建輸出
- shadcn/ui - 高品質元件庫
- 基於 Radix UI 的可訪問性支援
- 完全可定製的元件 API
- 與 Tailwind 無縫整合
- Framer Motion - 動畫系統
- 流暢的頁面轉場效果
- 可互動的界面動畫
- 效能優化的動畫實現
- Lucide - 圖示系統
- 一致的設計語言
- 可定製的圖示樣式
- 優化的 SVG 實現
- next/font - 字型優化
- 自動字型子集化
- 內建的效能優化
- 零配置的字型載入
技術基礎設施
- TypeScript - 類型系統
- 嚴格的類型檢查
- 完整的 IDE 支援
- 自動化的文件生成
- Biome - 現代開發工具鏈
- 快速的程式碼格式化
- 智慧的程式碼分析
- 統一的編碼規範
- Turborepo + Turbopack - 構建系統
- 增量構建支援
- 智慧快取策略
- 優化的相依性管理
- tRPC、GraphQL - API 框架
- 端對端類型安全
- 自動化的 API 文件
- 優化的資料獲取
- TanStack - 開發工具集
- 響應式狀態管理
- 高效能資料表格
- 智慧資料快取
效能監控
- Analytics - 自研監控系統
- 基於 Cloudflare Analytics Engine
- 即時效能指標分析
- 自定義監控儀表板
- Bun - 現代開發執行環境
- 快速的套件管理
- 優化的構建效能
- 相容的 Node.js API
- Sentry - 錯誤監控
- 即時錯誤追蹤
- 效能瓶頸分析
- 使用者行為洞察
資料儲存
- Cloudflare D1 - SQL 資料庫
- SQLite 相容介面
- 自動備份機制
- 邊緣運算整合
- Cloudflare R2 - 物件儲存
- S3 相容介面
- 全球化儲存網路
- 智慧快取策略
開源計劃
OneClick 平台與 Saasfly 開源模板共享核心程式碼庫，我們的目標是：
- 為開發者提供高品質的開源解決方案
- 建立活躍的社群生態
- 持續改進開發體驗
通過這套完整的技術堆疊，我們成功地在 Cloudflare 平台上實現了媲美 Vercel 的開發體驗，同時保持了較低的營運成本。我們期待這個解決方案能幫助更多開發者構建他們的應用程式。