CodeXun使用自定义 GitHub Actions CI/CD 部署到 Vercel
除了上一篇介绍的 使用 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 to ``**xxx-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 分支时，生成预览部署：
name: GitHub Actions Vercel Preview Deployment
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
push:
branches-ignore:
- main
jobs:
Deploy-Preview:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Install Vercel CLI
run: npm install --global vercel@canary
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
当代码推送到 main 分支时，生成正式部署：
name: GitHub Actions Vercel Production Deployment
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
push:
branches:
- main
jobs:
Deploy-Production:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Install Vercel CLI
run: npm install --global vercel@canary
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
3、借助marketplace 上的 Github Actions 实现
也可以借助一些已经实现好的 actions 来实现我们的需求。比如：
3.1、代码推送或者发起 pull request 时触发
# 可以参考我的工作流
# 定义 GitHub Actions 的工作流程名称
name: Deploy to Vercel
# 触发条件
on:
push:
branches: [ main ] # 当代码推送到 main 分支时触发
pull_request:
branches: [ main ] # 当针对 main 分支发起 Pull Request 时触发
# 定义工作流程中的作业（jobs）
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Setup pnpm
uses: pnpm/action-setup@v2
with:
version: '9.8.0'
- name: Install Dependencies
run: pnpm install
- name: Build
run: pnpm build
- name: Deploy to Vercel
uses: amondnet/vercel-action@v25
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
working-directory: ./
3.2、另一例：deploy-to-vercel-action
使用 GitHub Actions 将您的项目/站点部署到Vercel。在何时部署站点方面，它比 Vercel 的 GitHub 集成提供了更多的自定义功能。使用 GitHub Actions Events，您可以选择部署每个提交，仅在新版本上或甚至在 cron 计划上部署。该操作还可以部署每个 PR 并使用自定义预览 URL 对其进行评论。它使用 Vercel CLI，也可以自动在 GitHub 上创建部署。
name: Deploy CI
on:
push:
branches: [master]
pull_request:
types: [opened, synchronize, reopened]
jobs:
deploy:
runs-on: ubuntu-latest
if: "!contains(github.event.head_commit.message, '[skip ci]')"
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Deploy to Vercel Action
uses: BetaHuhn/deploy-to-vercel-action@v1
with:
GITHUB_TOKEN: ${{ secrets.GH_PAT }}
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}