今日目標

經過前面 25 天的奮戰，我們從需求分析、資料庫設計、全棧 API 開發、SSE 串流 AI 回應，一路到資安稽核、Docker 容器化與 CI/CD 自動化測試。今天，我們迎來了全棧專案最令人興奮的里程碑——正式部署上雲（0 to Production）！

在 Vibe Coding 模式下，我們不僅要讓本地程式碼順利在雲端運作，更要打造一個具備生產級（Production-ready）品質的高可用架構：

1. 資料庫層（Supabase / Neon PostgreSQL）：完成雲端 PostgreSQL 託管與 SSL 安全連線。
2. 應用層（Vercel / Render）：自動讀取 GitHub 儲存庫，綁定域名與 HTTPS，完成無縫 CI/CD 自動部署。
3. 自動 Migration 腳本：讓資料庫 Schema 的更新與 Web 部署無縫同步。

今天我們將帶著 AI 扮演我們的 Cloud Architect（雲端架構師），一步步將我們的 AI 個人財務追蹤器推向全世界！

Human vs. AI 實戰記錄

部署上雲是許多新手工程師的終極噩夢：環境變數漏設定、CORS 跨域被擋、SSL 連線失敗、或是 Serverless Function 逾時（Timeout）。AI 雖然能秒出 Vercel 設定檔或部署腳本，但往往會忽略雲端 Serverless 環境與傳統伺服器的運行差異。

1. 給 AI 的指令 (Prompt)

我們請 AI 幫我們規劃將 Next.js + Prisma + NextAuth + OpenAI API 專案部署到 Vercel（前身 Serverless 託管）與 Neon PostgreSQL（雲端 Serverless 資料庫）的最佳建置指令與環境變數清單。

你是一位資深 Devops 與 雲端架構師 (Cloud Architect)。
請幫我規劃將 Next.js (App Router + Prisma ORM) 專案部署至 Vercel，並連結 Neon PostgreSQL 雲端資料庫的正式部署步驟。

需求如下：
1. 提供 `package.json` 中的 `scripts` 設定，確保 Vercel 在執行 `build` 前，自動執行 `prisma generate` 與 `prisma migrate deploy`。
2. 撰寫 `vercel.json` 最佳化配置（包含 Function Timeout 設定以支援 LLM Streaming 回應）。
3. 列出 Vercel Dashboard 中必須設定的正式環境變數 (Environment Variables) 檢查清單。

2. AI 產出的結果 (Code)

// AI 生成的 vercel.json
{
  "version": 2,
  "buildCommand": "npx prisma migrate deploy && next build",
  "functions": {
    "app/api/**/*": {
      "maxDuration": 60
    }
  }
}

// AI 修改的 package.json scripts
{
  "scripts": {
    "dev": "next dev",
    "build": "prisma generate && next build",
    "start": "next start"
  }
}

3. 做出的修正與翻車紀錄 (Debug Experience)

這套設定看起來一應俱全，但在 Vercel 點擊 Deploy 後，面板立刻跳出紅色的 Deployment Failed！

翻車點一：Vercel Build 階段因為 Direct Database Connection 爆掉

AI 建議在 Vercel 的 buildCommand 直接跑 npx prisma migrate deploy。然而，像 Neon 或 Supabase 這類 Serverless PostgreSQL 資料庫，為了應付高併發通常會使用 Connection Pooling (PgBouncer)。

Prisma 在執行 migrate（DDL 操作）時不支援連線池，必須使用直接連線（Direct Connection String）。AI 沒有區分 DATABASE_URL 與 DIRECT_URL，導致 Vercel 在 Build 階段因為試圖透過 Connection Pool 執行 Migration 而引發 PrismaClientInitializationError: Transactional response Error！

翻車點二：Serverless SSE 串流回應逾時 (Function Timeout) 與 CORS / NextAuth 域名失效

1. Streaming Cut off：當使用者在線上詢問 AI 複雜財務分析時，SSE 串流回應播到一半突然斷線。原因在於 Vercel 免費版/預設 Serverless Function 限制單次響應最多 10-15 秒，AI 在 vercel.json 寫的 maxDuration: 60 需要搭上 Next.js Route Config 設定，單寫 JSON 在新版 App Router 無法生效！
2. NextAuth 登入重定向崩潰：部署後點擊 Google/Auth0 登入卻回跳至 http://localhost:3000。原因在於正式環境缺少 NEXTAUTH_URL 與 NEXTAUTH_SECRET 綁定正式網址。

介入修復！

我們介入調整了資料庫連線架構與 Next.js App Router 的專屬配置：

1. 雙資料庫連線網址（Pooled vs Direct）：在 Prisma 配置中拆分 url（連線池）與 directUrl（直接連線）。
2. 優化 Deployment Script：利用 Vercel 的 postinstall 勾子自動產生 Prisma Client，並將 prisma migrate deploy 放進獨立 CI 或 Post-build 步驟。
3. 修正 App Router 專屬 Route Segment Config：在 SSE API 檔案中直接宣告 export const maxDuration = 60; 與 export const dynamic = 'force-dynamic';。

修正後的配置：

prisma/schema.prisma 修正：

datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")      // 使用 Connection Pool 網址 (用於一般 API 查詢)
  directUrl = env("DIRECT_URL")        // 使用 Direct 網址 (用於 Prisma Migration)
}

app/api/ai-analyze/route.ts 修正（解決 Serverless 串流逾時）：

import { NextResponse } from 'next/server';

// 關鍵：明確告之 Vercel Serverless Function 延長執行上限與取消靜態快取
export const maxDuration = 60; // 允許 Max 60 秒 (需 Vercel Pro/Hobby 對應支援)
export const dynamic = 'force-dynamic';

export async function POST(req: Request) {
  // SSE Streaming 邏輯...
}

package.json 指令配置：

{
  "name": "ai-finance-tracker",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "postinstall": "prisma generate",
    "build": "next build",
    "db:migrate:prod": "prisma migrate deploy",
    "start": "next start"
  }
}

JavaScript / AI 學習小結

1. Serverless 架構下的「資料庫連線管理」是上雲首要課題：
   傳統伺服器（如 EC2 / Docker 容器）可以維持長連線（Persistent Connection）；但 Serverless（Vercel Function）隨開隨關，瞬間產生的數百個 Function 會瞬間擠爆資料庫連線數。學會配置 Connection Pooler (Neon/Supabase) 與 Prisma 的 directUrl 是全棧工程師必備的實戰技能。
2. AI 不懂雲端託管平台的版本變遷：
   AI 常常給出舊版（Pages Router 時代）的 vercel.json 參數。但在 Next.js App Router 當道的今天，像是 maxDuration 或 dynamic 設定都已經移到了 API Route 檔案內的 Route Segment Config。工程師必須掌握最新官方文件的標準，才能為 AI 的產出除錯。

當畫面上跳出 "Congratulations! Your project is live." 的綠色勾勾，我們的 AI 個人財務追蹤器正式擁有了公開網址！