Vercel 部署指南

本文档介绍如何使用 Vercel 部署 Vibany 项目，这是最推荐的部署方式。

Vercel 简介

Vercel 是 Next.js 的创建者提供的托管平台，提供：

Serverless 部署：自动扩缩容，按使用量付费
全球 CDN：静态资源全球加速
Git 集成：自动部署，预览环境
Cron Jobs：定时任务（付费账号）

账号类型对比

功能	免费账号 (Hobby)	付费账号 (Pro)
价格	免费	$20/月
函数执行时间	10 秒（硬限制）	900 秒
Cron Jobs	❌ 不支持	✅ 支持
Fluid Compute	通常不可用	✅ 支持
带宽	100GB/月	1TB/月

免费账号部署

1. 准备工作

# 确保没有 vercel.json 文件（免费账号不支持）
rm -f vercel.json

# 保留 example 文件不动
ls -la vercel.json.example

2. 注册 Vercel 账号

访问 https://vercel.com
使用 GitHub 账号登录（推荐）

3. 导入项目

方式一：GitHub 集成（推荐）

在 Vercel Dashboard 点击 "Add New Project"
选择 "Import Git Repository"
选择你的 GitHub 仓库
点击 "Import"

方式二：Vercel CLI

# 安装 Vercel CLI
npm install -g vercel

# 登录
vercel login

# 部署
vercel --prod

4. 配置环境变量

在 Vercel Dashboard → Project Settings → Environment Variables 中添加所有必需变量：

# 基础配置
NEXT_PUBLIC_APP_URL=https://yourdomain.com
TIMEOUT_SECONDS=60

# 数据库
DATABASE_URL=postgresql://...

# Clerk 认证
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/login
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/register
CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/draw
CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/draw

# AI API
TUZI_API_KEY=sk-...
TUZI_API_URL=https://api.tu-zi.com/v1

# 存储
R2_ACCOUNT_ID=...
R2_ACCESS_KEY_ID=...
R2_SECRET_ACCESS_KEY=...
R2_BUCKET_NAME=...
R2_PUBLIC_URL_PREFIX=https://...

# 支付（可选）
PAY_API_URL=https://api.dulupay.com
PAY_PID=...
PAY_PUBLIC_KEY=...
PAY_MERCHANT_PRIVATE_KEY=...

5. 部署

GitHub 集成会自动部署。CLI 部署运行：

vercel --prod

6. 免费账号限制

函数执行超时：

免费账号限制 10 秒
AI 图像生成可能需要更长时间
建议升级到 Pro 或优化代码

无 Cron Jobs：

无法使用定时任务
需要手动执行清理任务
或使用外部定时任务服务

付费账号 (Pro) 部署

1. 升级账号

访问 Vercel Pricing
选择 Pro 计划
完成付款

2. 启用 vercel.json

mv vercel.json.example vercel.json

vercel.json 包含以下配置：

{
  "functions": {
    "app/api/**/*": {
      "maxDuration": 800
    }
  },
  "crons": [
    {
      "path": "/api/public/clear",
      "schedule": "*/5 * * * *"
    },
    {
      "path": "/api/public/backup?type=hourly",
      "schedule": "0 * * * *"
    },
    {
      "path": "/api/public/backup/fix",
      "schedule": "15,45 * * * *"
    }
  ]
}

3. 开启 Fluid Compute

进入 Vercel Dashboard → 项目 → Settings → Functions
开启 "Fluid Compute"
这将提供更好的性能和更长的执行时间

4. 更新环境变量

TIMEOUT_SECONDS=790
CRON_SECRET=your_random_secret_key

5. 重新部署

vercel --prod

自定义域名配置

1. 添加域名

在 Vercel Dashboard → 项目 → Settings → Domains
输入你的域名（如 yourdomain.com）
点击 "Add"

2. 配置 DNS

Vercel 会提供 DNS 记录配置：

方式一：A 记录

Type: A
Name: @
Value: 76.76.21.21

方式二：CNAME 记录（推荐）

Type: CNAME
Name: www
Value: cname.vercel-dns.com

3. 等待生效

DNS 传播通常需要几分钟到几小时。Vercel 会自动配置 SSL 证书。

环境变量管理

开发环境变量

NEXT_PUBLIC_DEBUG=true
NEXT_PUBLIC_APP_URL=http://localhost:3000

预览环境变量

Vercel 为每个 PR 创建预览环境：

NEXT_PUBLIC_APP_URL=https://preview-url.vercel.app

生产环境变量

NODE_ENV=production
NEXT_PUBLIC_APP_URL=https://yourdomain.com
NEXT_PUBLIC_DEBUG=

部署检查清单

免费账号检查

付费账号检查

故障排除

部署失败

错误：Function duration exceeded

免费账号：函数执行超过 10 秒
解决：升级到 Pro 或优化代码

错误：Cannot find module

依赖未正确安装
解决：检查 package.json，重新部署

错误：Build failed

构建脚本错误
解决：本地运行 npm run build 测试

运行时错误

502 Bad Gateway

函数崩溃或超时
解决：检查函数日志，优化代码

404 Not Found

路由配置错误
解决：检查文件路径和路由配置

CORS 错误

跨域配置问题
解决：检查 Clerk 和 API 的 CORS 配置

性能问题

冷启动慢

Serverless 函数冷启动
解决：开启 Fluid Compute（付费账号）

API 响应慢

数据库连接慢
解决：使用连接池，优化查询

费用优化建议

合理使用函数时长：不要设置过长的超时时间
启用缓存：使用 Next.js 缓存机制
优化图片：使用 Next.js Image 组件
监控使用：定期检查 Functions 使用情况

升级指南

从免费升级到 Pro

访问 Vercel Pricing
选择 Pro 计划
将 vercel.json.example 重命名为 vercel.json
开启 Fluid Compute
更新 TIMEOUT_SECONDS=790
重新部署