用 vercel cli 编写简单的 github action 完成部署
参考资料
工作流配置：
- https://vercel.com/guides/how-can-i-use-github-actions-with-vercel
- https://vercel.com/guides/how-to-alias-a-preview-deployment-using-the-cli
Build Output API：
思路变化
之前想的是尽量避免亲自使用 vercel cli 命令行，现在发现现成的 github action 不够用，不足以支撑 monorepo 项目的部署。
故考虑写适应自己需求的工作流。
1. 根目录单一 vercel.json，一次部署
该方案需要考虑根目录下的 .vercel/output/static 的文件划分。
这个目录将会包含全部子项目的内容。
考虑项如下：
- vuepress2 打包配置要设置 dest 打包目录。
- vuepress2 可能还要配置 base 路径，以便映射 url，确保 css 资源加载正确。
- 两次连续的 vercel build 会覆盖掉之前已经打包好的项目。会清空掉
.vercel/output/static内的静态资源。故 build 命令只能运行一次。 - 需要查询 url 域名配置的 api，以便确保单一目录可以映射多个 url
2. 各子目录各自部署
.vercel/output/static的位置不合适，可能无法使用根目录提供的 pnpm 命令。可能无法实现集中化调度。
3. 基于 Build Output API 的各子目录各自部署
- https://vercel.com/blog/build-output-api
- https://vercel.com/blog/behind-the-scenes-of-vercels-infrastructure
可以考虑直接让 vuepress2 自己定向打包，满足 .vercel/output/static 的位置即可，剩下的直接就部署即可。
策略选型
考虑使用第三种方案。
阶段性成果
自写的 vercel cli 工作流如下：
yaml
# 参考资料
# https://vercel.com/guides/how-can-i-use-github-actions-with-vercel
# https://vercel.com/guides/how-to-alias-a-preview-deployment-using-the-cli
name: 基于vercel命令的部署
env:
vercel-token: ${{ secrets.vercel_token }}
# 从教程内得知 环境变量名称必须大写
VERCEL_ORG_ID: ${{ secrets.vercel_orgId }}
VERCEL_PROJECT_ID: ${{ secrets.vercel_projectId }}
on:
push:
branches:
- dev
jobs:
Deploy-Production:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@main
- name: 开启 corepack
run: corepack enable && corepack install
- name: 检查pnpm版本
run: pnpm -v
- name: 安装整个项目的依赖
run: pnpm i
- name: 用npm安装vercel cli工具
run: npm i -g vercel@latest
- name: 检查vercel cli版本
run: vc -v
- name: 连接现有的项目
# 本地window使用
# run: vc link --yes --cwd=./packages/monorepo-3 --project=vercel-monorepo-test-1-zn20
run: vc link --yes --cwd=./packages/monorepo-3 -t ${{ secrets.vercel_token }}
- name: vercel打包monorepo-3
run: vc build --yes --prod --cwd=./packages/monorepo-3 -A ./vercel.null.json -t ${{ secrets.vercel_token }}
# build命令仍然需要用token来运行。
# run: vc build --yes --prod --cwd=./packages/monorepo-3 -A ./vercel.null.json
- name: pnpm打包monorepo-3
run: pnpm -F @ruan-cat-vercel-monorepo-test/monorepo-3 docs:build
- name: 部署到vercel内
run: |
url="$(vc deploy --yes --prebuilt --prod --cwd=./packages/monorepo-3 -t ${{ secrets.vercel_token }})"
vc alias -t ${{ secrets.vercel_token }} set "$url" monorepo-3.ruancat6312.top思路讲解
- 子目录连接 vercel 项目。
- 用 vc build 命令生成一个空内容的，满足
Build Output API格式规范的文件夹。没有调用真正的打包命令。 - 调用真实业务用的打包命令，并且把打包内容填充到
.vercel/output/static指定路径内。 - 用 vc deploy 和 vc alias 命令完成产物文件上传和域名分配。
下一步优化思路
- 在调用真实打包命令时，可以考虑批量的并行部署。
- 上述的命令行还是比较冗杂的。有没有更好的方式传递 token？
- 先去看看 monorepo 任务调度的知识点，拓展视野后再考虑优化配置方案。
贡献者
ruan-cat