Vercel 使用指南：框架、工作流与基础设施一体化的现代 Web 部署平台

Vercel 使用指南：框架、工作流与基础设施一体化的现代 Web 部署平台

Vercel 为开发者提供框架、工作流和基础设施，助力构建更快、更个性化的网页。从个人项目到企业级应用，从静态网站到 AI Agent，Vercel 正在成为现代 Web 开发的默认部署平台。

一、Vercel 是什么？

1.1 一句话定义

Vercel 是一个面向前端开发者的云平台，提供从代码提交到全球部署的完整工作流。它由 Next.js 的创建者 Guillermo Rauch 创立，核心理念是**"框架定义基础设施"（Framework-Defined Infrastructure）**------你专注写代码，Vercel 自动处理构建、部署、CDN、扩缩容等一切运维工作。

1.2 三大支柱

支柱	说明
框架（Frameworks）	对 Next.js 提供一等公民支持，同时兼容 SvelteKit、Nuxt、Astro、Remix、Vite 等 30+ 框架，自动检测并优化构建配置
工作流（Workflows）	Git 推送即部署、每个 PR 生成预览环境、原子化发布与回滚、团队协作
基础设施（Infrastructure）	全球边缘网络（350+ 节点）、Serverless/Edge Functions、Fluid Compute、自动扩缩容、内置 CDN

1.3 为什么选择 Vercel？

• 零配置部署：连接 Git 仓库后自动识别框架，无需手动配置构建命令
• 全球 CDN：静态资源和缓存内容从离用户最近的边缘节点分发
• 预览部署：每个 Pull Request 自动生成独立 URL，方便团队评审
• 按需付费：Hobby 计划永久免费，Pro 计划 $20/人/月起
• AI 原生：2026 年全面转向 Agentic Infrastructure，提供 AI SDK、AI Gateway、Workflow SDK、Sandbox 等完整 Agent 技术栈

---

二、核心概念

2.1 Project（项目）

一个 Vercel Project 对应一个 Git 仓库或一个本地项目，包含构建配置、环境变量、域名绑定等设置。

2.2 Deployment（部署）

每次代码推送或手动触发都会产生一个 Deployment，分为三种类型：

类型	触发条件	说明
Production	推送到生产分支（默认 main）	绑定正式域名，面向最终用户
Preview	推送到其他分支或创建 PR	生成唯一预览 URL，不影响生产
Development	vercel dev 本地运行	本地开发环境

2.3 Environment（环境）

每个 Project 有三套环境，环境变量相互隔离：

• Production：生产环境
• Preview：预览环境
• Development：开发环境

最佳实践：为 Preview 环境使用独立的数据库和 API Key，避免预览部署误操作生产数据。

2.4 Vercel Functions

服务端函数，支持多种运行时：

• Node.js：默认运行时，支持完整 Node 生态
• Edge Runtime：基于 V8 isolates，冷启动极快，全球边缘执行
• Python：支持 FastAPI、Flask 等框架（通过 Vercel Services）
• Go / Rust：支持编译型语言服务器

2.5 Middleware（中间件）

在请求到达页面或函数之前执行的代码，运行在 Edge 上。典型用途：

• A/B 测试和重定向
• 基于地理位置的内容个性化
• 身份验证和路由保护
• 路径重写

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 基于地理位置重定向
  const country = request.geo?.country;
  if (country === 'CN') {
    return NextResponse.rewrite(new URL('/zh', request.url));
  }
  return NextResponse.next();
}

---

三、快速开始

方式一：Git 连接部署（推荐）

第 1 步：注册账号

访问 vercel.com，使用 GitHub / GitLab / Bitbucket 账号登录。

第 2 步：导入项目

1. 点击 Add New... → Project
2. 选择要导入的 Git 仓库
3. Vercel 自动检测框架并填充构建配置：

配置项	Next.js 自动填充值
Framework Preset	Next.js
Build Command	next build
Output Directory	.next
Install Command	npm install（或 pnpm/yarn 自动检测）

4. （可选）配置环境变量
5. 点击 Deploy

部署通常在 60-90 秒内完成，完成后获得一个 *.vercel.app 域名。

第 3 步：后续部署

此后只需 git push，Vercel 自动构建并部署。推送到 main 分支更新生产环境，其他分支生成预览部署。

方式二：Vercel CLI 部署

# 1. 安装 CLI
npm install -g vercel

# 2. 登录
vercel login

# 3. 进入项目目录
cd my-project

# 4. 首次部署（交互式配置）
vercel

# 5. 部署到生产环境
vercel --prod

方式三：模板一键部署

Vercel 提供数百个官方模板，访问 vercel.com/templates，选择模板后点击 Deploy，自动复制到你的 GitHub 并完成部署。

热门模板分类：

• Next.js 全栈应用
• AI Chatbot（AI SDK 驱动）
• 电商（Shopify / Stripe 集成）
• 博客（MDX / Contentlayer）
• 仪表盘（Tailwind + shadcn/ui）

---

四、Vercel CLI 常用命令

# 登录与登出
vercel login
vercel logout

# 项目关联
vercel link          # 将本地项目关联到 Vercel Project
vercel unlink        # 解除关联

# 部署
vercel               # 部署为 Preview
vercel --prod        # 部署为 Production
vercel deploy --prebuilt  # 部署预构建产物

# 本地开发
vercel dev           # 启动本地开发服务器（模拟 Vercel 环境）
vercel env run -- npm run dev  # 注入 Vercel 环境变量后运行自定义命令

# 环境变量
vercel env ls                    # 列出环境变量
vercel env add DATABASE_URL      # 添加环境变量（交互式选择环境）
vercel env add DATABASE_URL production  # 直接指定环境
vercel env rm DATABASE_URL preview      # 删除环境变量
vercel env pull .env.local       # 拉取环境变量到本地 .env 文件

# 日志与调试
vercel logs <deployment-url>     # 查看部署日志
vercel curl / --deployment <url> # 向部署发送请求
vercel inspect <deployment-url>  # 查看部署详情

# 域名管理
vercel domains ls
vercel domains add example.com

# 项目管理
vercel projects ls
vercel projects rm <project-name>

---

五、环境变量管理

5.1 添加环境变量

通过 Dashboard：

1. 进入 Project → Settings → Environment Variables
2. 填写 Key 和 Value
3. 勾选适用环境（Production / Preview / Development）
4. 保存

通过 CLI：

vercel env add NEXT_PUBLIC_API_URL
# 交互式输入值，选择环境

5.2 环境变量类型

前缀	说明
NEXT_PUBLIC_*	暴露到客户端浏览器的变量（Next.js）
其他	仅服务端可见的私密变量

5.3 本地开发使用

# 拉取环境变量到本地
vercel env pull .env.local

# 启动开发（自动注入环境变量）
vercel dev

注意：.env.local 应加入 .gitignore，不要提交到仓库。

---

六、自定义域名

6.1 添加域名

1. Project → Settings → Domains
2. 输入域名（如 www.example.com），点击 Add
3. Vercel 提供两种验证方式：

方式 A：修改 Nameserver（推荐）

将域名的 NS 记录指向 Vercel 的 DNS：

ns1.vercel-dns.com
ns2.vercel-dns.com

方式 B：添加 CNAME 记录

在你的 DNS 服务商处添加：

类型: CNAME
主机: www
值: cname.vercel-dns.com

根域名（apex domain）则添加 A 记录指向 76.76.21.21。

6.2 自动 HTTPS

Vercel 自动为所有自定义域名签发和续期 Let's Encrypt SSL 证书，无需手动配置。

6.3 域名重定向

在 Domains 设置中，可以将 example.com 重定向到 www.example.com（或反之），Vercel 自动处理 301 重定向。

---

七、Vercel Services：多框架全栈部署

2026 年 6 月推出的 Vercel Services（公开测试版）允许在一个 Vercel Project 中运行多个框架的服务，实现真正的全栈部署。

7.1 配置示例

在 vercel.json 中声明多个服务：

{
  "services": {
    "frontend": {
      "root": "frontend/",
      "framework": "nextjs"
    },
    "backend": {
      "root": "backend/",
      "framework": "fastapi",
      "entrypoint": "main:app"
    }
  },
  "rewrites": [
    { "source": "/api/(.*)", "destination": { "service": "backend" } },
    { "source": "/(.*)", "destination": { "service": "frontend" } }
  ]
}

7.2 服务间内部通信

通过 bindings 实现服务间内网通信，流量不经过公网：

{
  "services": {
    "frontend": {
      "root": "frontend/",
      "framework": "nextjs",
      "bindings": [
        {
          "type": "service",
          "service": "backend",
          "format": "url",
          "env": "BACKEND_INTERNAL_URL"
        }
      ]
    },
    "backend": { "root": "backend/", "framework": "fastapi" }
  }
}

前端代码中通过环境变量访问后端：

// app/api/users/route.ts
export async function GET() {
  const url = new URL("/users", process.env.BACKEND_INTERNAL_URL);
  const res = await fetch(url);
  return Response.json(await res.json());
}

7.3 支持的后端框架

语言	框架
Python	FastAPI、Flask、Django
TypeScript	Express、Hono、Nitro
Go	原生 HTTP 服务器
Rust	Axum、Actix-web

7.4 核心优势

• 原子部署：前端、后端和其他服务同步部署或回滚
• 共享预览：任何改动都能在 Preview 环境中看到完整效果
• 内网通信：服务间调用不走公网，延迟更低、更安全
• 统一日志：Deployment 面板展示服务依赖图，Logs UI 可按服务筛选

---

八、AI / Agent 基础设施

Vercel 在 2026 年全面转向 Agentic Infrastructure，提供完整的 Agent 技术栈：

8.1 AI SDK

统一的模型调用 API，支持流式输出、工具调用和结构化输出，跨提供商行为一致：

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';

const { text } = await generateText({
  model: openai('gpt-4o'),
  prompt: 'Write a poem about Vercel.',
});

支持 OpenAI、Anthropic、Google、Mistral、Groq 等数十家提供商。

8.2 AI Gateway

单一端点路由到数百个模型，提供商宕机时自动故障转移：

import { generateText } from 'ai';
import { gateway } from '@ai-sdk/gateway';

const { text } = await generateText({
  model: gateway('openai:gpt-4o'),
  prompt: 'Hello',
});

8.3 Workflow SDK

持久化工作流引擎，内置自动重试、状态持久化和可观测性，适合长运行任务：

import { workflow } from '@vercel/workflow';

export const generateReport = workflow({
  id: 'generate-report',
  run: async ({ input, step }) => {
    const data = await step('fetch-data', () => fetchData(input.id));
    const analysis = await step('analyze', () => analyze(data));
    return step('generate', () => generatePDF(analysis));
  },
});

8.4 Vercel Sandbox

为每个 Agent 提供隔离的 microVM，在代码部署到生产前运行和测试：

• 按 active CPU 时间计费，I/O 等待不收费
• 支持浏览器自动化、文件操作、代码执行
• 与 Agent 框架（如 eve）深度集成

8.5 Chat SDK

一套代码将 Agent 部署到 Slack、Discord、GitHub 等多个渠道。

---

九、性能优化与可观测性

9.1 内置优化能力

功能	说明
Image Optimization	自动格式转换（WebP/AVIF）、按需缩放、边缘缓存
Font Optimization	自动自托管 Google Fonts，消除 FOIT
Script Optimization	第三方脚本策略化加载（beforeInteractive / afterInteractive / lazyOnload）
Incremental Static Regeneration (ISR)	静态页面按间隔重新生成，无需重新部署
Edge Caching	API 响应和 SSR 页面可在边缘缓存
Skew Protection	版本锁定，确保客户端和服务端使用同一版本代码

9.2 Speed Insights

在 Dashboard 中查看 Core Web Vitals 数据：

• LCP（Largest Contentful Paint）
• FID / INP（Interaction to Next Paint）
• CLS（Cumulative Layout Shift）

按页面、设备、国家维度筛选，定位性能瓶颈。

9.3 Web Analytics

隐私友好的网站分析（无 Cookie、符合 GDPR）：

• 页面浏览量和独立访客
• 热门页面和来源
• 用户地理分布
• 自定义事件追踪

9.4 Logs

• 实时构建日志和运行时日志
• 按服务、级别（error/warning/info）筛选
• 支持日志 Drains 导出到 Datadog、Splunk 等第三方

---

十、安全与防护

功能	说明
Deployment Protection	密码保护或 SSO 保护 Preview/Production 部署
Firewall (WAF)	托管规则集、速率限制、Bot 防护
DDoS Mitigation	自动 DDoS 缓解
OIDC Federation	无 Token 的 CI/CD 部署，短期凭证无需轮换
Secure Compute	企业级专用基础设施，满足 SOC2/HIPAA 合规

---

十一、定价方案

方案	价格	带宽	适合场景
Hobby	免费	100 GB/月	个人项目、学习、原型（不可商用）
Pro	$20/人/月	1 TB/月	初创团队、生产应用、商用项目
Enterprise	定制报价	无限	大型企业、合规需求、专属支持

Hobby 计划限制

• 不可用于商业用途
• 无密码保护
• 无团队成员
• 超出额度后功能暂停（不产生超额费用）
• 构建超时：10 分钟

Pro 计划核心权益

• 1 TB 带宽/月（超出后按量计费）
• 无限构建时间
• 密码保护部署
• 团队协作（每席位 $20/月）
• 高级 Web Analytics
• 邮件支持
• DDoS 缓解

成本控制

• Spend Management：设置支出上限，超额前发送告警并自动暂停
• Fluid Compute：仅按实际 CPU 执行时间付费，无空闲资源浪费
• 监控 Dashboard 中的 Usage 页面，实时查看带宽、函数调用等用量

---

十二、最佳实践

12.1 部署策略

• 使用 Preview Deployment 做代码评审，每个 PR 都有独立 URL
• 生产环境使用 Skew Protection 避免版本不一致
• 重要更新使用 Instant Rollback 一键回滚到上一版本

12.2 环境变量

• Preview 环境使用独立的测试数据库和 API Key
• 敏感变量不要加 NEXT_PUBLIC_ 前缀
• 使用 vercel env pull 同步本地开发环境

12.3 性能

• 优先使用静态生成（SSG）和 ISR，减少 SSR
• 大图片使用 next/image 组件自动优化
• 第三方脚本使用 next/script 策略化加载
• 定期查看 Speed Insights，关注 Core Web Vitals

12.4 成本

• 设置 Spend Limit 避免意外超额
• 静态资源尽量走 CDN 缓存，减少 Function 调用
• 监控带宽使用，大文件下载考虑使用外部存储

12.5 monorepo 支持

Vercel 原生支持 monorepo（Turborepo、pnpm workspace、Nx），在 Project 设置中指定 Root Directory 即可部署 monorepo 中的子包。

---

十三、常见问题

Q: Vercel 和 Netlify 有什么区别？

A: Vercel 对 Next.js 有最深的优化（ISR、RSC、Partial Prerendering 等新特性优先落地），边缘网络和 Functions 性能更强；Netlify 在表单、身份认证等集成功能上更丰富。如果使用 Next.js，Vercel 通常是最佳选择。

Q: Hobby 计划可以用于商业项目吗？

A: 不可以。Hobby 计划仅限个人非商业项目。商业用途需要升级到 Pro 或 Enterprise。

Q: 部署失败怎么办？

A: 1) 查看构建日志定位错误；2) 确认环境变量齐全；3) 确认构建命令和输出目录正确；4) 本地运行 vercel build 复现问题；5) 检查 Node.js 版本是否兼容。

Q: 如何处理长时间运行的任务？

A: Vercel Functions 有执行时间限制（Hobby 10秒，Pro 60秒，可申请提升到 5分钟）。长任务应使用 Workflow SDK 或队列模式（将任务放入队列，由后台 Worker 处理）。

Q: 可以部署非 Node.js 后端吗？

A: 可以。通过 Vercel Services 支持 FastAPI、Flask、Django（Python）、Express/Hono（Node）、Go、Rust 等多种后端框架，在一个 Project 中统一部署。

Q: 数据存储怎么办？

A: Vercel 本身不提供数据库，但提供 Vercel Storage 集成：Vercel KV（Redis）、Vercel Postgres、Vercel Blob（对象存储）、Vercel Edge Config。也可以连接外部数据库（Supabase、Neon、PlanetScale 等）。

---

参考资源

• 官方网站：https://vercel.com
• 官方文档：https://vercel.com/docs
• 模板市场：https://vercel.com/templates
• Vercel CLI：https://vercel.com/docs/cli
• AI SDK：https://sdk.vercel.ai
• Next.js 官网：https://nextjs.org
• Vercel Ship 2026 回顾：https://vercel.com/blog/vercel-ship-2026-recap
• Vercel Services 介绍：https://vercel.com/blog/vercel-services-run-full-stack-on-vercel
• 定价页面：https://vercel.com/pricing

---

本文基于 Vercel 公开文档和 2026 年最新产品动态整理。Vercel 产品迭代迅速，具体功能和限制以官方文档为准。