第 162 章:部署到 Vercel

学习目标

• 掌握 Vercel 一键部署
• 学会环境变量配置
• 理解自定义域名
• 学会预览部署

一、为什么选 Vercel

Vercel 是 Next.js 的开发团队,部署 Next.js 项目零配置。

优势:

• 零配置
• 全球 CDN
• 自动 HTTPS
• 预览部署(每个 PR)
• 免费额度:100 GB 流量/月

二、准备工作

2.1 项目结构

确保有 package.json 和 pnpm-lock.yaml(或 npm/yarn lockfile)。

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

2.2 推送 GitHub

git init
git add .
git commit -m "init"
git remote add origin https://github.com/your-name/repo.git
git push -u origin main

三、部署步骤

3.1 登录 Vercel

访问 https://vercel.com,用 GitHub 账号 登录。

3.2 导入项目

1. 点 "Add New Project"
2. 选择 GitHub 仓库
3. 点 "Import"

3.3 配置(基本无需改)

字段	默认值
Framework Preset	Next.js(自动识别)
Root Directory	./
Build Command	next build(默认)
Output Directory	.next(默认)
Install Command	pnpm install

3.4 部署

点 "Deploy",等待 1-2 分钟,完成后会得到 https://xxx.vercel.app。

四、环境变量

4.1 在 Vercel 设置

1. 进入项目 → Settings → Environment Variables
2. 添加变量

Key	Value	Environment
DATABASE_URL	postgres://...	Production, Preview
JWT_SECRET	xxx	All
NEXT_PUBLIC_API_URL	https://api.x.com	All

以 NEXT_PUBLIC_ 开头的变量会暴露到客户端。

4.2 在代码使用

// 服务端
const dbUrl = process.env.DATABASE_URL;

// 客户端(必须 NEXT_PUBLIC_ 前缀)
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

五、自定义域名

5.1 添加域名

1. 项目 → Settings → Domains
2. 输入 example.com
3. 按提示配置 DNS:

# 在域名注册商添加
A      @    76.76.21.21
CNAME  www  cname.vercel-dns.com

5.2 自动 SSL

Vercel 自动签发 Let's Encrypt 证书,5-10 分钟生效。

六、预览部署

每个 Git 分支 / PR 都有独立预览 URL。

# 创建分支
git checkout -b feature/new-page
git push origin feature/new-page
# Vercel 自动部署,URL:feature-new-page-xxx.vercel.app

七、CI/CD 流程

八、vercel.json 配置

{
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-store" }
      ]
    }
  ],
  "redirects": [
    { "source": "/old", "destination": "/new", "permanent": true }
  ]
}

九、性能监控

Vercel 提供:

• Web Analytics(网站分析)
• Speed Insights(性能指标)
• Runtime Logs(运行时日志)

项目 → Analytics 标签查看。

十、替代方案

平台	优势	适合
Vercel	零配置,Next.js 最佳	Next.js 项目
Cloudflare Pages	免费,全球边缘	静态/SSR 通用
Netlify	生态丰富	JAMStack
自建 Docker	完全控制	企业级

十一、回滚

项目 → Deployments → 找到历史版本 → Promote to Production。

十二、本章小结

步骤	关键
推送代码	GitHub
导入项目	Vercel 控制台
环境变量	Settings 配置
自定义域名	DNS 解析
预览部署	每分支独立

动手练习

1. 推送一个 Next.js 项目到 GitHub
2. 部署到 Vercel
3. 添加自定义域名
4. 配置环境变量
5. 创建分支看预览部署

推荐阅读

• 📖 Vercel 文档
• 📖 部署 Next.js

---

下一章:第 163 章:Vitest 测试 →