Vercel 部署
将 Next.js 项目部署到 Vercel，从零到上线的完整流程。自带 HTTPS、CDN 加速和自定义域名。
为什么选择 Vercel？
🚀
零配置部署
Next.js 原生支持，无需任何配置文件，push 即部署
🌐
全球 CDN
自动部署到全球边缘节点，用户就近访问，速度极快
🔒
免费 HTTPS
自动配置 SSL 证书，无需手动申请和维护
Vercel 是 Next.js 官方推荐的部署平台，个人项目免费，支持无限预览部署。
方式一：Vercel CLI 部署
最快速的方式，适合个人项目。一条命令从本地到上线。
步骤 1：安装 & 登录
# 登录 Vercel（会自动打开浏览器完成 OAuth 授权）
$ npx vercel login
Visit https://vercel.com/oauth/device?user_code=XXXX-XXXX
Waiting for authentication...
Congratulations! You are now signed in.
$ npx vercel login
Visit https://vercel.com/oauth/device?user_code=XXXX-XXXX
Waiting for authentication...
Congratulations! You are now signed in.
步骤 2：一键部署
# 部署（--yes 自动接受默认配置）
$ npx vercel --yes
> Auto-detected Project Settings for Next.js
Linked to scope/project-name
Deploying scope/project-name
Uploading [====================] (289.7KB/289.7KB)
Building...
✓ Compiled successfully in 4.9s
Build Completed in /vercel/output [24s]
Deployment completed
Production: https://project-name.vercel.app
$ npx vercel --yes
> Auto-detected Project Settings for Next.js
Linked to scope/project-name
Deploying scope/project-name
Uploading [====================] (289.7KB/289.7KB)
Building...
✓ Compiled successfully in 4.9s
Build Completed in /vercel/output [24s]
Deployment completed
Production: https://project-name.vercel.app
步骤 3：验证部署
# 检查部署是否成功
$ curl -s -o /dev/null -w "%{http_code}" https://project-name.vercel.app
200
$ curl -s -o /dev/null -w "%{http_code}" https://project-name.vercel.app
200
常用 CLI 命令
| 命令 | 说明 |
|---|---|
npx vercel --yes | 部署预览环境（默认） |
npx vercel --prod | 部署生产环境 |
npx vercel ls | 列出所有部署 |
npx vercel rm <url> | 删除某个部署 |
npx vercel env pull | 拉取环境变量到本地 .env.local |
npx vercel env add <name> | 添加环境变量 |
npx vercel link | 关联到已有项目 |
方式二：GitHub + 自动部署
推荐团队协作使用。每次 git push 自动触发部署，每次 PR 自动生成预览链接。
1
推送代码到 GitHub
git init
git add -A
git commit -m "feat: 初始提交"
git remote add origin git@github.com:用户名/仓库名.git
git push -u origin main2
在 Vercel 导入项目
打开 vercel.com → Add New Project → Import Git Repository → 选择仓库 → Deploy
3
完成！之后每次 push 自动部署
# 修改代码后
git add -A
git commit -m "feat: 更新内容"
git push # 自动触发部署 ✅💡
GitHub 方式支持 预览部署：每个 PR 都会自动生成一个独立的预览链接，合并后自动部署到生产环境。
绑定自定义域名
部署完成后，可以通过自己的域名访问网站。
1
在 Vercel 添加域名
- •打开 Vercel Dashboard → 项目 → Settings → Domains
- •点击 Add 按钮，输入你的域名（如 example.com）
- •Vercel 会显示需要配置的 DNS 记录
2
在域名服务商配置 DNS
- •CNAME 记录（推荐）：www → cname.vercel-dns.com
- •A 记录（根域名）：@ → 76.76.21.21
- •配置完成后等待 DNS 生效（通常几分钟）
3
验证
- •回到 Vercel Dashboard，域名状态变为 Valid
- •浏览器访问你的域名，确认能正常打开
- •HTTPS 证书会自动配置，无需手动操作
常见域名服务商：Cloudflare（免费且推荐）、阿里云万网、腾讯云 DNSPod、GoDaddy、Namecheap。操作步骤类似，找到 DNS 管理页面添加记录即可。
部署架构说明
用户请求
│
▼
┌──────────────┐
│ Vercel CDN │ ← 全球边缘节点，就近响应
│ (Edge) │
└──────┬───────┘
│
▼
┌──────────────────┐
│ 静态页面 (SSG) │ ← 直接返回，速度最快
│ API 路由 / SSR │ ← 按需调用 Serverless
└──────────────────┘
│
▼
┌──────────────────┐
│ Serverless │ ← 动态逻辑（API、数据库）
│ Functions │
└──────────────────┘
静态生成（SSG）
构建时预渲染所有页面，部署到 CDN。教程网站的所有页面都是 SSG，访问速度极快。
Serverless 函数
API 路由和动态页面按需执行，按调用次数和运行时间计费。个人项目通常用不到。
Vercel 免费版额度
| 资源 | 免费版额度 | 说明 |
|---|---|---|
| 项目数 | 无限 | 可以部署任意多个项目 |
| 部署次数 | 无限 | 每次 push 都自动部署 |
| 带宽 | 100 GB/月 | 个人网站绰绰有余 |
| Serverless 执行 | 100 GB-Hours | API 路由和 SSR 页面 |
| 自定义域名 | 无限 | 可以绑定任意多个域名 |
| HTTPS | 自动 | 无需手动配置 |
| 团队成员 | 1 人 | 个人使用免费 |