浙江又拍云科技有限公司
用户3229
添加快捷方式
分享
峰照前端短分享-CI篇-Github Action
输入“/”快速插入内容
峰照前端短分享-
CI
篇-Github Action
用户1141
用户1141
2023年12月26日修改
💡
概要:通过这次分享,我来讲清楚github action是什么,能干什么,怎么做到的
对github action感兴趣的同学可以联系我 👉
用户1141
用户1141
Github Action 是什么
•
官方套话:GitHub Actions 是 GitHub 提供的一项功能,它允许您自动化软件开发工作流程。使用 GitHub Actions,您可以在代码仓库中设置自定义的
CI
/CD(持续集成/持续部署)流水线,以响应各种事件,如代码推送、拉取请求(PR)的创建和关闭等。这使得开发团队能够更轻松地构建、
测试
和部署其应用程序。
•
我的理解:自动化,就是自动触发的一些事件,将重复的指令写成自动化脚本,能够简约效率,减轻对不同项目的理解心智,比如项目每次做完发布之前,要执行的各类操作,我还得本地先build, 再打tag, 再手动更新,不同项目还不一样,现在只要一个命令,完成所有流程。
Github Action 能干什么
Github Action 能做的事情太多了,我主要介绍我已经做过的事情
1.
Npm
cli
的自动发包
https://github.com/doocs/md/pull/261/files
1) 就我们团队而言,UpYunTool和西湖项目的发布工具是已经抽成
npm
包的了,后续也许会拓展,npm发布的过程很简单,npm login、 npm publish,但是需要把源切回npm的镜像(但是为了更快的下载速度我们还得切回源,来回切本就是一个没有意义且浪费时间的事情),而且login还需要输入
账号
密码,如果做成
ci
的话,我们只需要一个token,配置在secret中,就算是多个不同的项目也只输入一个固定指令,剩下的交给ci。
2) 我们可以开发一个图管
cli
,用于搭建一些项目模版,比如之前用到的express代理dist文件实现
dev
环境的模版代码,或者后面需要做一些简单项目的时候,可以配置进去。然后就可以通过脚手架快速生成工程模板。
2.
Ci
lint检查
https://github.com/doocs/leetcode/blob/main/.github/workflows/prettier.yml
你可以有疑问,这些不应该是项目本地该做的事情么,但是其实这些都是可以被绕过的,比如在本地删除掉那些依赖或者文件,什么不符合规范的代码都能提交,但是如果放到
ci
层面的话,你提交了,我们就会在commit之后对提交的文件进行处理,这是绕不过去的,除了格式风格之外,我们甚至可以思考做一些单测的检查,比如antd的
测试
,单测、快照对比差异
etc
...说到这,也许我们可以讨论一下最近非常火的Oxlint,进行一波小讨论。
https://juejin.cn/post/7312374060435030053
3.
数据统计
https://github.com/thinkasany/organize-contributors
市面上针对commit的统计只有针对项目级别的,但是一个组织下面有多个项目,又该如何统计呢,于是我开发了一款action,并复用于多个大型开源社区以及咱们自己的fe team,其实github action也可以用js开发,然后在其他的项目中通过yml引用这个action下的仓库就好了。近期年终项目的桑葚图页面其实完全就可以通过一个在线文档来维护,然后添加不同的负责人之后,写个定时任务,定期更新站点。
4.
签到助手
https://github.com/thinkasany/cordcloud-action-js
做了一个签到的工具,每天点一遍签到功能容易忘记,但是作为开发者就可以开发一个自己的小工具,让技术来便利生活。但是针对团队和公司而言,我们可以一起思考一个有价值的项目,来减轻一些重复的工作。
5.
针对pr做一些处理
https://github.com/thinkasany/pr-label-action
这是一个自动添加label的工具,可以针对提交的文件类型添加label,我们都不用点开详情,都可以了解到这个pr对什么文件进行了修改,可以减轻一定上的理解,比如动了核心配置类的文件,一眼就看出来了,可以针对团队的需要定制化开发适合图管项目宝宝体质的action。
怎么做到的
一、配置yml,通过不同的监听事件,去执行不同的
ci
,执行对应的任务
•
定时任务
代码块
YAML
on:
schedule:
- cron: "0 0/12 * * *"
workflow_dispatch:
•
监听pr 事件
代码块
YAML
on:
pull_request_target:
types: [opened, edited, reopened, synchronize]
•
监听
push
事件
代码块
YAML
on:
push:
branches: [ main ]
二、开发自己的action,根据上面几个项目可以参考实现,代码都是js的
https://github.com/thinkasany/organize-contributors
这边以这个项目为例,示范开发一个action需要的步骤
1.
配置 yml 文件
简单分析一下这个yml文件