Vercel 与 GitHub 自动化部署

Vercel 是 Next.js 的开发商，也是目前最流行的前端托管平台之一。Vercel 最核心的体验就是与 GitHub 的无缝集成：Import, Config, Deploy。

前端托管

为什么选择 Vercel?

• Next.js 的最佳拍档: 对 Next.js 的 SSR, ISR 功能支持最好。
• Deploy Previews (预览部署): 每当你提交 Pull Request，Vercel 会自动部署一个临时的 URL，并在 PR 评论中直接展示链接，极大地提升了团队 Code Review 效率。
• 全球边缘网络: 类似于 Cloudflare，速度极快。

集成步骤

1. 注册与关联

1. 访问 Vercel.com。
2. 推荐直接使用 Continue with GitHub 注册登录。这样会自动完成账号关联。

2. 导入项目 (Import Project)

1. 在 Vercel Dashboard 点击 Add New... -> Project。
2. 在 "Import Git Repository" 区域，你会看到你 GitHub 账号下的所有仓库。
3. 点击目标仓库旁边的 Import 按钮。

3. 配置项目 (Configure Project)

Vercel 极其智能，它会自动分析你的代码结构。

• Framework Preset: 如果它检测到 next.config.js 会自动选 Next.js；检测到 vite.config.ts 会自动选 Vite。通常不需要手动修改。
• Root Directory: 假如你的前端代码是一个 Monorepo 的子目录（例如 /packages/web），可以在这里点击 Edit 修改。
• Environment Variables: 在这里填入生产环境需要的环境变量（如 API 地址、Secret Key）。

4. 部署 (Deploy)

点击 Deploy 按钮。 Vercel 会立即启动构建。对于大多数现代化前端框架，构建时间通常在 30秒 到 2分钟之间。 构建成功后，你会看到满屏的撒花特效 🎉，并且获得一个 https://your-project.vercel.app 的永久域名。

日常使用流程

集成完成后，你的开发流程将变得非常流畅：

1. 开发: 本地写代码，测试通过。
2. 提交: git push origin main。
3. 上线: 不需要做任何事！Vercel 监听到 push，自动开始构建。1分钟后，线上版本自动更新。

PR 预览模式 (重点功能)

这是 Vercel 最强大的功能之一。

1. 创建一个新分支: git checkout -b feature-new-ui。
2. 修改代码并 Push。
3. 在 GitHub 上发起 Pull Request 合并到 main。
4. 神奇的事情发生了: Vercel 会自动在这条 PR 下面评论一个构建状态 Bot。
5. 点击 Visit Preview，你可以看到这个新功能的即时演示版本。
6. 这个版本与线上生产环境完全隔离，你可以发给同事确认效果。
7. 确认无误后，合并 PR，生产环境随之自动更新。