前言

今次分享一下最近整嘅 CRM 系統嘅整體架構。

系統架構圖

CRM System Architecture

技術棧

層面 技術
前端框架 React + TypeScript + Vite
後端數據庫 Supabase (PostgreSQL)
部署平台 Vercel
版本控制 GitHub (Private Repository)

開發流程

1. 本地開發

  • 開發者喺本地環境 (localhost:5173) 進行開發
  • 連接到 Supabase DEV 數據庫
  • 方便調試同快速迭代

2. 提交與預覽

  • 開發完成後，推送到 GitHub feature branch
  • Vercel 自動創建 unique preview URL
  • Preview 環境連接 DEV 數據庫，方便測試

3. 生產發布

  • PR 合併到 main branch
  • Vercel 自動部署到 Production
  • Production 環境連接 PROD 數據庫

環境隔離策略

  • DEV 環境：用於日常開發同預覽測試
  • PROD 環境：用於正式生產數據
  • 兩者完全隔離，避免意外修改生產數據

總結

呢個架構嘅優點：

  • ✅ 開發效率高（本地快速迭代）
  • ✅ 安全性好（敏感資料唔會喺 GitHub 出現）
  • ✅ 部署流程自動化（GitHub 連接 Vercel）
  • ✅ 環境隔離（DEV/PROD 分開）