開源、輕量級的 Trello 替代方案,專為創作者與獨立駭客打造。
專注於簡單、快速及可擴展性。 採用現代技術棧構建:Tailwind CSS、shadcn/ui、Supabase、Stripe 整合。 支援無限專案、團隊協作、深色/淺色模式,並提供無縫的用戶體驗。 非常適合希望完全掌控而不需多餘複雜性的個人開發者及小型團隊。
🌟 如果你覺得這個專案有用,請幫忙點顆星!讓更多人可以發現它。
部署指南
概述
本應用現已採用本地 Next.js API 路由來取代 Supabase Edge Functions 以整合 Stripe。這使得部署更簡單,並可直接使用標準 .env 檔案進行設定。環境變數設置
1. 建立 .env.local 檔案
將.env.example 複製為 .env.local,並填入你的實際值:cp .env.example .env.local2. 必需的環境變數
#### Supabase 設定
NEXT_PUBLIC_SUPABASE_URL- 您的 Supabase 專案網址NEXT_PUBLIC_SUPABASE_ANON_KEY- 您的 Supabase 匿名金鑰SUPABASE_SERVICE_ROLE_KEY- 您的 Supabase 服務角色金鑰(僅限伺服器端)
STRIPE_SECRET_KEY- 您的 Stripe 密鑰(僅限伺服器端)NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY- 您的 Stripe 公開金鑰STRIPE_WEBHOOK_SECRET- 您的 Stripe webhook 密鑰
NEXT_PUBLIC_SITE_URL- 您的網站網址(用於正式環境)NEXTAUTH_URL- 您的網站網址(同上)NEXTAUTH_SECRET- NextAuth 用的隨機密鑰
本地開發
- 安裝相依套件:
npm install- 在
.env.local中設置您的環境變數 - 運行開發伺服器:
npm run dev- 使用 Stripe CLI 在本地測試 Stripe webhook:
stripe listen --forward-to localhost:3000/api/stripe/webhook生產部署
Vercel 部署
- 部署到 Vercel:
npx vercel
- 環境變數:
- Stripe Webhook 設定:
- Webhook 指向:
https://your-domain.vercel.app/api/stripe/webhook
API 端點
應用程式現在使用以下本地 API 路由:
POST /api/stripe/checkout- 建立 Stripe 結帳會話POST /api/stripe/webhook- 處理 Stripe webhook 事件
本地 API 路由的好處
- 更簡單的部署 - 無需部署獨立的邊緣函式
- 環境變數 - 標準 .env 檔案支援
- 更好的除錯 - 更容易在本地除錯
- 框架整合 - 與 Next.js 更佳整合
- 無廠商綁定 - 可部署至任何支援 Next.js 的平台
疑難排解
- Webhook 問題:
- 確保
STRIPE_WEBHOOK_SECRET與 Stripe webhook 端點一致 - 檢查 Stripe 控制台中的 webhook 日誌
- 驗證 webhook URL 是否正確
- 環境變數:
- 確保所有必要變數均已設定
- 檢查變數名稱有無拼寫錯誤
- 驗證 Supabase 服務角色金鑰權限正確
- CORS 問題:
- API 路由包含正確的 CORS 標頭
- 如有需要,確保您的網域已列入白名單
安全注意事項
- 絕不可將
STRIPE_SECRET_KEY或SUPABASE_SERVICE_ROLE_KEY暴露給用戶端 - 僅對用戶端變數使用
NEXT_PUBLIC_前綴 - 定期輪替 webhook 密鑰
- 在 Stripe 控制台監控 webhook 傳遞