乐闻世界logo
5月27日 21:46

Vercel 的部署流程是怎样的？

Vercel 的部署流程是怎样的？

核心流程分五步：代码拉取 → 依赖安装 → 构建 → 上传分发 → 域名配置。最常用的是 Git 集成部署——推送代码到主分支触发生产部署，推送到其他分支或创建 PR 触发预览部署。

部署触发方式

Git 集成（推荐）：连接 GitHub / GitLab / Bitbucket 仓库后，代码推送自动触发构建和部署。首次需在 Dashboard 导入仓库、配置构建设置（框架和命令通常自动检测），点击 Deploy 完成。

CLI 手动部署：

bash
npm i -g vercel
vercel login
vercel          # 预览环境
vercel --prod   # 生产环境

API 部署：通过 @vercel/client 的 createDeployment 实现程序化部署，适合 CI/CD 集成场景。

五个阶段详解

  1. 代码拉取：从 Git 仓库拉取最新代码，检查 .gitignore 排除无关文件，解析依赖关系
  2. 依赖安装：自动检测包管理器（npm / yarn / pnpm），执行安装，node_modules 会被缓存加速后续构建
  3. 构建：执行构建命令（默认 npm run build，可在 vercel.json 自定义），自动检测框架并应用优化（如 Next.js 的代码分割、静态生成），生成 HTML/CSS/JS 等静态资源
  4. 部署上传：构建产物上传至边缘网络，CDN 分发到全球节点，配置缓存策略
  5. 域名配置：自动签发并续期 SSL 证书（Let'''s Encrypt），配置 DNS 解析，支持自定义域名绑定

预览部署 vs 生产部署

维度预览部署生产部署
触发条件PR 或非主分支推送主分支合并 / vercel --prod
URL 格式project-branch.vercel.appproject.vercel.app 或自定义域名
环境变量使用 Preview 环境使用 Production 环境

预览部署为每个 PR 生成独立 URL，适合代码审查和功能测试；生产部署使用更严格的构建检查。

常见追问

Vercel 如何加速构建？ 三种机制：node_modules 缓存复用、增量构建（仅重建变更页面，复用未变更产物）、并行构建多项目。对于 Next.js 项目还支持 ISR（增量静态再生成），避免全量重建。

部署失败常见原因？ 依赖版本冲突、环境变量缺失、构建命令错误、Serverless 函数内存不足。排查方式：查看构建日志定位失败步骤，确认 package.json 依赖版本一致，验证环境变量配置完整。

部署后页面 404？ 检查 outputDirectory 配置是否与实际构建产物目录一致（如 Vite 默认 dist，Next.js 默认 .next），确认路由重写规则正确。

如何区分环境变量？ Vercel 支持 Development / Preview / Production 三套独立环境变量，在项目 Settings → Environment Variables 中分别配置，CLI 通过 vercel env pull 拉取对应环境配置。

vercel.json 常用配置项？ 可自定义 buildCommand、outputDirectory、framework、路由重写规则（rewrites）、重定向（redirects）和缓存头（headers）。

标签：Vercel