我最喜欢的托管公司之一是Vercel,因为它们可以同时提供简单性和灵活性。对于我正在构建的新产品,我想完全控制我的站点在 Vercel 上的部署过程。

通常,当您将 Vercel 与 GitHub 结合使用时。当你推送代码时,它会自动触发新的部署。您可以根据需要对其进行配置,但主要问题是您何时想要使用 GitHub 版本。 Vercel 还不能部署在新版本上。

有几种方法可以克服这一点。例如,您可以通过使用 deploy hook 调用 Vercel 来开始构建。这样,您可以在 GitHub Actions 工作流程中调用该钩子。

另一种方法是利用 Vercel CLI 和 GitHub Actions 的组合。这种方法是我使用的方法,因为这给了我在 CI/CD 过程中所需的所有灵活性。

先决条件

在开始之前,您需要知道您来自 Vercel 的 project ID 和 org ID。最简单的方法是将您的项目链接到 Vercel。您可以使用npx vercel link来执行此操作。

信息:您在此处阅读有关 CLI 的更多信息:Vercel CLI。当您还没有使用它时,它会首先要求您登录。

当您运行该命令时,它将在您的项目中创建一个.vercel文件夹,其中包含一个project.json文件。在该文件中,您将找到projectId和orgId,您可以稍后在 GitHub Actions 工作流程中使用它们。

您需要配置的其他内容是在 Vercel 上为您的项目禁用 GitHub。这样,您就可以让 Vercel 知道您想要接管控制权,并且当您将代码推送到 GitHub 时它不会触发。

要禁用 GitHub,请在项目的根目录中创建一个vercel.json文件(如果它尚不存在),并向其中添加以下内容:

{
  "github": {
    "enabled": false,
    "silent": true
  }
}

进入全屏模式 退出全屏模式

还有一件事,在 GitHub Actions 上使用 CLI 需要token。

转到Vercel Tokens,并创建一个新令牌。请妥善保管此令牌,因为您稍后将需要它。

要配置的 GitHub 机密

在您的 GitHub 项目中,转到设置并添加以下机密:

• VERCEL_ORG_ID:值是使用vercel link命令创建的 JSON 文件中的orgId。

• VERCEL_PROJECT_ID:值是使用vercel link命令创建的 JSON 文件中的projectId。

• VERCEL_TOKEN:值是您之前创建的令牌。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Dw8dQDmA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/qcxvtzr66zke6cyjt9gt.png)

GitHub 工作流程

最后一步是将作业添加到您的 GitHub 工作流程中。这是一个如何执行此操作的示例:

name: "Deploy"

on:
  release:
    types:
      - published
  push:
    branches:
      - dev
  workflow_dispatch:

jobs:
  vercel: 
    runs-on: ubuntu-latest
    name: "Deploy front-end"

    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: '14'
          registry-url: https://registry.npmjs.org/

      - name: "Deploy to Vercel"
        run: |
          prodRun=""
          if [[ ${GITHUB_REF} == "refs/heads/main" ]]; then
            prodRun="--prod"
          fi

          npx vercel --token ${VERCEL_TOKEN} $prodRun
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}

进入全屏模式 退出全屏模式

信息:当操作针对我的main分支以外的任何其他分支运行时,它不会部署到生产环境。

从上面的工作流程可以看出,GitHub Actions 工作流程只有在工作流程上有发布、推送到dev或手动触发时才会触发。

一旦你把这个工作流程放在适当的位置,你就可以控制到 Vercel 的所有部署。

文章首发于eliostruyf.com