如何免費為你的組織項目配置 Vercel
前言
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"}准備好了這三項以后，就可以進入到下一個環節，配置 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 可以提供的更多的權限控制，會是你需要的，買一個，也不貴，是吧？
