Vercel 完全指南从零到精通的保姆级教程账号注册 · 部署实战 · 费用预算 · 平台对比 · 避坑指南

📊 Vercel 是什么？一句话说清

Vercel = 全球CDN + 自动CI/CD + 免费SSL + Serverless函数，一个平台搞定前端部署所有事！

Hobby $0 永久免费 · 100GB带宽 · 100小时构建 · 个人项目首选

Pro $20/人/月 · 1TB带宽 · 团队协作 · 专业开发者

Enterprise $20,000+/年起 · 99.99% SLA · SSO/SCIM · 企业级安全

// 安装 Vercel CLI

npm i -g vercel

// 部署到预览环境

vercel

// 部署到生产环境

vercel --prod

// 拉取环境变量到本地

vercel env pull

★ GitHub（强烈推荐） — 授权后可直接导入仓库

✦ GitLab — 支持私有部署的 GitLab

✦ Bitbucket — Atlassian 生态用户

"The easiest way to deploy is with a single git push."

「最简单的部署方式就是一次 git push。」— Vercel 官方

⚠️ 常见注册问题

问题1：GitHub 授权后显示"认证未通过"

→ 解决：访问 github.com/apps/vercel 点击 Install，或换个邮箱重新注册 GitHub

问题2：收不到短信验证码

→ 解决：检查垃圾短信、等待 1-2 分钟、尝试重新发送

✅ 注册完成！看到 Dashboard 界面就说明注册成功了，接下来开始部署你的第一个项目！

🔍 Vercel 自动检测示例

检测到：Next.js

框架预设：Next.js

构建命令：next build

输出目录：.next

# 进入项目目录

cd my-project

# 登录 Vercel

vercel login

# 一键部署

vercel

⚠️ 国内访问提醒：*.vercel.app 域名在国内部分地区可能被屏蔽，强烈建议绑定自己的域名！

✅ 免费版包含：

✦ 100 GB 带宽/月

✦ 100 小时 构建时间/月

✦ 100 万次 Serverless 函数调用/月

✦ 100 次 部署/天

✦ 无限 个人项目

✦ 自动 HTTPS、全球 CDN、Preview 部署

❌ 免费版限制：

✦ 仅限非商业用途

✦ 函数执行时间最长 10 秒

✦ 并发构建 1 个

✦ 达到限额后无法超额付费，只能升级

带宽超额 · $0.15/GB（Pro 计划 1TB 后）

函数调用超额 · $0.60/百万次

额外并发构建 · $50/个/月

Web Analytics · $0.00003/事件

"Start free, pay as you grow."

「先免费开始，成长后再付费。」— Vercel 的定价哲学

👤 个人博客/作品集

预算：$0 — Hobby 免费版完全够用

🚀 独立开发者 SaaS

预算：$20-50/月 — Pro 计划 + 适量超额

👥 小型团队（3-5人）

预算：$60-100/月 — Pro 计划 × 团队人数

💡 省钱技巧：Vercel 默认消费预算是 $200，可以在 Settings → Billing → Spend Management 设置硬性限制，达到 100% 时自动暂停项目，防止意外超支！

Vercel 优势：

✦ Next.js 亲儿子，集成最深 ✦ 开发体验丝滑 ✦ Preview 部署强大

Cloudflare 优势：

✦ 带宽完全免费 ✦ 300+ 边缘节点 ✦ Workers 生态强

Vercel 优势：

✦ 部署速度更快 ✦ 函数冷启动更短 ✦ ISR/SSR 更成熟

Netlify 优势：

✦ 内置表单处理 ✦ 插件生态丰富 ✦ JAMstack 老牌

"Choose Vercel for DX, Cloudflare for scale, Netlify for JAMstack."

「选 Vercel 看重开发体验，选 Cloudflare 看重扩展性，选 Netlify 玩 JAMstack。」

✅ 优点（真香警告）

✦ 零配置部署 — 导入仓库，点击 Deploy，完事

✦ 自动 CI/CD — git push 自动触发构建部署

✦ Preview 部署 — 每个 PR 自动生成预览链接

✦ 全球 CDN — 100+ 边缘节点，访问飞快

✦ 免费 SSL — 自动申请 Let's Encrypt 证书

✦ Serverless 函数 — 无需服务器跑后端 API

✦ Next.js 深度集成 — ISR、SSR、Edge Functions 一键开启

❌ 缺点（避坑指南）

✦ 国内访问问题 — *.vercel.app 域名部分地区被墙

✦ 高流量成本高 — 带宽超额 $0.15/GB 比 Cloudflare 贵

✦ 函数时间限制 — Hobby 版最长 10 秒，Pro 版最长 800 秒

✦ 文件上传限制 — 单文件最大 4.5 MB

✦ 数据库停服 — Vercel Postgres/KV 已迁移至第三方

✦ 厂商锁定风险 — 深度使用后迁移成本较高

"Vercel is amazing for DX, but watch your costs at scale."

「Vercel 的开发体验无敌，但流量大了要盯紧账单。」

{

"buildCommand": "npm run build",

"outputDirectory": "dist",

"redirects": [

{ "source": "/old", "destination": "/new", "permanent": true }

],

"headers": [

{ "source": "/(.*)", "headers": [{ "key": "X-Frame-Options", "value": "DENY" }] }

]

}

Production — 正式环境 → myapp.com

Preview — PR 预览 → myapp-pr-123.vercel.app

Development — 本地开发 → localhost:3000

Serverless Functions（Node.js）

冷启动 100-1000ms · 单区域 · 完整 Node API · 最长 800秒

Edge Functions（V8）

冷启动 <50ms · 全球边缘 · Web APIs · 适合认证/重定向

💡 选择原则：需要完整 Node.js 或长时间执行 → Serverless；追求最低延迟 → Edge

Q1：部署失败怎么办？

A：检查构建日志，常见原因：① 依赖安装失败 → 删除 package-lock.json 重试 ② 环境变量缺失 ③ 构建命令/输出目录配置错误

Q2：国内访问慢或打不开？

A：*.vercel.app 域名部分地区被墙，解决方案：① 绑定自己的域名 ② 使用 Cloudflare CDN 加速

Q3：函数超时怎么解决？

A：① 升级 Pro 计划获得更长执行时间 ② 优化代码逻辑 ③ 使用后台任务 + Webhook 回调

Q4：怎么回滚到之前的版本？

A：进入 Dashboard → Deployments → 找到历史部署 → 点击右侧三个点 → 选择 "Promote to Production"

📋 准备工作

□ 本地 npm run build 构建成功

□ 代码已推送到 GitHub/GitLab/Bitbucket

□ 必要的环境变量已整理好

⚙️ 部署配置

□ 框架类型自动检测是否正确

□ 构建命令/输出目录配置正确

□ 环境变量已在 Dashboard 设置

🔒 安全检查

□ API Key 等敏感信息仅存于服务端变量

□ CORS 已正确配置（如需要）

□ 消费预算限制已设置

🚀 上线后检查

□ 自定义域名已绑定并验证 SSL

□ 所有关键页面可正常访问

□ 已安装 Speed Insights / Analytics（可选）

□ 国内访问速度测试通过