工程化

前言

Vercel 是我自己非常喜欢的平台，我自己的一些项目都会选择使用 Vercel 来部署。比如 Logoly、EasyWPBook 等等。

主要是其在中国大陆的访问速度是比 Netlify 和 Github Pages 更快。但不得不说的是，Vercel 提供了 Production 环境和 Development 环境，对于项目开发时是非常有用的，当你提交一个 commit 或者是一个 PR 时， Vercel 会自动帮你部署，并将相应的 URL comment 到你的 commit 或 PR 下，你只需要点击相应链接，就可以预览效果，十分方便。

但 Vercel 的 Teams 功能是付费的，对于一些 Organization 来说，你需要付费用 Vercel 成本是比较高的。特别是如果你是一个 OpenSource Project，你大概率入不敷出。在这种情况下，如何才能在 Organization Project 中免费使用 Vercel 呢？我考虑了一个绕过去的方法。

我们之所以无法使用在项目中无法免费使用 Vercel 是 Vercel 的产品策略问题。

而我们被禁用的无法使用官方自建的 Github Apps 来部署，但不意味着我们不可以自己实现这样的逻辑，来实现在组织内项目进行push。

而想要达成这样的效果，需要你具备两个条件

你的代码每一次提交都会自动触发 CI
你的 CI 中可以自动上传代码到 Vercel

而前者，可以通过 Github 提供的 Action 来完成。后者则可以通过编写代码来完成。不过好在，我在 Github 的 Marketplace 中找到了别人已经写好的 Action ，因此又可以少写一些代码（开心?）。

接下来，看看具体要如何操作。

步骤

安装依赖

在进行后续的操作之前，你需要先安装配置过程中的依赖。

执行如下命令安装 Vercel CLI

npm i -g vercel

创建一个项目

为了正常部署，你需要创建一个项目，并将其 push 到 Github。当然，如果你已经创建好了项目，就直接把项目 Clone 到本地就好。

使用 Vercel 部署这个项目

这一步是为了在 Vercel 上创建一个项目，因为 Vercel 不支持通过网页端创建项目，只支持在 CLI 或通过 Git 接入自动创建。

在你的项目根目录，执行命令 vercel 来触发 Vercel 的部署，它会自动上传你的项目到 Vercel 。如果你之前登录过，会看到类似这样的界面，根据其提示进行配置就好。如果你之前没有登录过，你登录后会出现类似的界面。根据提示进行配置。

获取配置

想要部署一个项目到 Vercel ，你需要知道三样东西

Access Token：用于 CLI 的登录和 API 的调用，没有 Access Token ，Vercel 就没有办法获取到你的用户身份，进行鉴权校验。
Org ID：Org ID 是指你在 Vercel 上的用户 ID。由于 Vercel 中一个人其实可以管理和配置多个 Team ，因此需要借助 Org ID 来指定要管理哪个账号下的项目。
Project ID：很好理解，如果你要管理 Project ，就需要一个 Project ID。

其中，Access Token 你需要从 Vercel 后台的 Tokens 页面获取。

而 Org ID 则可以从你的项目中的 .vercel/project.json 中获取。你会获得类似下面这样的内容，其中的 OrgID 就是你在 Vercel 上的 ID ，而 Project ID 就是对应的项目 ID。

{"orgId":"r359XAnYONVAmiXtdxZ22A2E","projectId":"Qma3GdwoiAfJSsbsSydBgaCDh8LJj6wTWvvqpUwrN6J2F3"}
Code language: JSON / JSON with Comments (json)

准备好了这三项以后，就可以进入到下一个环节，配置 Action Secret 了。

配置 Github Action Secret

Github Action 提供了 Secret 的机制，用来让你保存哪些安全密钥，避免直接写在 Action File 中，出现泄漏的可能。

打开你的项目的 Settings – Secrets 页面

在这里你可以新增 Secret ，你需要新增三个 Secret ，分别是

ORG_ID：填写你从 .vercel/project.json 中获取到的 orgId;
PROJECT_ID：填写你从 .vercel/project.json 中获取到的 projectId；
VERCEL_TOKEN：填写你从 Vercel 后台生成的 Token。

这样，就配置好了 Secret ，接下来就可以在你的项目中加入 a、Action 配置文件，完成项目的配置。

添加 Action 配置文件

根据 Github 的规范，你需要将你的 Action 配置文件放置在项目根目录的 .github/workflows/xxx.yml 文件中，其中 xxx 是你的 Action 名，比如叫 vercel.yml 。

这里我使用的是 ngduc 写的 vercel-deploy-action

按照路径创建好 vercel.yml 文件，然后在其中加入如下代码

name: deploy website
on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: ngduc/vercel-deploy-action@master
        with:
          vercel-cli: vercel
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID}}
          vercel-project-id: ${{ secrets.PROJECT_ID}}
          github-token: ${{ secrets.GITHUB_TOKEN }}

粘贴进去以后，将 vercel.yml 添加到 git 控制中，并提交到 Github 上，就可以实现触发 Vercel 了。

总结

虽然 Vercel 本身不能免费提供 Organization 的支持，但是我们可以通过一些小的技巧，绕过其官方的配置。对于一些只是将 Vercel 配置为开发者预览的场景下来说，还是足够的。

但如果你希望将 Vercel 配置为生产环境，那么 Teams Plan 可以提供的更多的权限控制，会是你需要的，买一个，也不贵，是吧？

白宦成

Just Keep Shipping

如何免费为你的组织项目配置 Vercel

前言

步骤