Vercel 部署

可选的 Vercel 部署路径,覆盖项目导入、环境变量、Preview、域名和边缘防护。

Vercel 是 01MVP 的可选部署路径。它适合需要 Preview Deployment、团队协作流,或已经把项目运行在 Vercel 上的团队。

当前默认生产路径是 Zeabur 部署 + Cloudflare。只有在项目明确依赖 Vercel Preview 或现有团队流程时,才需要走本页。

导入项目

连接 Git 仓库

登录 Vercel Dashboard,点击 "Add New Project",选择 GitHub 或 GitLab 仓库并授权。

配置 Root Directory

推荐把 Root Directory 设为:

apps/01mvp-web

这样 Vercel 会自动识别 Next.js 项目,构建命令默认为 pnpm build,输出目录为 .next

如果 Root Directory 保持为仓库根目录,需要手动设置构建命令:

pnpm --filter 01mvp-web build

输出目录设为:

apps/01mvp-web/.next

选择 Framework Preset

如果使用推荐的 Root Directory,Vercel 通常会自动识别为 Next.js。如果没有自动识别,手动选择 "Next.js"。

Node.js 版本使用 22.x。

配置环境变量

在导入项目时展开 "Environment Variables",添加生产环境必填变量。完整清单见部署指南

点击 Deploy

等待构建完成后检查日志,确认 Next.js 构建通过,并且运行时能读取 DATABASE_URL 和鉴权变量。

环境变量作用域

在 Vercel Dashboard 中进入项目 Settings > Environment Variables 页面配置变量。

环境说明
Production推送到生产分支时使用
PreviewPR Preview 和非生产分支部署时使用
Development本地 vercel dev 时使用,通常用 .env.local 代替

Preview 部署不会自动回退到 Production 变量。如果 Preview 环境缺少 DATABASE_URLBETTER_AUTH_SECRET 等核心变量,预览环境会直接报错。

推荐生产变量

DATABASE_URL=postgresql://user:pass@host:5432/prod?sslmode=require
BETTER_AUTH_SECRET=your-strong-secret
BETTER_AUTH_URL=https://your-domain.com
NEXT_PUBLIC_SITE_URL=https://your-domain.com
OPENAI_API_KEY=sk-...
EDGE_WAF_PROVIDER=vercel
EDGE_WAF_CONFIGURED=true

存储、OAuth、支付和邮件变量按实际启用功能补充。

Production 和 Preview

维度ProductionPreview
数据库生产数据库,独立实例测试数据库或开发库
域名自定义域名*.vercel.app 或预览域名
Auth URL生产域名Preview 域名
OAuth 回调生产回调地址需在第三方平台注册 Preview 回调地址
支付 Webhook生产 Webhook测试或沙箱 Webhook
环境变量Production 作用域Preview 作用域

自定义域名

在 Vercel 添加域名

进入项目 Settings > Domains,输入你的域名,点击 Add。

配置 DNS 记录

根据 Vercel 提示,在 DNS 提供商处添加记录:

类型: CNAME
名称: www
值: cname.vercel-dns.com

根域名通常使用:

类型: A
名称: @
值: 76.76.21.21

等待证书签发

DNS 生效后,Vercel 会自动签发 HTTPS 证书。访问生产域名,确认页面可打开且浏览器无安全警告。

更新站点变量

域名确认后,把生产环境变量更新为:

BETTER_AUTH_URL=https://your-domain.com
NEXT_PUBLIC_SITE_URL=https://your-domain.com

修改变量后需要重新部署。

如果域名同时经过 Cloudflare 代理,SSL/TLS 模式使用 "Full" 或 "Full (Strict)",避免代理到 Vercel 时出现重定向循环。

边缘 WAF / DDoS 防护

应用里的 RATE_LIMIT_STORE=postgres、Turnstile captcha 和 Hono rate limit 只能处理已经到达应用的请求。真正的 DDoS 和大规模机器人流量要在边缘层先拦截。

生产环境通常二选一:

  • 应用直接部署在 Vercel:优先用 Vercel Firewall
  • 域名流量先经过 Cloudflare 代理:用 Cloudflare WAF / DDoS Protection

Vercel 的 DDoS Mitigation 对所有部署自动生效;WAF 负责项目级自定义规则、IP blocking、rate limiting 和 challenge。入口在项目 Dashboard 的 Firewall 页面。

打开 Firewall

进入 Vercel Dashboard,选择项目,打开 Firewall。先查看 Traffic 和 Events,确认正常用户、搜索引擎和 API 请求的大致分布。

配置高风险路径规则

推荐先用 Log 或 429 观察,再逐步改成 Challenge 或 Deny。

路径建议规则说明
/api/auth/*Rate Limit,按 IP 计数登录、注册、OTP、密码重置入口
/api/ai/*Rate Limit,按 IP 或 JA4 计数AI 功能会消耗成本
/api/uploads/*/api/feedbackRate Limit 或 Challenge防止上传和表单提交被刷
/wp-*/.env/phpmyadmin*Deny常见扫描器路径

不要对 /api/payments/webhook/* 使用浏览器 Challenge。支付 webhook 应由应用层签名验证保护。

发布并观察

Vercel Firewall 规则发布后会在全球边缘生效。上线初期建议至少观察一天 Firewall Events,再提高规则强度。

更新生产环境变量

确认规则已经生效后,把生产环境变量设为:

EDGE_WAF_PROVIDER=vercel
EDGE_WAF_CONFIGURED=true
RATE_LIMIT_ENABLED=true
RATE_LIMIT_STORE=postgres

然后重新部署,并运行:

cd apps/01mvp-web
SECURITY_CHECK_ENV=production pnpm security:check -- --strict

参考:Vercel DDoS MitigationVercel WAFWAF Rate Limiting

如果域名通过 Cloudflare 代理访问 Vercel,Cloudflare 会先接住流量。此时可以把 Cloudflare 作为主要边缘防护层,Vercel Firewall 只保留默认防护和必要兜底规则。

确认 DNS 和 SSL 模式

在 Cloudflare DNS 中确认生产域名记录是橙色云朵代理状态。SSL/TLS 模式使用 Full (Strict)

启用 Managed Rules

进入 Security > WAF > Managed rules。按计划可用范围启用 Free Managed Ruleset、Cloudflare Managed Ruleset 或 OWASP Core Ruleset。

添加 Rate limiting rules

进入 Security > WAF > Rate limiting rules,给高风险路径添加规则。常用表达式:

starts_with(http.request.uri.path, "/api/auth/")
http.request.uri.path in {"/api/ai/image" "/api/ai/video"}
starts_with(http.request.uri.path, "/api/uploads/") or http.request.uri.path eq "/api/feedback"

上线初期先用 Log 或 Managed Challenge 观察,再按真实流量调阈值。

排除不能 Challenge 的入口

支付 webhook、OAuth callback、服务端到服务端 API 不适合浏览器 Challenge。对这些入口依赖签名校验、token、IP allowlist 或宽松 rate limit。

更新生产环境变量

确认 Cloudflare 规则已经生效后,把生产环境变量设为:

EDGE_WAF_PROVIDER=cloudflare
EDGE_WAF_CONFIGURED=true
RATE_LIMIT_ENABLED=true
RATE_LIMIT_STORE=postgres

参考:Cloudflare WAFManaged RulesRate limiting rulesDDoS Protection

不要同时让 Vercel 和 Cloudflare 执行强 Challenge。上线初期让其中一层拦截,另一层只做 Log 或 Analytics,避免误伤 OAuth、支付 webhook、移动端 API 和搜索引擎。

常见问题

上线检查

  • Root Directory 设为 apps/01mvp-web,或构建命令已手动设置
  • Node.js 版本为 22.x
  • Production 和 Preview 环境变量都已配置
  • 生产域名已绑定并签发 HTTPS
  • BETTER_AUTH_URLNEXT_PUBLIC_SITE_URL 指向生产域名
  • 生产 migration 已先于应用部署执行
  • Firewall 或 Cloudflare WAF 已配置