71 - Vercel 部署全攻略

适用人群：前端/全栈开发者

难度：低

预计学习时间：3-5小时

Vercel 是什么？

Vercel 是前端部署平台，也是 Next.js 的创建者。支持一键部署前端项目，提供全球CDN、自动HTTPS、预览部署、Serverless Functions等能力。

支持的框架

部署步骤

# 方式1：Git集成（推荐）
1. 代码推送到 GitHub/GitLab/Bitbucket
2. 登录 vercel.com
3. 点击 "New Project"
4. 选择仓库，点击 "Deploy"
5. 等待30秒，完成！

# 方式2：Vercel CLI
npm i -g vercel
vercel login
vercel              # 部署到预览环境
vercel --prod       # 部署到生产环境
vercel env add      # 添加环境变量

Serverless Functions

// app/api/hello/route.ts (Next.js App Router)
import { NextResponse } from 'next/server'

export async function GET() {
  return NextResponse.json({ message: 'Hello from Vercel!' })
}

export async function POST(request: Request) {
  const body = await request.json()
  return NextResponse.json({ received: body })
}

// api/user.ts (传统方式)
import type { VercelRequest, VercelResponse } from '@vercel/node'

export default function handler(req: VercelRequest, res: VercelResponse) {
  res.status(200).json({ name: 'John Doe' })
}

// Edge Function
// app/api/edge/route.ts
export const runtime = 'edge'

export async function GET(request: Request) {
  return new Response('Hello from Edge!')
}

环境变量

# 在Vercel Dashboard设置
# Settings → Environment Variables

# 或使用CLI
vercel env add DATABASE_URL
# 选择环境：Production / Preview / Development

# 在代码中使用
const dbUrl = process.env.DATABASE_URL

# .env.local 用于本地开发
DATABASE_URL=postgresql://...
NEXT_PUBLIC_API_URL=https://api.example.com

自定义域名

步骤：
1. Settings → Domains
2. 输入你的域名
3. 配置DNS：
   - A记录：76.76.21.21
   - 或CNAME记录：cname.vercel-dns.com
4. SSL证书自动签发
5. 完成！

免费套餐限制

最佳实践

1. 使用 monorepo 管理多个项目
2. 利用预览部署进行PR Review
3. 使用环境变量管理配置
4. 开启Web Analytics监控
5. 使用ISR减少构建次数
6. 配置Edge Middleware做A/B测试
7. 使用Vercel KV/Postgres作为数据库