hansun

architects
ナレッジ一覧へ戻る
網站建置與部署

HanSun 網站從零建置與部署技術手冊|Next.js、Supabase、Vercel 與 Agent Workflow

學員專屬網站建置與部署技術手冊,整理 Next.js、Supabase、報名金流、Vercel、QA、資安與 Agent Workflow,從零建立可維運的 HanSun 網站。

2026-10-15
HanSun Architects | AI Workflow Handbook
+300 XP · ログインして記事を読むと XP を獲得できます
Contents

目次

01你會學到什麼
02一、從零開始的建置順序
03二、系統與資料流
04三、資料庫與 Migration
05四、報名、價格與折價券 Workflow
06五、金流與通知
07六、Vercel 部署流程
08七、QA、Agent Workflow 與安全交接
09學員實作檢查清單
10參考文件
Chapter 01

你會學到什麼

  • -Next.js App Router、TypeScript 與模組化專案結構
  • -Supabase PostgreSQL、Storage 與 Migration 管理
  • -課程、報名、價格、折價券與付款快照
  • -Stripe、LINE Pay、ATM 轉帳與 Email/LINE 通知
  • -Vercel Preview、Production、監控與回滾
  • -Claude Code、Codex 與 Agent Workflow
  • -Secret、個資、付款資料與 CSV 匯出的安全邊界
Chapter 02

一、從零開始的建置順序

  1. 01安裝 Node.js 20 以上、Git,建立 GitHub repository。
  2. 02建立 Supabase project、Vercel project,以及必要的付款、通知與 Turnstile 服務。
  3. 03建立 Next.js + TypeScript 專案,加入 next-intl、Supabase、Stripe、Nodemailer、lucide-react、framer-motion 與 Tailwind CSS。
  4. 04先完成資料模型與 db adapter,再做 UI;先完成課程 CRUD,再做報名表。
  5. 05先完成後端價格計算,再接前台價格顯示;建立 pricing snapshot,再做匯出與對帳。
  6. 06跑測試腳本與 npm run build,最後才部署 Production。
Chapter 03

二、系統與資料流

系統以 Next.js App Router 為主體,Vercel 負責部署,Supabase 負責資料庫與檔案儲存,並可整合 Stripe、LINE Pay、ATM、Email、LINE 與後台管理。

正式報名流程必須由後端重新計算價格、驗證折價券,並將結果寫入 registration 與 pricing_snapshot。前端顯示金額只能視為預估值,不能作為付款或對帳基準。

Chapter 04

三、資料庫與 Migration

  • -courses:課程、價格、早鳥、團報、容量與狀態
  • -registrations:報名、付款狀態、charged_amount、折價券與 soft delete
  • -registration_events:報名與通知事件
  • -registration_verification_*:後台自動核對與人工標註
  • -CMS、lecturers、projects、news、careers:公開內容與管理資料

Migration 應依序在 Supabase SQL Editor 或 migration workflow 套用,Production 不應直接手動修改資料表結構。

Chapter 05

四、報名、價格與折價券 Workflow

每堂課可以有自己的單人價、早鳥價、雙人價與三人價。後端依序讀取課程設定、判斷早鳥與團報、驗證獎學金/折價券、計算 subtotal/discount/total、寫入 pricing snapshot;後續付款、學生看板、匯出與對帳都以 snapshot 為準。

Chapter 06

五、金流與通知

ATM/銀行轉帳先是 pending,學員填入匯款末五碼,後台核對入帳後才標記 paid 並寄送成功通知。

Stripe/LINE Pay 的 Payment Intent、request、confirm 與 webhook 都必須驗證金額、currency、courseId、email 與 webhook secret。所有 secret 只放在 server environment。

Chapter 07

六、Vercel 部署流程

  1. 01GitHub repository 使用 private repository 與明確的 production branch。
  2. 02在 Vercel 設定必要 Environment Variables。
  3. 03在 Supabase 套用 migration、建立 Storage bucket 與 RLS。
  4. 04本機執行 npm run build。
  5. 05Push 到 production branch,等待 Deployment completed。
  6. 06執行首頁、課程頁、報名、學生登入、後台登入與匯出 smoke test。
  7. 07發生問題時先看 build log,再本機重現;回滾應回到上一個已驗證版本。
Chapter 08

七、QA、Agent Workflow 與安全交接

  • -學員看板金額錯誤:檢查 registrationid、chargedamount、couponused 與 pricingsnapshot。
  • -匯款金額不一致:以 paid 與 charged_amount 對帳。
  • -重複報名:保留最新且有付款證據的資料,舊 pending 使用 soft delete。
  • -新增 API route 前先定義 auth、rate limit、error handling 與 logging。
  • -不得在 client component 引入 Service Role 或 server-only secret。
  • -禁止把 .env.local、API key、Service Role、Webhook secret、JWT secret、學生個資、銀行帳戶與交易證明放進 Word、Git、聊天或截圖。
Chapter 09

學員實作檢查清單

  • -[ ] 建立 GitHub、Supabase、Vercel 與必要服務帳號
  • -[ ] 建立 .env.example,只保留變數名稱與 placeholder
  • -[ ] 套用 migration、Storage 與 RLS
  • -[ ] 完成課程 CRUD、報名、價格計算與 pricing snapshot
  • -[ ] 完成付款 webhook 與通知驗證
  • -[ ] 執行 build、測試與 smoke test
  • -[ ] 確認 production secret 與個資未進入 client bundle
  • -[ ] 建立 rollback owner 與事故聯絡流程

網站從零建置部署技術手冊 前往 Google Drive 下載

Chapter 10

參考文件

  • -原始技術手冊:HanSun網站從零建置部署技術手冊2026-06-09_fixed.docx
  • -HanSun Architects:https://www.hansunarchitects.com/
  • -Next.js:https://nextjs.org/docs
  • -Supabase:https://supabase.com/docs
  • -Vercel:https://vercel.com/docs
  • -Stripe:https://docs.stripe.com/
  • -LINE Developers:https://developers.line.biz/
Official LINE

HanSun Architects 公式 LINE

新しいナレッジ記事、講座情報、デザインワークフローの案内を受け取るには、公式 LINE をご利用ください。

公式 LINE を追加

安全のため、カード番号、ワンタイムパスワード、アカウントのパスワードは送信しないでください。HanSun Architects が LINE で振込やパスワードを求めることはありません。

HanSun Architects 公式 LINE QR コード