Vercel 使用指南框架、工作流与基础设施一体化的现代 Web 部署平台Vercel 为开发者提供框架、工作流和基础设施助力构建更快、更个性化的网页。从个人项目到企业级应用从静态网站到 AI AgentVercel 正在成为现代 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 框架自动检测并优化构建配置工作流WorkflowsGit 推送即部署、每个 PR 生成预览环境、原子化发布与回滚、团队协作基础设施Infrastructure全球边缘网络350 节点、Serverless/Edge Functions、Fluid Compute、自动扩缩容、内置 CDN1.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不影响生产Developmentvercel 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 ServicesGo / Rust支持编译型语言服务器2.5 Middleware中间件在请求到达页面或函数之前执行的代码运行在 Edge 上。典型用途A/B 测试和重定向基于地理位置的内容个性化身份验证和路由保护路径重写// middleware.tsimport{NextResponse}fromnext/server;importtype{NextRequest}fromnext/server;exportfunctionmiddleware(request:NextRequest){// 基于地理位置重定向constcountryrequest.geo?.country;if(countryCN){returnNextResponse.rewrite(newURL(/zh,request.url));}returnNextResponse.next();}三、快速开始方式一Git 连接部署推荐第 1 步注册账号访问 vercel.com使用 GitHub / GitLab / Bitbucket 账号登录。第 2 步导入项目点击Add New… → Project选择要导入的 Git 仓库Vercel 自动检测框架并填充构建配置配置项Next.js 自动填充值Framework PresetNext.jsBuild Commandnext buildOutput Directory.nextInstall Commandnpm install或 pnpm/yarn 自动检测可选配置环境变量点击Deploy部署通常在 60-90 秒内完成完成后获得一个*.vercel.app域名。第 3 步后续部署此后只需git pushVercel 自动构建并部署。推送到main分支更新生产环境其他分支生成预览部署。方式二Vercel CLI 部署# 1. 安装 CLInpminstall-gvercel# 2. 登录vercel login# 3. 进入项目目录cdmy-project# 4. 首次部署交互式配置vercel# 5. 部署到生产环境vercel--prod方式三模板一键部署Vercel 提供数百个官方模板访问 vercel.com/templates选择模板后点击Deploy自动复制到你的 GitHub 并完成部署。热门模板分类Next.js 全栈应用AI ChatbotAI SDK 驱动电商Shopify / Stripe 集成博客MDX / Contentlayer仪表盘Tailwind shadcn/ui四、Vercel CLI 常用命令# 登录与登出vercel login vercellogout# 项目关联vercellink# 将本地项目关联到 Vercel Projectvercel unlink# 解除关联# 部署vercel# 部署为 Previewvercel--prod# 部署为 Productionvercel deploy--prebuilt# 部署预构建产物# 本地开发vercel dev# 启动本地开发服务器模拟 Vercel 环境vercelenvrun --npmrun dev# 注入 Vercel 环境变量后运行自定义命令# 环境变量vercelenvls# 列出环境变量vercelenvaddDATABASE_URL# 添加环境变量交互式选择环境vercelenvaddDATABASE_URL production# 直接指定环境vercelenvrmDATABASE_URL preview# 删除环境变量vercelenvpull .env.local# 拉取环境变量到本地 .env 文件# 日志与调试vercel logsdeployment-url# 查看部署日志vercelcurl/--deploymenturl# 向部署发送请求vercel inspectdeployment-url# 查看部署详情# 域名管理vercel domainslsvercel domainsaddexample.com# 项目管理vercel projectslsvercel projectsrmproject-name五、环境变量管理5.1 添加环境变量通过 Dashboard进入 Project →Settings → Environment Variables填写 Key 和 Value勾选适用环境Production / Preview / Development保存通过 CLIvercelenvaddNEXT_PUBLIC_API_URL# 交互式输入值选择环境5.2 环境变量类型前缀说明NEXT_PUBLIC_*暴露到客户端浏览器的变量Next.js其他仅服务端可见的私密变量5.3 本地开发使用# 拉取环境变量到本地vercelenvpull .env.local# 启动开发自动注入环境变量vercel dev注意.env.local应加入.gitignore不要提交到仓库。六、自定义域名6.1 添加域名Project →Settings → Domains输入域名如www.example.com点击AddVercel 提供两种验证方式方式 A修改 Nameserver推荐将域名的 NS 记录指向 Vercel 的 DNSns1.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 自动 HTTPSVercel 自动为所有自定义域名签发和续期 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.tsexportasyncfunctionGET(){consturlnewURL(/users,process.env.BACKEND_INTERNAL_URL);constresawaitfetch(url);returnResponse.json(awaitres.json());}7.3 支持的后端框架语言框架PythonFastAPI、Flask、DjangoTypeScriptExpress、Hono、NitroGo原生 HTTP 服务器RustAxum、Actix-web7.4 核心优势原子部署前端、后端和其他服务同步部署或回滚共享预览任何改动都能在 Preview 环境中看到完整效果内网通信服务间调用不走公网延迟更低、更安全统一日志Deployment 面板展示服务依赖图Logs UI 可按服务筛选八、AI / Agent 基础设施Vercel 在 2026 年全面转向Agentic Infrastructure提供完整的 Agent 技术栈8.1 AI SDK统一的模型调用 API支持流式输出、工具调用和结构化输出跨提供商行为一致import{generateText}fromai;import{openai}fromai-sdk/openai;const{text}awaitgenerateText({model:openai(gpt-4o),prompt:Write a poem about Vercel.,});支持 OpenAI、Anthropic、Google、Mistral、Groq 等数十家提供商。8.2 AI Gateway单一端点路由到数百个模型提供商宕机时自动故障转移import{generateText}fromai;import{gateway}fromai-sdk/gateway;const{text}awaitgenerateText({model:gateway(openai:gpt-4o),prompt:Hello,});8.3 Workflow SDK持久化工作流引擎内置自动重试、状态持久化和可观测性适合长运行任务import{workflow}fromvercel/workflow;exportconstgenerateReportworkflow({id:generate-report,run:async({input,step}){constdataawaitstep(fetch-data,()fetchData(input.id));constanalysisawaitstep(analyze,()analyze(data));returnstep(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消除 FOITScript Optimization第三方脚本策略化加载beforeInteractive / afterInteractive / lazyOnloadIncremental Static Regeneration (ISR)静态页面按间隔重新生成无需重新部署Edge CachingAPI 响应和 SSR 页面可在边缘缓存Skew Protection版本锁定确保客户端和服务端使用同一版本代码9.2 Speed Insights在 Dashboard 中查看 Core Web Vitals 数据LCPLargest Contentful PaintFID / INPInteraction to Next PaintCLSCumulative 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 Vitals12.4 成本设置 Spend Limit 避免意外超额静态资源尽量走 CDN 缓存减少 Function 调用监控带宽使用大文件下载考虑使用外部存储12.5 monorepo 支持Vercel 原生支持 monorepoTurborepo、pnpm workspace、Nx在 Project 设置中指定Root Directory即可部署 monorepo 中的子包。十三、常见问题Q: Vercel 和 Netlify 有什么区别A: Vercel 对 Next.js 有最深的优化ISR、RSC、Partial Prerendering 等新特性优先落地边缘网络和 Functions 性能更强Netlify 在表单、身份认证等集成功能上更丰富。如果使用 Next.jsVercel 通常是最佳选择。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、DjangoPython、Express/HonoNode、Go、Rust 等多种后端框架在一个 Project 中统一部署。Q: 数据存储怎么办A: Vercel 本身不提供数据库但提供 Vercel Storage 集成Vercel KVRedis、Vercel Postgres、Vercel Blob对象存储、Vercel Edge Config。也可以连接外部数据库Supabase、Neon、PlanetScale 等。参考资源官方网站https://vercel.com官方文档https://vercel.com/docs模板市场https://vercel.com/templatesVercel CLIhttps://vercel.com/docs/cliAI SDKhttps://sdk.vercel.aiNext.js 官网https://nextjs.orgVercel Ship 2026 回顾https://vercel.com/blog/vercel-ship-2026-recapVercel Services 介绍https://vercel.com/blog/vercel-services-run-full-stack-on-vercel定价页面https://vercel.com/pricing本文基于 Vercel 公开文档和 2026 年最新产品动态整理。Vercel 产品迭代迅速具体功能和限制以官方文档为准。