# 如何免费为你的组织项目配置 Vercel - Link: https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/ - Published: 2020-06-13T11:03:58+08:00 - Author: 白宦成 文章目录 [Toggle](https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#) * [前言](https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#%e5%89%8d%e8%a8%80) * [步骤](https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#%e6%ad%a5%e9%aa%a4) - [安装依赖](https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#%e5%ae%89%e8%a3%85%e4%be%9d%e8%b5%96) - [创建一个项目](https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e9%a1%b9%e7%9b%ae) - [使用 Vercel 部署这个项目](https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#%e4%bd%bf%e7%94%a8_vercel_%e9%83%a8%e7%bd%b2%e8%bf%99%e4%b8%aa%e9%a1%b9%e7%9b%ae) - [获取配置](https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#%e8%8e%b7%e5%8f%96%e9%85%8d%e7%bd%ae) - [配置 Github Action Secret](https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#%e9%85%8d%e7%bd%ae_github_action_secret) - [添加 Action 配置文件](https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#%e6%b7%bb%e5%8a%a0_action_%e9%85%8d%e7%bd%ae%e6%96%87%e4%bb%b6) * [总结](https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#%e6%80%bb%e7%bb%93) ## 前言 Vercel 是我自己非常喜欢的平台，我自己的一些项目都会选择使用 Vercel 来部署。比如 [Logoly](https://logoly.pro)、[EasyWPBook](https://www.easywpbook.com) 等等。 主要是其在中国大陆的访问速度是比 Netlify 和 Github Pages 更快。但不得不说的是，Vercel 提供了 Production 环境和 Development 环境，对于项目开发时是非常有用的，当你提交一个 commit 或者是一个 PR 时， Vercel 会自动帮你部署，并将相应的 URL comment 到你的 commit 或 PR 下，你只需要点击相应链接，就可以预览效果，十分方便。 但 Vercel 的 Teams 功能是付费的，对于一些 Organization 来说，你需要付费用 Vercel 成本是比较高的。特别是如果你是一个 OpenSource Project，你大概率入不敷出。在这种情况 下，**如何才能在 Organization Project 中免费使用 Vercel 呢？我考虑了一个绕过去的 方法。** 我们之所以无法使用在项目中无法免费使用 Vercel 是 Vercel 的产品策略问题。 ![](https://postimg.aliavv.com/mbp/kpub9.png) 而我们被禁用的无法使用官方自建的 Github Apps 来部署，但**不意味着我们不可以自己实现 这样的逻辑，来实现在组织内项目进行push。** 而想要达成这样的效果，需要你具备两个条件 1. 你的代码每一次提交都会自动触发 CI 2. 你的 CI 中可以自动上传代码到 Vercel 而前者，可以通过 Github 提供的 Action 来完成。后者则可以通过编写代码来完成。不过 好在，我在 Github 的 Marketplace 中找到了别人已经写好的 Action ，因此又可以少写一些 代码（开心?）。 接下来，看看具体要如何操作。 ## 步骤 ### 安装依赖 在进行后续的操作之前， 你需要先安装配置过程中的依赖。 执行如下命令安装 Vercel CLI ```shcb-line-numbers npm i -g vercel ``` ### 创建一个项目 为了正常部署，你需要创建一个项目，并将其 push 到 Github。当然，如果你已经创建好了 项目，就直接把项目 Clone 到本地就好。 ### 使用 Vercel 部署这个项目 > 这一步是为了在 Vercel 上创建一个项目，因为 Vercel 不支持通过网页端创建项目，只 > 支持在 CLI 或通过 Git 接入自动创建。 在你的项目根目录，执行命令 `vercel` 来触发 Vercel 的部署，它会自动上传你的项目到 Vercel 。如果你之前登录过，会看到类似这样的界面，根据其提示进行配置就好。如果你之前 没有登录过，你登录后会出现类似的界面。根据提示进行配置。 ![](https://postimg.aliavv.com/mbp/rwh9j.png) ### 获取配置 想要部署一个项目到 Vercel ，你需要知道三样东西 1. **Access Token**： 用于 CLI 的登录和 API 的调用，没有 Access Token ，Vercel 就没有 办法获取到你的用户身份，进行鉴权校验。 2. **Org ID**：Org ID 是指你在 Vercel 上的用户 ID。由于 Vercel 中一个人其实可以管理 和配置多个 Team ，因此需要借助 Org ID 来指定要管理哪个账号下的项目。 3. **Project ID**：很好理解，如果你要管理 Project ，就需要一个 Project ID。 其中，Access Token 你需要从 Vercel 后台的 [Tokens](https://vercel.com/account/tokens) 页面获取。 ![](https://postimg.aliavv.com/mbp/sohur.png) 而 Org ID 则可以从你的项目中的 `.vercel/project.json` 中获取。你会获得类似下面这样 的内容，其中的 OrgID 就是你在 Vercel 上的 ID ，而 Project ID 就是对应的项目 ID。 ```shcb-line-numbers {"orgId":"r359XAnYONVAmiXtdxZ22A2E","projectId":"Qma3GdwoiAfJSsbsSydBgaCDh8LJj6wTWvvqpUwrN6J2F3"} Code language: JSON / JSON with Comments (json) ``` 准备好了这三项以后，就可以进入到下一个环节，配置 Action Secret 了。 ### 配置 Github Action Secret Github Action 提供了 Secret 的机制，用来让你保存哪些安全密钥，避免直接写在 Action File 中，出现泄漏的可能。 打开你的项目的 Settings – Secrets 页面 ![](https://postimg.aliavv.com/mbp/oi5yn.png) 在这里你可以新增 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](https://github.com/ngduc/vercel-deploy-action) 按照路径创建好 `vercel.yml` 文件，然后在其中加入如下代码 ```shcb-line-numbers 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 可以提供的更多的权限控制， 会是你需要的，买一个，也不贵，是吧？ ![](https://postimg.aliavv.com/mbp/ocfv6.png) ## Comments ### By: Jalen - Link: https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#comment-188 - Published: 2020-09-06T15:36:54+08:00 你好，请问别人 fork 仓库后进行 PR，因为没有 Secret 导致 Action 运行失败，是否有解决 方法？谢谢 ### By: 白 宦成 - Link: https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#comment-189 - Published: 2020-09-06T23:03:23+08:00 你可以自己配置一套 secret ，使用相同的变量就好。 ### By: kelvin - Link: https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#comment-190 - Published: 2020-09-24T15:42:27+08:00 感觉 with 下面+ 一个 者 比较好，这样就不用来回指定域名别名了 vercel-args: –prod ### By: 白 宦成 - Link: https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#comment-191 - Published: 2020-09-25T09:39:34+08:00 这个涉及到你是否要将代码直接放置在生产环境上。一般而言，建议是不要这么做，原因是 可能会有一些意想不到的东西被手动发布。 ### By: iepngs - Link: https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#comment-192 - Published: 2020-12-18T17:12:24+08:00 请教一下，GITHUB\_TOKEN在哪里获取？ ### By: 白 宦成 - Link: https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#comment-193 - Published: 2020-12-19T10:29:26+08:00 GITHUB\_TOKEN并不需要单独获取，这个是在 Action 的运行环境中自动提取的。也不允许你 自己设置 ### By: S - Link: https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#comment-194 - Published: 2020-12-20T03:40:30+08:00 如果是做开源项目、非营利、学生组织，可以给官方发邮件获得免费 team 的赞助。 ### By: 白 宦成 - Link: https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#comment-195 - Published: 2020-12-20T03:48:36+08:00 不错的信息，我因为是商业项目，只能取巧啦。 ### By: liya - Link: https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#comment-1010 - Published: 2023-01-03T15:52:59+08:00 这个邮件具体应该怎么发呢？ ### By: 水歌 - Link: https://www.ixiqin.com/2020/06/13/how-to-free-for-your-organizations-project-configuration-vercel/#comment-196 - Published: 2021-07-12T17:37:24+08:00 感谢公子的解决方案，再分享一个可以替代 Vercel app/bot 的更高级 action —— [https://github.com/amondnet/vercel-action](https://github.com/amondnet/vercel-action)