使用自定义 GitHub Actions CI/CD 部署到 Vercel
date
Mar 17, 2025
AI 摘要
slug
github-actions-deploy-vercel
status
Published
tags
front-end
github
summary
通过 GitHub Actions 与 Vercel 集成，实现代码的自动化部署。除了上一篇文章使用Deploy Hooks 的方式进行调用部署之外，还可以有更复杂的场景。比如可以将 Vercel 与 GitHub Actions 一起使用作为您的 CI/CD 提供程序，在每次推送代码时生成预览部署，并在代码合并到main分支时部署到生产环境。具体实现步骤包括获取访问令牌、配置 GitHub Actions，以及利用 GitHub Marketplace 上的现成 Actions 来实现更灵活的部署。
type
Post
除了上一篇介绍的 使用 Github Action自动执行Vercel 部署 使用Deploy Hooks 的方式进行部署之外，还可以有更复杂的场景。
比如可以将 Vercel 与 GitHub Actions 一起使用作为您的 CI/CD 提供程序，在每次推送代码时生成预览部署，并在代码合并到
main分支时部署到生产环境。这种则需要使用到 Vercel 的访问令牌 access_token 等。
1、获取相关访问令牌
获取
VERCEL_TOKEN、VERCEL_ORG_ID和VERCEL_PROJECT_ID 相关token。1.1、获取 Vercel api 访问令牌VERCEL_TOKEN
在 个人账号设置 → Token 菜单下，创建 api 访问令牌，也即是
VERCEL_TOKEN。
1.2、获取VERCEL_PROJECT_ID
在Vercel 具体项目下， 项目设置 下找到 Project Id。
1.3、获取VERCEL_ORG_ID
- 使用命令行
npm i -g vercel安装Vercel CLI并运行vercel login
- 在新建文件夹中，运行
vercel link以创建一个新的 Vercel 项目，或者是已有的Git 项目，会提示✅ Linked toxxx-projects/next-starter-example(created .vercel)并生成.vercel 文件夹。
- 在生成的.vercel文件夹中，从project.json
{"projectId":"prj_xxx","orgId":"team_xxx"}保存projectId和orgId。
在Account Setting→General 菜单下，有
Vercel ID[This is your user ID within Vercel.] API Token，是否可以作为VERCEL_ORG_ID？[未验证]
1.4、配置到 Github 中
将以上
VERCEL_TOKEN、VERCEL_ORG_ID和VERCEL_PROJECT_ID添加到 GitHub 项目的 actions secret 配置中。
2、配置 Github Actions
当代码推送到非 main 分支时，生成预览部署：
当代码推送到 main 分支时，生成正式部署：
3、借助marketplace 上的 Github Actions 实现
也可以借助一些已经实现好的 actions 来实现我们的需求。比如：
3.1、代码推送或者发起 pull request 时触发
3.2、另一例：deploy-to-vercel-action
使用 GitHub Actions 将您的项目/站点部署到Vercel。在何时部署站点方面，它比 Vercel 的 GitHub 集成提供了更多的自定义功能。使用 GitHub Actions Events，您可以选择部署每个提交，仅在新版本上或甚至在 cron 计划上部署。该操作还可以部署每个 PR 并使用自定义预览 URL 对其进行评论。它使用 Vercel CLI，也可以自动在 GitHub 上创建部署。