Github Action CI 篇：自动发包及相关应用详解

菏泽炫佑科技

Github Action CI 篇：自动发包及相关应用详解

能做的事情太多了，我主要介绍一下我做过的

Npm cli 自动发布软件包

就我们团队而言，发布工具已经抽取成npm包了，后续可能会进行扩展。npm发布流程很简单，npm login，npm，但是需要切换回npm镜像（但是为了下载更快，还是要切换回源，来回切换是一件毫无意义又费时间的事情），login还需要输入账号密码。如果做成ci的话，我们只需要一个token，配置进去，即使有多个不同的项目，也只需要输入一个固定的指令自动化软件开发，剩下的就交给ci了。我们可以开发一个cli，用来搭建一些项目模板，比如之前用来代理dist文件，实现dev环境的模板代码，或者后续需要做一些简单的项目的时候，配置一下就可以了。然后就可以通过脚手架快速生成项目模板了。

Ci lint 检查

你可能会有疑问，这些难道不应该是项目本地应该做的事情吗？但其实这些是可以绕过的，比如本地删除那些依赖或者文件就可以了。任何不符合规范的代码都可以提交，但如果放在CI层面，你提交了，我们后面再处理提交的文件，这个是避免不了的。除了格式样式，我们甚至可以考虑做一些单元测试的检查，比如antd测试，单元测试，快照对比差异等...说到这，或许我们可以讨论一下*近很火的话题，小小探讨一下。

统计数据

市面上的统计都是只针对项目级别的，但是当一个组织下有多个项目时，该怎么统计呢？所以我开发了一个，在多个大型开源社区和我们自己的 fe 团队中复用。其实也可以用 js 开发，然后在其他项目中通过 yml 引用这个下的仓库。*近年终项目的桑葚图页面Github Action CI 篇：自动发包及相关应用详解，其实可以通过一个在线文档来维护，然后添加不同的负责人后，写一个定时任务，定期更新站点。登录助手

我们做了一个签到工具，每天很容易忘记点签到功能，但是作为开发者，可以开发自己的小工具，让科技便捷生活。但对于团队和公司来说，我们可以一起想出一个有价值的项目，减少一些重复性的工作。

为 pr 做一些处理

这是一个自动添加标签的工具，可以给提交的文件类型添加标签，我们甚至不需要点击详情就能知道这个 PR 修改了哪些文件，这样可以减少一定的理解难度，比如核心配置文件是否被移动了，一目了然。可以根据团队的需求进行适合图形化管理项目的定制化开发。

你是怎么做到的

1.配置yml通过不同的监控事件执行不同的ci及对应的任务

on:
  schedule:
    - cron: '0 0/12 * * *'
  workflow_dispatch:

on:
  pull_request_target:
    types: [opened, edited, reopened, synchronize]

on:
  push:
    branches: [main]

2、自己开发，可以参考上面的项目实现，代码都是js。

这里我们以这个项目为例，演示开发

配置 yml 文件

我们来简单分析一下这个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脚本

②使用：/-@，使用用户的-仓库分支里的代码。这种CI还有一个好处就是不需要手动更新版本，会执行参考仓库里*新的代码，但是版本锁定了怎么解决呢？也就是那些v2，v3的分支……

③ with配置相当于函数输入，传入token和其他一些必需的参数。

这些输入参数都是在.yml中配置的，可以随意填写，确保token是必须传递的，否则会给出错误提示，提示用户补充配置信息。

④ 核心代码

利用库的能力来读取我们所需要的配置，然后使用我们平时的开发习惯来执行普通的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 });

⑤ 发布

通过 @/ncc 包上传 dist/ 或图像，其他人可以通过指定你的存储库直接引用它

我们可以观察具体的执行信息来解释工作流程。

总结：我们可以用它实现很多能力，也必将成为 Web 应用自动化测试的行业标杆。用它相当于同时拥有 Linux 和双端的运行能力，应用场景非常多。还可以用它来做性能分析，总之，浏览器能做到的，它都能做到。这里的图标也是我经过数据分析后截图做的。

能力

3、使用/-@v5，直接在yml文件中使用js进行开发。

有时候开发一个简单的功能并不值得，如果你对sh的语法不熟悉，那么可以直接写js在上面，也可以参考/react项目，它也是这样做的。

对于我们的团队来说，我们还可以执行一些诸如复制通知之类的任务。

评论-ci

在镜像管道中，大多数项目通过标签事件触发CI构建，然后使用正则表达式区分标签以在不同的生产环境中执行构建。

在-ci中，也有很相似的用法，通过不同的标签名触发不同的ci构建。cli -v 执行cli的npm ci。如果只有v，就是web端 ci。

个人感受：其实我不是很懂公司的-ci，但是因为在网上玩过那么多ci，回头看这个-ci，不用太多参考也能明白大概意思，并且找到并优化了一个配置。之前账号密码直接暴露在这个文件里，但是我们在游戏里肯定不会这么做。然后我随便看了一下，发现确实可以画出来。也许我们在-ci的探索中，还会继续想办法优化公司内部的ci流程，或者可以为地图管理打造一​​个独特的ci路线，降低开发理解成本，提高效率。其实-ci和-ci的功能差不多，但是更方便，可以用js来实现。当我们要开发-ci的时候，其实可以用-ci写个小demo来练练手，先用我们*熟悉的js，然后交给gpt翻译成sh代码，完善我们所需要的功能。

使用 - 从头开始​​自动构建图像

参考：自动构建镜像并发布到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和，也希望得到大家的建议，学习更多的CI知识，进而为团队制作出更多的自动化工具。也希望大家能够有所收获，让科技便利生活，做一些有意义的事情。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等