Vercel：前端部署

为什么需要 Vercel：从「手搓服务器」到「Git Push 即上线」

传统前端部署的典型路径是：购买云服务器、安装 Nginx、配置 HTTPS 证书、编写 CI 脚本、处理 CDN 回源与缓存失效。这套流程在单项目时尚可维护，但一旦团队有多个前端仓库、每个 PR 需要独立预览环境、流量会有瞬时尖峰，运维成本会迅速失控——证书过期、构建失败、回滚困难是常态。

Vercel 把这条链路整体折叠：连接 Git 仓库后，每一次 push 都会触发「安装依赖 → 构建 → 分发」的流水线，平台自动签发并续期 SSL 证书，产物通过全球边缘网络就近交付。PR 预览环境（Preview Deployment）开箱即用，每个分支拿到独立 URL 用于评审；生产环境（Production）则与主线分支绑定，推送即发布，出错时可一键回滚到任意历史部署。

与同类平台的气质差异在于：Vercel 与 Next.js 同属一家公司，对 Next.js 的适配最深——App Router、增量静态再生（ISR）、Server Actions、图像优化都做了平台级优化；而 Netlify 更偏通用静态站点，Cloudflare Pages 更强调在 Cloudflare 生态内以极低成本获得边缘能力。

安装与环境配置：3 步就绪

第一步，注册账号并连接 Git。访问 vercel.com，用 GitHub、GitLab 或 Bitbucket 账号登录，平台会自动读取你的仓库列表。这一步是后续一切自动化的前提。

第二步，安装 CLI（需要 Node.js 18 及以上）。Vercel 的 CLI 是管理部署、日志与环境的命令行入口，同时支持本地开发预览（vercel dev）。

第三步，登录并验证身份。运行 vercel login 后浏览器会自动打开授权页，完成授权后使用 vercel whoami 确认当前账号。

# 1. 全局安装 CLI（需 Node.js >= 18）npm i -g vercel # 2. 登录（自动打开浏览器完成授权）vercel login # 3. 验证当前账号vercel whoami

快速上手：10 分钟跑通第一个部署

最小可用流程是：在任意前端项目根目录执行 vercel，CLI 会交互式询问框架预设、构建命令与输出目录，多数情况下直接回车即可。首次运行会自动创建项目并给出预览域名，追加 --prod 参数则直接发布到生产环境。

Dashboard 操作路径与 CLI 等价：登录后在 Add New → Project 中导入仓库，平台自动检测框架（Next.js、Vite、Nuxt、Astro 等 30+ 预设），保持默认设置点击 Deploy，等待构建完成即可访问分配的 *.vercel.app 域名。

若项目需要自定义构建行为，可在根目录新建 vercel.json 覆盖平台层配置：

部署命令：

运行后终端会输出两个 URL：Preview 地址与 Production 地址。生产地址即正式访问入口，之后每次 git push 到生产分支都会自动触发新版本发布。进阶技巧：在项目设置中开启「自动发布」（Auto Deployments）后，非生产分支的推送只生成预览、不污染生产环境。

{  "framework": "nextjs",  "buildCommand": "next build",  "outputDirectory": ".next"}

# 首次发布（交互式创建项目）vercel # 覆盖 Preview 并发布到生产环境vercel --prod

核心能力详解：4 大支柱

支柱一·Git 工作流自动部署（Auto Deployments）。连接仓库后，每次 push 自动触发构建。可在 Settings → Git 中指定生产分支（默认 main），并为不同分支设置构建与忽略规则。配合 Ignored Build Step，可以依据提交信息跳过无关构建，节省免费额度。

支柱二·Preview 与 Production 双环境。每个 PR 自动生成带独立 URL 的预览环境，评审人可直接查看效果而无需本地运行；合并到生产分支后自动发布生产版本。所有部署记录都可在 Dashboard 中回滚，一次点击即回到任意历史版本。

支柱三·Serverless Functions 与边缘函数。项目 api/ 目录下的文件自动成为函数端点。边缘函数（Edge Functions）部署在全球边缘节点、冷启动极低，适合鉴权、重写、A/B 分流等轻逻辑；Serverless Functions 支持完整 Node.js 运行时，适合调用外部 API、读写数据库、LLM 代理转发等较重任务。函数执行时长在 Hobby 计划中默认受限，长耗时任务需评估方案。

支柱四·全球边缘网络与缓存。静态资源、图片与增量静态再生（ISR）页面均从边缘节点就近返回，配合按请求配置的 Cache-Control 头实现精细缓存。平台内置 Web Analytics 与 Speed Insights，可直接观察访问量与核心 Web 指标（LCP、CLS、INP），无需自建监控。

生产部署与监控：从上线到运维

部署方式一：域名绑定。在项目 Settings → Domains 中添加自定义域名，主域配置 A 记录指向 76.76.21.21，子域配置 CNAME 指向 cname.vercel-dns.com，平台自动签发并续期证书（含泛域名证书）。DNS 生效后 HTTPS 全程托管，无需手动上传证书。

部署方式二：CI/CD 与预构建产物。在自建 CI（如 GitHub Actions）中先运行 vercel build 生成产物目录，再通过 vercel deploy --prebuilt --prod 上传，跳过平台侧构建，适用于需要在 CI 中做额外测试、镜像签名或私有化构建的团队。CLI 也支持 vercel env pull 将环境变量同步到本地，保证本地与线上配置一致。

可观测性。生产环境建议启用：Logs（函数日志与实时流）、Speed Insights（Web Vitals 追踪与回归告警）、Deployment Protection（对预览环境加访问口令，防止未上线内容泄露）。平台提供公开状态页（vercel-status.com），订阅后可实时接收故障通知。用量告警需在 Hobby 计划内手动关注带宽与函数调用量，避免超限导致服务被限流。

<p class="para-label">避坑清单：</p>

<ul class="dash-list"><li>Hobby 免费版带宽上限 100GB/月，超限后被限流并暂停新部署，面向生产流量务必绑定付费卡或设置用量监控。</li><li>边缘函数并非完整 Node.js 运行时，无法使用所有内置模块与 npm 包；需长时间运行或依赖重库的任务应改用 Serverless Functions。</li><li>中国大陆访问 Vercel 边缘节点不稳定，面向国内用户的站点需另行规划备案与合规方案，必要时将静态资源切到国内 CDN。</li><li>vercel.json 只覆盖平台层（构建、路由、缓存）配置，Next.js 等框架自身的配置由 next.config.js 控制，二者不要混淆。</li></ul>

版本迭代

Vercel 前身是 2016 年的 Zeit Now，2020 年更名 Vercel 并逐步将 Next.js 作为平台核心。此后以「边缘网络 → 边缘函数 → App Router 稳定 → AI 工具链」为主线演进：2021 年边缘网络上线、2022 年边缘函数推出、2023 年 Next.js 14 与 App Router 稳定、2024 年 Next.js 15 与 AI SDK 4.0 发布，平台与 CLI 同步迭代（截至训练数据，可能已有更新版本）。

AI 应用场景

常见误区

面试题

参考来源

• webpageNext.js 官方文档平台核心框架的使用与部署配置说明