用 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：

• https://vercel.com/blog/build-output-api

思路变化

之前想的是尽量避免亲自使用 vercel cli 命令行，现在发现现成的 github action 不够用，不足以支撑 monorepo 项目的部署。

故考虑写适应自己需求的工作流。

1. 根目录单一 vercel.json，一次部署

• https://vercel.com/docs/build-output-api/v3/primitives#static-files

该方案需要考虑根目录下的 .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

2024-06-25-23-32-24

可以考虑直接让 vuepress2 自己定向打包，满足 .vercel/output/static 的位置即可，剩下的直接就部署即可。

策略选型

考虑使用第三种方案。

阶段性成果

自写的 vercel cli 工作流如下：

# 参考资料
# 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

思路讲解

1. 子目录连接 vercel 项目。
2. 用 vc build 命令生成一个空内容的，满足 Build Output API 格式规范的文件夹。没有调用真正的打包命令。
3. 调用真实业务用的打包命令，并且把打包内容填充到 .vercel/output/static 指定路径内。
4. 用 vc deploy 和 vc alias 命令完成产物文件上传和域名分配。

下一步优化思路

1. 在调用真实打包命令时，可以考虑批量的并行部署。
2. 上述的命令行还是比较冗杂的。有没有更好的方式传递 token？
3. 先去看看 monorepo 任务调度的知识点，拓展视野后再考虑优化配置方案。