Github Action 能做的事情太多了,我主要介绍我已经做过的事情
Npm cli 的自动发包 https://github.com/doocs/md/pull/261/files
Ci lint 检查 https://github.com/doocs/leetcode/blob/main/.github/workflows/prettier.yml
你可以有疑问,这些不应该是项目本地该做的事情么,但是其实这些都是可以被绕过的,比如在本地删除掉那些依赖或者文件,什么不符合规范的代码都能提交,但是如果放到 ci 层面的话,你提交了,我们就会在 commit 之后对提交的文件进行处理,这是绕不过去的,除了格式风格之外,我们甚至可以思考做一些单测的检查,比如 antd 的测试,单测、快照对比差异 etc…说到这,也许我们可以讨论一下最近非常火的 Oxlint,进行一波小讨论。https://juejin.cn/post/7312374060435030053
做了一个签到的工具,每天点一遍签到功能容易忘记,但是作为开发者就可以开发一个自己的小工具,让技术来便利生活。但是针对团队和公司而言,我们可以一起思考一个有价值的项目,来减轻一些重复的工作。
这是一个自动添加 label 的工具,可以针对提交的文件类型添加 label,我们都不用点开详情,都可以了解到这个 pr 对什么文件进行了修改,可以减轻一定上的理解,比如动了核心配置类的文件,一眼就看出来了,可以针对团队的需要定制化开发适合图管项目宝宝体质的 action。
一、配置 yml,通过不同的监听事件,去执行不同的 ci,执行对应的任务
on:
schedule:
- cron: '0 0/12 * * *'
workflow_dispatch:
on:
pull_request_target:
types: [opened, edited, reopened, synchronize]
on:
push:
branches: [main]
二、开发自己的 action,根据上面几个项目可以参考实现,代码都是 js 的
https://github.com/thinkasany/organize-contributors 这边以这个项目为例,示范开发一个 action 需要的步骤
简单分析一下这个 yml 文件
`name: test-doocs
on:
schedule:
- cron: "0 0 * * *"
workflow_dispatch:
jobs:
checkin:
runs-on: ubuntu-latest
steps:
- uses: thinkasany/organize-contributors@master
with:
organize_name: 'doocs'
github_token: ${{ secrets.GH_TOKEN }}
png_path: images-doocs/contributors.png
json_path: json-doocs/data.json
branch: 'master' # 不配置默认master分支
committer_name: 'think-bot' # 不配置默认 actions-user
committer_email: 'thinkasany@163.com' # 不配置默认actions@github.com
# commit_message: 'chore: 自定义的message' # 不配置默认chore: update contributors [skip ci]
① 监听了定时任务事件,每天都会执行这个 ci 脚本
② uses: thinkasany/organize-contributors@master,使用用户 thinkasany 的 organize-contributor 仓库下 master 分支的代码,这个 ci 还有一个好处就是,不需要手动去更新版本,会执行引用仓库下最新的代码,但是如何解决锁定版本呢?那就是那些 v2、v3 分支…
③ with 配置,就相当于函数入参,传入 token 以及一些其他需要的参数。
这些入参的配置在 action.yml 中配置,可以填写 required 来保证 token 必传,否则报错提示用户完善配置信息。
④ 核心代码
使用 actions 库的能力, 读取到我们需要的配置,然后就是使用我们平常的开发习惯,执行普通的 js 代码逻辑了。
const core = require("@actions/core");
const github = require("@actions/github");
const orgName = core.getInput("organize_name", { required: true });
const token = core.getInput("github_token", { required: true });
⑤ 发布
通过 @vercel/ncc 打包上传 dist/或者 docker image,别人就可以直接通过指定你的仓库来引用这个 action 了
我们可以观察一次具体的执行信息来讲解一下工作流程。https://github.com/doocs/.github/actions/runs/7242004428/job/19726836104
总结:我们可以借用 puppeteer 去实现很多能力,Chrome Headless 必将成为 web 应用**自动化****测试**的行业标杆。使用 Puppeteer
,相当于同时具有 Linux 和 Chrome 双端的操作能力,应用场景可谓非常之多。还可以作为性能分析,反正浏览器能做的事情都能做,这边我数据分析完的 canvas 图标也是通过 puppeteer 截图去做的。
Puppeteer
的能力三、使用 actions/github-script@v5,直接在 yml 文件中使用 js 进行开发。https://github.com/doocs/leetcode/pull/2103
有时候为了一个简单的功能去开发一个 action 的确划不来,然后你不熟悉 sh 的语法的话就可以直接在上面写 js,或者可以参考 facebook/react 的项目,他们也有这么做。
对于咱们团队而言,可以做一些抄送通知的任务也行的。
图管中,大部分项目是通过 tag 事件来触发 ci 构建,然后根据正则表达式区分 except 中 tag 来执行不同生产环境的构建。
在 github-ci 中,也有很类似的用法,通过不同的 tag 名称触发不同的 ci 构建,cli-v 执行 cli 的 npm 发包 ci,只有 v 的话就是 web 端的发版 ci。
个人感触:其实本身我是看不懂公司的 gitlab-ci 的,但是自从我在 github 上玩了这么多 ci 之后,回顾这个 gitlab-ci 其实没怎么查阅资料就能明白大概意思了,并且发现并优化了一个配置,先前的账号密码都直接暴露在这个文件中,但是在 github 中我们一定不会这么做,然后稍微看了一下,发现的确是可以抽到 secret 中的,也许后续我们还会在 github-action-ci 的探索中,不断发现能够优化公司内部 ci 的流程,亦或是我们也许能打造一条图管独特的 github ci 路线,降低开发和理解成本,增加效率。其实 gitlab-ci 和 github-action 能力差不多,只是 action 会更便捷一些可以用 js 实现,当我们想开发 gitlab-ci 的时候,其实也可以先用 github-action 写个小 demo 实践一下,用我们最熟悉的 js 先做完,再交给个 gpt 翻译成 sh 的代码,去完善我们所需要的功能。
参考文献:GitHub Actions 自动构建镜像 并发布到 Docker Hub
https://cloud.tencent.com/developer/article/1970757
我的实践代码:https://github.com/thinkasany/docs/pull/31
action 流程:https://github.com/thinkasany/docs/actions/runs/7258161555
- 通过 GitHub 的源代码自动构建镜像
- 将镜像上传到 Docker Hub
- 自动部署:远程服务器 pull Docker Hub
镜像 push 到 docker hub
name: Docker Image CI/CD
on:
push:
tags:
- 'v*'
jobs:
# 构建并上传 Docker镜像
build:
runs-on: ubuntu-latest # 依赖的环境
steps:
- uses: actions/checkout@v2
- name: Set Docker Image Tag
run: |
DOCKER_TAG=$(echo "${{ github.ref }}" | sed -n 's/refs\/tags\/v//p')
echo "DOCKER_TAG=${DOCKER_TAG}" >> $GITHUB_ENV
- name: Build Image
run: |
docker build -f Dockerfile -t thinkerwing/docs:${DOCKER_TAG} .
- name: Login to Registry
run: docker login --username=${{ secrets.DOCKER_USERNAME }} --password ${{ secrets.DOCKER_PASSWORD }}
- name: Push Image
run: |
docker push thinkerwing/docs:${DOCKER_TAG}
# Docker 自动部署
deploy-docker:
needs: [build]
name: Deploy Docker
runs-on: ubuntu-latest
steps:
- name: Deploy
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.HOST }} # 服务器ip
username: ${{ secrets.HOST_USERNAME }} # 服务器登录用户名
password: ${{ secrets.HOST_PASSWORD }} # 服务器登录密码
port: ${{ secrets.HOST_PORT }} # 服务器ssh端口
script: |
# 切换工作区
cd simcaptcha
# 下载 docker-compose.yml
wget -O docker-compose.yml https://raw.githubusercontent.com/yiyungent/SimCaptcha/master/docker-compose.yml
# 停止并删除旧 容器、网络、挂载点
#docker-compose down # TODO: docker-compose: command not found. 不知道为什么找不到 docker-compose,但直接连接服务器执行就可以
/usr/local/python3/bin/docker-compose down
# 删除旧镜像
docker rmi yiyungent/simcaptcha
docker rmi yiyungent/simcaptcha-client
# 登录镜像服务器
docker login --username=${{ secrets.DOCKER_USERNAME }} --password ${{ secrets.DOCKER_PASSWORD }}
# 创建并启动容器
#docker-compose up -d --build
/usr/local/python3/bin/docker-compose up -d --build
针对我的分享,希望对大家关于 ci 和 github action 的了解有加强,希望得到大家的指点,学习到更多关于 ci 的知识,然后为团队生产更多的自动化工具。也希望大家能有所收获,让技术便利生活,做一些有成就感的事情。
慢慢的接触实用的 action 相关的链接可以贴到这里
https://ant.design/docs/blog/github-actions-workflow-cn
https://github.com/actions-cool
https://github.com/ant-design/ant-design-web3/blob/main/.github/workflows/test.yml
https://juejin.cn/post/7311707089498456083