Develop. Preview. Ship. —— 开发、预览、发布，一体化完成

一、Vercel 是什么？

Vercel 是由 Next.js 团队开发的云端部署平台，专注于静态网站、Serverless 函数和全栈 Web 应用的托管服务。公司前身为 ZEIT，2020 年更名为 Vercel，总部位于美国纽约。

核心理念

Vercel 的设计哲学是让开发者更专注于代码本身，而不是繁琐的服务器配置。它实现了从开发到上线的全流程自动化，让前端部署变得像 git push 一样简单。

基本定位

⚡ 二、核心功能与优势

1. 零配置部署

自动识别主流框架（Next.js/React/Vue/Svelte/Angular/Nuxt/Gatsby 等），无需手动配置构建命令。

2. 全球 CDN 加速

• 覆盖 70+ 边缘节点
• 静态资源自动压缩优化
• 访问速度比传统托管更快

3. Serverless 架构

• 无需管理服务器
• 按需自动扩展
• 支持 API Routes 和 Edge Functions

4. 自动 CI/CD

• 连接 GitHub/GitLab/Bitbucket 后，每次 git push 自动触发构建和部署
• 支持 Preview Deployments，每个 PR 生成独立预览链接
• 代码提交后 5 秒内 完成部署

5. 免费 SSL 证书

自动签发 HTTPS 证书，无需手动配置

6. 自定义域名

支持绑定自己的域名，免费配置 DNS

7. 图片与资源优化

内置图片优化、缓存控制、字体优化等功能

8. 边缘函数 (Edge Functions)

• 在全球边缘节点运行代码
• 低延迟响应用户请求
• 支持个性化内容和 A/B 测试

️ 三、如何使用 Vercel？

方式一：通过 GitHub 集成部署（推荐）

步骤 1: 注册 Vercel 账号       ↓步骤 2: 连接 GitHub 账户       ↓步骤 3: 导入 Git 仓库       ↓步骤 4: 自动识别框架并配置       ↓步骤 5: 点击 Deploy，完成部署

优点：

• 代码推送自动更新
• 支持 Pull Request 预览
• 无需本地操作

方式二：通过 Vercel CLI 部署

# 1. 安装 Vercel CLInpm install -g vercel# 2. 登录账号vercel login# 3. 进入项目目录cd your-project# 4. 部署项目vercel# 5. 生产环境部署vercel --prod

优点：

• 适合本地快速测试
• 不依赖 Git 仓库
• 命令行操作灵活

方式三：通过 Vercel 控制台手动上传

适合没有 Git 仓库的小型项目，直接上传构建后的静态文件。

四、什么时候使用 Vercel？

✅ 推荐使用场景

⚠️ 不推荐使用场景

五、适合什么类型的项目？

最佳匹配项目

项目架构建议

┌─────────────────────────────────────────────┐│                 Vercel Platform              │├─────────────────────────────────────────────┤│  前端框架      │  Serverless Functions      ││  (用户界面)    │  (后端 API 逻辑)           │├─────────────────────────────────────────────┤│              全球 CDN (70+ 边缘节点)          │└─────────────────────────────────────────────┘                          │                          ▼              ┌───────────────────────┐              │   外部服务/数据库      │              │   (第三方 API/DB)     │              └───────────────────────┘

六、定价方案

Hobby（免费计划）

Pro（$20/成员/月）

Enterprise（定制报价）

• 无限带宽
• 专属支持
• SLA 保障
• 适合大型企业

⚠️ 七、注意事项与最佳实践

1. 国内访问问题

• Vercel 的 .vercel.app 域名在国内可能被墙
• 解决方案：绑定自定义域名 + 使用 Cloudflare CDN 中转

2. Serverless 函数限制

• 最大执行时间：10 秒（Hobby）/ 60 秒（Pro）
• 内存限制：1024 MB
• 解决方案：长时间任务使用异步处理或外部服务

3. 环境变量管理

• 敏感信息（API Key）不要硬编码
• 使用 Vercel 的 Environment Variables 功能
• 区分开发/预览/生产环境

4. 构建优化

• 使用框架内置的图片优化功能
• 启用增量静态再生成 (ISR)
• 合理配置缓存策略

5. 监控与分析

• 启用 Vercel Analytics
• 设置部署通知
• 定期检查带宽使用情况

6. 数据库连接

• Serverless 函数不适合保持持久数据库连接
• 解决方案：使用连接池服务 (如 PlanetScale, Supabase, Neon)

八、快速开始清单

□ 1. 注册 Vercel 账号 (vercel.com)□ 2. 连接 GitHub/GitLab 账户□ 3. 准备项目代码 (确保有 package.json)□ 4. 导入项目到 Vercel□ 5. 配置环境变量 (如 API Key)□ 6. 点击 Deploy□ 7. 测试部署链接□ 8. 绑定自定义域名 (可选)□ 9. 配置 DNS 记录□ 10. 启用 HTTPS

九、常用资源

十、总结

最终建议

Vercel 是现代前端开发者的首选部署平台，尤其适合：

Next.js/React/Vue 项目 需要快速迭代的初创产品 面向全球用户的 Web 应用 想要零运维成本的开发者 个人开发者和小型团队

与其他平台对比

现在就开始部署您的第一个 Vercel 项目吧！

# 创建 Next.js 项目npx create-next-app@latest my-projectcd my-project# 部署到 Vercelnpx vercel