前言
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 可以提供的更多的权限控制,会是你需要的,买一个,也不贵,是吧?