Vercel 部署前端 — 把 LobeChat 公开门户跑在边缘
Chatwoot / Dify 是有状态后端不适合 Vercel，但 LobeChat 这类无状态前端在 Vercel 上一键部署、全球边缘、零运维。
Vercel (front-end only) 20 分钟
Vercel 的边界#
Vercel 适合无状态、短请求、边缘渲染的前端。AI 客服系统中：
| 组件 | 适合 Vercel 吗 |
|---|---|
| LobeChat（公开 AI 聊天门户） | ✓ 极适合 |
| Astro / Next.js 营销站 | ✓ 极适合 |
| Chatwoot（Rails + Sidekiq） | ✗ 有状态、长连接，不行 |
| Dify Web 控制台 | ✓ 但 API/Worker 必须另放 |
| Dify API（Python） | ✗ 需要长连接 + 队列 |
| n8n | ✗ 需要持久化 |
正确架构：前端（LobeChat / 营销站）放 Vercel，后端（Dify API、Chatwoot、n8n）放 Railway / fly.io / VPS。
部署 LobeChat 到 Vercel#
1. Fork 仓库#
打开 https://github.com/lobehub/lobe-chat → Fork 到你的 GitHub。
2. 导入到 Vercel#
https://vercel.com/new → Import Git Repository → 选你 Fork 的 repo。
Vercel 自动检测 Next.js 项目并生成默认配置。
3. 关键环境变量#
# 后端指向（必填）
OPENAI_API_KEY=app-xxxxxxxx # 实际是 Dify 应用 Key
OPENAI_PROXY_URL=https://dify.your.com/v1
# 数据库（用 Vercel Postgres 或外部 Supabase）
DATABASE_URL=postgresql://...
NEXTAUTH_SECRET=$(openssl rand -base64 32)
# OAuth（可选）
AUTH_GOOGLE_ID=...
AUTH_GOOGLE_SECRET=...
# 多模型（可选，让用户在 UI 里选）
ANTHROPIC_API_KEY=...
GROQ_API_KEY=...4. 部署 + 绑定域名#
点 Deploy。1-2 分钟后访问预览 URL，确认聊天正常。
Settings → Domains → 添加 chat.your.com，Vercel 自动 CNAME + TLS。
5. Vercel Functions 处理 Edge 逻辑#
LobeChat 用 Vercel Functions 处理 LLM streaming，默认 Fluid Compute（2026 默认），Node 24 LTS 全 Node API 可用，超时 300 秒。
成本估算#
| 资源 | 月费 |
|---|---|
| Vercel Hobby（个人） | $0 |
| Vercel Pro（团队） | $20 / seat |
| 后端 Dify（Railway / VPS） | $30-60 |
| LLM tokens | $10-50 |
| 合计 | $30-130 / 月 |
Hobby 限制：100GB 流量 / 月，不能商用——商业项目必须 Pro。
还能在 Vercel 跑什么#
- 营销站（如本站 flag92.com，Astro）—— 完美匹配
- 营销 + 博客（Next.js + MDX）
- Chatwoot Widget 嵌入 SDK 的脚本宿主
- Dify 应用的「自定义聊天 UI」前端
- Astro 的纯静态文档站
不适合 Vercel 的真实理由#
| 限制 | 影响 |
|---|---|
| 函数 300 秒超时 | LLM 长回答（5 分钟）会被切断 |
| 无原生 WebSocket | Chatwoot 的实时通讯不行 |
| 无持久磁盘 | 附件上传必须挂外部 S3 |
| 边缘函数无 IPv4 静态 | 邮件发送会被反垃圾标记 |
| 按用量计费 | 流量大时容易超预算 |
常见坑#
- OAuth 回调 URL：Vercel 的 preview 域名每个 PR 一个，OAuth Provider 要配通配符或单独白名单
- NEXTAUTH_URL：必须设为生产域名而非 vercel.app 子域
- 数据库连接池：用 Vercel Postgres 自带 PgBouncer，不要用直连
- 冷启动：Hobby 层闲置后冷启 1-3 秒；Pro 层减少明显