预览部署 #
预览部署概述 #
预览部署是 Vercel 的核心功能之一：
text
┌─────────────────────────────────────────┐
│ 预览部署特点 │
├─────────────────────────────────────────┤
│ 自动生成 → 每次提交自动部署 │
│ 唯一 URL → 每个部署有独立链接 │
│ 隔离环境 → 不影响生产环境 │
│ 即时预览 → 快速验证变更 │
└─────────────────────────────────────────┘
预览 URL 结构 #
URL 格式 #
text
生产部署：
https://your-project.vercel.app
预览部署：
https://your-project-git-branch-username.vercel.app
https://your-project-abc123.vercel.app
URL 组成 #
text
┌──────────────────────────────────────────────────────────┐
│ https://my-app-git-feature-x-johndoe.vercel.app │
│ │ │ │ │ │
│ │ │ │ └── 团队/用户名 │
│ │ │ └── 分支名 │
│ │ └── git 标识 │
│ └── 项目名 │
└──────────────────────────────────────────────────────────┘
Pull Request 预览 #
自动评论 #
Vercel 会自动在 PR 中添加部署评论：
text
┌─────────────────────────────────────────┐
│ 🔗 Deployment Preview │
├─────────────────────────────────────────┤
│ ✅ Preview: https://my-app-git-feat... │
│ 📝 Latest commit: abc123 │
│ │
│ [View Deployment] [View Build Logs] │
└─────────────────────────────────────────┘
配置 PR 评论 #
text
Project Settings → Git → GitHub
text
┌─────────────────────────────────────────┐
│ GitHub Integration │
├─────────────────────────────────────────┤
│ ☑ Comment on Pull Requests │
│ ☑ Commit Status Checks │
│ ☑ Pull Request Comments │
└─────────────────────────────────────────┘
禁用 PR 评论 #
json
{
"github": {
"silent": true
}
}
预览部署管理 #
查看预览部署 #
text
Project → Deployments → Preview
text
┌─────────────────────────────────────────────────────────┐
│ Preview Deployments │
├─────────────────────────────────────────────────────────┤
│ feat/new-feature abc123 5 mins ago ✓ Ready [Visit]│
│ fix/bug-fix def456 1 hour ago ✓ Ready [Visit]│
│ refactor/code ghi789 2 days ago ✓ Ready [Visit]│
└─────────────────────────────────────────────────────────┘
通过 CLI 查看 #
bash
vercel list
text
Deployments:
my-app abc123 5 mins ago Preview https://my-app-abc123.vercel.app
my-app def456 1 hour ago Production https://my-app.vercel.app
删除预览部署 #
bash
vercel remove my-app-abc123
预览部署配置 #
禁用预览部署 #
json
{
"git": {
"deploymentEnabled": false
}
}
仅特定分支预览 #
json
{
"git": {
"deploymentEnabled": {
"include": ["main", "develop"]
}
}
}
排除特定分支 #
json
{
"git": {
"deploymentEnabled": {
"exclude": ["docs/*", "chore/*"]
}
}
}
预览环境变量 #
独立环境变量 #
text
Project Settings → Environment Variables
text
┌─────────────────────────────────────────┐
│ Environment: Preview │
├─────────────────────────────────────────┤
│ API_URL = https://staging.api.com │
DEBUG = true
│ │
└─────────────────────────────────────────┘
环境变量继承 #
text
Development (基础)
│
└── Preview (继承 Development，可覆盖)
配置示例 #
bash
vercel env add API_URL preview
text
? What's the value of API_URL? https://staging.api.com
? Add API_URL to Preview? [Y/n] y
预览域名 #
自定义预览域名 #
text
Project Settings → Domains → Preview
text
┌─────────────────────────────────────────┐
│ Preview Domain │
├─────────────────────────────────────────┤
│ Domain: [preview.example.com] │
│ │
│ [Add] │
└─────────────────────────────────────────┘
预览域名格式 #
text
默认：
https://my-app-git-branch-username.vercel.app
自定义：
https://my-app-git-branch.preview.example.com
预览部署保护 #
密码保护 #
text
Project Settings → Deployment Protection
text
┌─────────────────────────────────────────┐
│ Deployment Protection │
├─────────────────────────────────────────┤
│ ☑ Password Protection │
│ Password: [********] │
│ │
│ Apply to: │
│ ☑ Preview Deployments │
│ ☐ Production Deployments │
│ │
│ [Save] │
└─────────────────────────────────────────┘
Vercel Authentication #
text
┌─────────────────────────────────────────┐
│ Vercel Authentication │
├─────────────────────────────────────────┤
│ Only allow access to: │
│ ☑ Team members │
│ ☑ Email domains: @company.com │
│ │
│ [Save] │
└─────────────────────────────────────────┘
Trusted IPs #
text
┌─────────────────────────────────────────┐
│ Trusted IPs │
├─────────────────────────────────────────┤
│ IP Address: [192.168.1.1 ] │
│ [Add IP] │
│ │
│ Trusted IPs: │
│ ├── 192.168.1.1 │
│ └── 10.0.0.0/8 │
└─────────────────────────────────────────┘
预览部署工作流 #
典型工作流 #
text
┌──────────────────────────────────────────────────────┐
│ │
│ 1. 创建分支 │
│ │ │
│ ▼ │
│ 2. 推送代码 │
│ │ │
│ ▼ │
│ 3. 自动触发预览部署 │
│ │ │
│ ▼ │
│ 4. 在 PR 中查看预览链接 │
│ │ │
│ ▼ │
│ 5. 团队成员审查预览 │
│ │ │
│ ▼ │
│ 6. 合并到主分支 │
│ │ │
│ ▼ │
│ 7. 自动部署到生产环境 │
│ │
└──────────────────────────────────────────────────────┘
团队协作 #
text
开发者 A:
├── 创建 PR
├── 查看预览部署
└── 修复问题
开发者 B:
├── 查看预览链接
├── 测试功能
└── 添加评论反馈
设计师:
├── 查看预览效果
└── 验证设计实现
预览部署最佳实践 #
分支命名规范 #
text
推荐命名：
├── feature/xxx → 新功能
├── fix/xxx → 修复问题
├── refactor/xxx → 重构
├── docs/xxx → 文档更新
└── chore/xxx → 杂项
预览部署检查清单 #
text
┌─────────────────────────────────────────┐
│ 预览部署检查清单 │
├─────────────────────────────────────────┤
│ □ 功能是否正常工作 │
│ □ 响应式布局是否正确 │
│ □ 性能是否达标 │
│ □ 是否有控制台错误 │
│ □ 是否需要更新环境变量 │
└─────────────────────────────────────────┘
清理旧部署 #
bash
vercel remove --yes
预览部署限制 #
免费计划限制 #
text
Hobby 计划：
├── 预览部署数量：无限制
├── 部署保留时间：无限制
└── 带宽：100GB/月
Pro 计划 #
text
Pro 计划：
├── 预览部署数量：无限制
├── 部署保留时间：无限制
├── 带宽：1TB/月
└── 部署保护功能
常见问题 #
预览部署失败 #
text
检查项：
├── 构建日志错误
├── 环境变量缺失
├── 依赖安装失败
└── 内存不足
预览 URL 无法访问 #
text
检查项：
├── 部署是否完成
├── 是否有部署保护
├── 网络问题
└── DNS 问题
预览环境变量不生效 #
text
解决方案：
├── 确认变量添加到 Preview 环境
├── 重新触发部署
└── 检查变量名称
下一步 #
了解预览部署后，接下来学习 Edge Functions 探索边缘计算能力！
最后更新：2026-03-28