给antd贡献github-action-workflow

之前自己的项目一直都有在用 Github Action, 比如我的 my-blog 仓库就有在用。

最近一段时间活跃在 Ant Design 社区, 看到偏右大佬创建了一个 issus #39303, 希望添加一个 workflow, 自己比较感兴趣，于是接手这个需求。

下面将我如何解决问题，以及遇到的一些问题记录分享一下

参与开源

前几天我做了我的第一支视频如何给 Ant Design 开源项目贡献 PR, 感兴趣的可以看看。

需求分析

参考 ant-design-mobile, 每次发布新版本后，都在提交记录上评论一条具体版本的文档站点.

具体沟通都在 issue 里面评论了

Github Action

Github Action 可以理解成和 Gitlab 的 CI/CD 功能一样。设置一些自定义触发事件，自动运行一些工作流程。（比如构建、打包）

详细文档可以阅读 Github Action 官方文档

本次仅记录我遇到的一些问题

监听事件

监听 release 事件, types: [published] 则表示成功发布了 Release 操作 (进入工作流)

这里 workflow_dispatch 是方便我们手动触发建 (调试用的)

on:
  release:
    types: [published]
  workflow_dispatch:

Setup Job

setup 表示一个 job, runs-on 表示运行的宿主机，通常默认 ubuntu-latest 就好了, if 则是判断我们是否需要执行 setup 这个 job; startsWith、contains 方法都是内置的。这里的逻辑是判断触发的引用用是一个 tag 并且 tab中不包括 - (e.g 5.0.0-beta.0, 5.0.1-rc.0), github.ref、github.ref_name 都是 github.context;

jobs:
  setup:
    runs-on: ubuntu-latest
    if: startsWith(github.ref, 'refs/tags/') && (contains(github.ref_name, '-') == false)

中间未修改部分略过～，主要有 node_modules 依赖缓存相关

Build Job

needs:{job_name} 表示前面一个 job 执行完成后再执行当前 job

# more ...
build-and-deploy:
  runs-on: ubuntu-latest
  needs: setup

step get version

这里这表示把版本号里面的 . 替换为 - 方便 url 阅读。

1
2
3

- name: Get version
  id: publish-version
  run: echo "VERSION=$(echo ${{ github.ref_name }} | sed 's/\./-/g')" >> $GITHUB_OUTPUT

遇到不会的地方，我们可以借助 Github Copilot, 比如上面的 sed 命令就是 Copilot 帮助我写的。我的提效助手 Github Copilot

Deploy

Ant Design 中使用了 Surge 部署静态站点，其中 PR Preview 也是。所以至今参考 PR action 部署网站到 surge。

steps.publish-version.outputs.VERSION 表示上一个步骤中输出的内容(处理后的版本号)

- name: Deploy to Surge (with TAG)
  run: |
    export DEPLOY_DOMAIN=ant-design-${{ steps.publish-version.outputs.VERSION }}.surge.sh
    npx surge --project ./_site --domain $DEPLOY_DOMAIN --token ${{ secrets.SURGE_TOKEN }}

Comment

上一个步骤成功后，最后我们对发布操作进行一个评论，将部署成功后的站点添加到评论区。

- name: Create Commit Comment
  uses: peter-evans/commit-comment@v1
  with:
    body: |
      Doc site for this release: https://ant-design-${{ steps.publish-version.outputs.VERSION }}.surge.sh

至此，我们一整个功能就补充完成了。可以看一下具体的效果图：