21 · 部署集成（Vercel / Supabase）

从本地构建到全球部署，打通 Trae 到 Vercel + Supabase 的全链路

01 · 为什么需要部署集成

在之前的教程中，我们都在 Trae 的 Builder 和 SOLO 模式里开发和调试应用。本地跑得再好，终究只有你自己能看见。真正的产品需要上线，需要被用户访问，需要后端数据库存储数据，需要用户认证系统，还需要能够管理文件上传。

这就引出了部署集成的问题。Trae 作为 AI 驱动的 IDE，虽然本身不提供托管基础设施，但它与 Vercel（前端托管）和 Supabase（后端服务）形成了天然的铁三角：

这个组合的价值在于：你可以在 Trae 里用自然语言构建完整应用，然后一键或几键推送到生产环境，无需手动配置服务器、数据库或 CI/CD 流水线。

02 · 铁三角架构模型

在动手部署之前，先理解这三个工具之间的协作关系。下面是一个直观的架构图（文字版）：

┌─────────────────────────────────────────┐
│              Trae (开发阶段)              │
│  Builder / SOLO → 本地预览 + 调试        │
└────────────────┬────────────────────────┘
                 │  git push / CLI deploy
                 ▼
┌──────────────────────────────────────────┐
│              Vercel (前端层)              │
│  ┌─────────┐  ┌───────────────────┐     │
│  │ 静态资源 │  │ Serverless Functions│    │
│  │ (HTML/   │  │ (API Routes)      │     │
│  │  CSS/JS) │  │                   │     │
│  └─────────┘  └────────┬──────────┘     │
└────────────────────────┼────────────────┘
                         │ 连接到 Supabase
                         ▼
┌──────────────────────────────────────────┐
│           Supabase (后端层)               │
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌───────┐   │
│  │ Post- │ │ Auth │ │Storage│ │Realtime│  │
│  │greSQL│ │      │ │      │ │       │   │
│  └──────┘ └──────┘ └──────┘ └───────┘   │
└──────────────────────────────────────────┘

核心心智模型：分离但连接

• Vercel 负责”面子”：用户看到的界面、路由、前端交互
• Supabase 负责”里子”：用户数据、身份验证、文件存储
• Trae 是”工厂”：在本地完成所有开发和调试，然后交付给 Vercel 和 Supabase

这三者的配置信息通过环境变量来连接，就像电源线插头一样——Vercel 的 Function 通过环境变量拿到 Supabase 的 URL 和密钥，从而安全地访问数据库。

03 · 准备工作：在 Trae 中完成项目构建

在开始部署之前，确保你的项目已经可以通过 Trae 正常构建。在 Builder 或 SOLO 模式下，项目的目录结构大致如下：

my-app/
├── src/              # 源代码
├── public/           # 静态资源
├── package.json      # 依赖配置
├── next.config.js    # Next.js 配置（如果使用）
├── vite.config.ts    # Vite 配置（如果使用）
└── .env.local        # 本地环境变量（不提交到 Git）

关键检查清单：

1. ✅ npm run build 本地构建通过
2. ✅ npm run dev 本地运行正常
3. ✅ 项目有 package.json 且 start/build 脚本正确
4. ✅ 代码已初始化 Git 仓库
5. ✅ 敏感信息（API Key、数据库密码）不在代码中硬编码

如果项目还没准备好，在 Trae 的终端中运行：

# 确保项目可构建
npm run build
 
# 初始化 Git（如果尚未）
git init
git add .
git commit -m "初始提交：Trae 构建的应用"

注意：Vercel 从 Git 仓库拉取代码进行部署，所以 Git 提交是必要步骤。

04 · Vercel 部署：前端托管

4.1 注册并导入项目

打开 vercel.com ，用 GitHub/GitLab/Bitbucket 账号登录。登录后点击 Add New → Project。

Vercel 会自动列出你仓库平台上的项目。找到你在 Trae 中构建的那个项目，点击 Import。

4.2 框架自动检测

Vercel 会自动检测项目使用的框架（Next.js、Vite、Nuxt 等），并填写默认配置：

如果 Vercel 没有自动识别，手动确认一下：

• Framework Preset: 选择你使用的框架
• Build Command: npm run build
• Output Directory: 框架的输出目录
• Root Directory: 如果项目在仓库子目录（如 apps/web），填子目录路径

4.3 环境变量配置

这是最关键的一步。展开 Environment Variables，添加 Vercel 环境所需的变量。稍后我们从 Supabase 拿到值再回来填。

4.4 部署完成

点击 Deploy，等待约 1-3 分钟。部署完成后，你会得到一个类似 https://my-app.vercel.app 的预览 URL。

部署成功的标志：Vercel 控制台显示绿色勾号，下面的 “Domains” 列出你的预览域名。

05 · Supabase 部署：后端服务

5.1 创建项目

打开 supabase.com ，点击 Start a project 或 New Project。你需要：

• Name: 项目名称（如 my-app-db）
• Database Password: 设置一个强密码（记住它，用于直接连接数据库）
• Region: 选择离你的用户最近的区域（国内用户可选 Singapore 或 Tokyo）
• Pricing Plan: 免费版（Free）足够学习和原型验证

创建后等待约 2 分钟，Supabase 会完成 PostgreSQL 数据库的初始化。

5.2 获取连接信息

项目创建完成后，在左侧面板找到 Project Settings → API。这里有两组关键信息：

5.3 配置数据库表

回到 Table Editor，创建应用所需的表。如果你在 Trae 中用 SOLO 模式生成的后端代码已经包含了 SQL 建表语句，可以直接在 Supabase 的 SQL Editor 中运行：

-- 示例：用户笔记表
CREATE TABLE notes (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  content TEXT,
  user_id UUID REFERENCES auth.users(id) NOT NULL,
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now()
);
 
-- 开启 RLS（行级安全）
ALTER TABLE notes ENABLE ROW LEVEL SECURITY;
 
-- 用户只能查看自己的笔记
CREATE POLICY "用户只能查看自己的笔记" ON notes
  FOR SELECT USING (auth.uid() = user_id);
 
-- 用户只能插入自己的笔记
CREATE POLICY "用户只能插入自己的笔记" ON notes
  FOR INSERT WITH CHECK (auth.uid() = user_id);

RLS 小提示：Supabase 默认所有新表都对 public 可读。务必为每个表开启 RLS 并创建适当的策略，否则你的数据对互联网完全开放。

5.4 设置 Auth 认证

在左侧 Authentication → Providers 中，Supabase 默认开启了邮箱密码登录。如果需要第三方登录（Google、GitHub、微信等），在这里开启并填写对应的 OAuth 凭据。

5.5 Storage 存储桶

如果你需要文件上传功能，在 Storage 面板创建新的 bucket（存储桶）：

-- 通过 SQL 创建 storage bucket
INSERT INTO storage.buckets (id, name, public)
VALUES ('avatars', 'avatars', true);
 
-- 允许已认证用户上传自己的头像
CREATE POLICY "用户上传自己的头像" ON storage.objects
  FOR INSERT WITH CHECK (
    auth.uid() = owner
    AND bucket_id = 'avatars'
  );

06 · 连接 Vercel 和 Supabase：环境变量

现在回到 Vercel，把 Supabase 的连接信息注入到 Vercel 的环境中。

6.1 在 Vercel 设置环境变量

在 Vercel 项目页面中，进入 Settings → Environment Variables，添加以下变量：

命名规则的关键点：

• 以 NEXT_PUBLIC_ 前缀开头的变量会在前端代码中可用（Next.js 约定），最终会暴露给浏览器
• 不带 NEXT_PUBLIC_ 前缀的变量仅在 Serverless Functions 中可用
• 永远不要把 service_role key 放到 NEXT_PUBLIC_ 前缀的变量中——它拥有数据库超级权限，暴露出去等同于公开数据库

6.2 在代码中连接 Supabase

在你的前端项目中，通过环境变量读取这些值：

// src/lib/supabase.ts
import { createClient } from '@supabase/supabase-js'
 
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
 
export const supabase = createClient(supabaseUrl, supabaseAnonKey)

本地开发：在 .env.local 文件中填入相同的值，保持本地与生产环境一致。

6.3 部署 CLI 方式（可选）

如果你更习惯命令行，可以使用 Vercel CLI：

# 安装 Vercel CLI
npm i -g vercel
 
# 登录
vercel login
 
# 部署（会自动关联项目）
vercel
 
# 设置环境变量
vercel env add NEXT_PUBLIC_SUPABASE_URL
 
# 将变量同步到各环境
vercel env pull

Vercel CLI 的优势是可以集成到 Git hooks 中实现自动化部署。在 Trae 的终端中运行 vercel 命令，它会自动检测框架并完成部署，流程与 UI 操作完全一致。

07 · 部署预览 URL 与分支隔离

Vercel 最实用的功能之一是自动为每个 Git 分支生成预览 URL。

7.1 工作原理

当你推送代码到 GitHub 时：

1. 推送至 main 分支 → Vercel 自动部署到生产环境（my-app.vercel.app）
2. 推送至 feature/* 分支 → Vercel 自动创建预览部署，生成唯一的预览 URL
3. 在 PR 中发起合并请求 → Vercel 机器人会在 PR 评论区自动贴上预览链接

7.2 分支环境隔离

7.3 Preview 环境的环境变量

预览部署默认会继承生产环境的环境变量，但你也可以在 Vercel 的 Environment Variables 中单独为 Preview 环境设置不同的值（比如连接到测试数据库）。

08 · 一键部署：从 Trae 到云端的最快路径

如果你不想手动配置 Vercel 和 GitHub 的联动，Trae 的 Builder/SOLO 模式配合 Vercel 的一键部署按钮可以实现最快上线。

8.1 在 README 中添加 Deploy Button

许多从 Trae 构建的项目都会在 README 中加入 Vercel 的部署按钮：

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/your/repo)

点击这个按钮后，用户在 Vercel 上授权，选择仓库，Vercel 就会自动完成部署。这对开源项目尤其有用。

8.2 Vercel + Supabase 模板

对于需要同时部署前端的 Vercel 和后端的 Supabase 的项目，可以使用 Vercel 的集成模板。在创建 Vercel 项目时，选择 Deploy with Vercel 并关联 Supabase 项目，工具会自动完成环境变量的注入。

实际建议：手动连接虽然步骤多一些，但让你对整个配置有完全的控制。一键模板适用于快速原型，生产环境推荐手动配置。

09 · 回滚能力：出问题了怎么办

9.1 Vercel 回滚

Vercel 的每次部署都生成一个唯一的 Deployment ID。进入 Vercel Dashboard → Deployments，可以看到所有历史部署记录。回滚操作就是：

点击要回滚到的版本 → 右上角 "..." → Promote to Production

Vercel 的部署是不可变的（immutable）：一旦部署，之前的版本不会被覆写。这意味着：

• 你始终可以回到过去任何一次成功部署
• 每个部署都有完整的构建日志可查
• 回滚不影响正在进行的其他分支部署

9.2 Supabase 数据库回滚

Supabase 支持通过 Database → Backups 进行数据恢复：

• 免费版：提供定时备份（每日），可下载 .sql 文件
• 专业版以上：支持 Point-in-Time Recovery（按时间点恢复）

对于数据库结构变更，建议在 Supabase 的 SQL Editor 中保留迁移脚本，或者使用专门的数据库迁移工具：

# 使用 Supabase CLI 管理迁移
npx supabase migration new add_profile_table
npx supabase migration up

这样，当代码回滚到旧版本时，数据库结构也能同步回滚。

9.3 常见回滚场景对比

10 · 成本分析：花钱在哪些地方

10.1 Vercel 定价（2025/2026 年）

对于个人项目和学习阶段，Hobby 计划完全够用。

10.2 Supabase 定价

10.3 典型成本估算

省钱技巧：将数据库查询缓存到 CDN 可以减少 Supabase 的带宽消耗；使用 Vercel Edge Functions 替代 Serverless Functions 可以降低 Serverless 计算费用。

11 · 生产环境清单

上线前，逐一核对以下内容：

Vercel 侧

• 已配置自定义域名（可选，但推荐）
• 已设置环境变量（Production/Preview/Development 三个环境）
• 构建命令和输出目录正确
• 已配置 404 页面重定向
• 已开启 HTTPS（默认开启）

Supabase 侧

• 所有表已开启 RLS（行级安全）
• 数据库密码已更改（不是默认密码）
• Auth 提供商配置正确
• Storage bucket 权限已设置
• 已设置数据库备份

代码侧

• 没有硬编码的 API Key 或密钥
• .env.local 已加入 .gitignore
• service_role key 从未出现在前端代码中
• 错误处理在前端正确显示（而非堆栈信息）

12 · 常见问题排查

部署后页面白屏

检查：项目框架是否被 Vercel 正确识别？
→ 在 Vercel 项目 Settings → General 中检查 Framework Preset
→ 如果显示 "Other"，手动选择正确的框架

Supabase 连接被拒绝

检查：是否在 Vercel 环境变量中正确设置了 Supabase URL 和 Key？
→ 确认变量名和代码中读取的变量名完全一致（区分大小写）
→ 确认 anon key 不是 service_role key
→ 确认 Supabase 项目未暂停（免费版 7 天无活动会暂停）

Auth 登录成功但无法查询数据

检查：RLS 策略是否正确？
→ 首先在 Supabase SQL Editor 中关闭 RLS 测试查询是否正常
→ 确认 RLS 策略中使用了正确的 auth.uid() 函数
→ 检查认证 token 是否已在前端正确传递

Storage 文件上传 403

检查：Storage bucket 的 policy 是否设置？
→ 每个 bucket 都需要独立的 policy
→ 确认 policy 中引用了正确的 bucket_id

13 · 总结

核心观点：

1. Trae + Vercel + Supabase 构成了一个完整的全栈开发生态：Trae 负责构建，Vercel 负责前端分发，Supabase 负责后端服务
2. 环境变量是连接三者的桥梁，正确管理环境变量是部署集成中最关键的一环
3. 安全第一：RLS 策略、环境隔离、密钥管理——这些不是可选配的，是生产环境的基础要求
4. 成本可控：个人项目完全可以零成本起步，随着规模增长逐步升级到付费计划

一个朴素的心智模型：

把 Vercel 想象成你 app 的”前台大厅”，Supabase 是”后台档案室”。Trae 帮你设计和搭建了这两层的所有内容，然后你用 Git 作为传送带把图纸送过去。部署集成就是确保前台和后台之间那条通道畅通无阻。

下一步行动清单：

1. 在 Trae 中完成你的项目构建验证
2. 注册 Vercel 并部署前端
3. 注册 Supabase 并配置数据库
4. 通过环境变量连接两者
5. 测试完整的前后端交互流程
6. 配置自定义域名和 RLS 策略
7. 上线！

下一篇

22 · Monorepo 与多项目架构管理

在本篇的基础上，当我们从单个项目扩展到多个项目（前端、后台、移动端共享代码）时，Monorepo 策略和 Trae 如何管理多项目工作区将是你下一个要掌握的技能。

这篇文章通过 Trae Builder + Claude 生成，结合 Vercel 和 Supabase 官方文档最佳实践整理而成。如有更新，请以各平台最新文档为准。