• 如何使用 Github Action 管理 Issue

    本文作者为 360 奇舞团前端开发工程师 Daryl

    前言

    8dff5425a37a841be58635a469034ee2.png很多小伙伴打开 github 上的仓库都只使用Code查看代码，或者只是把 github 当成一个代码仓库，但是 github 还提供了很多好用的功能。

    其中，GitHub Action就是一个很好用的功能，本文将通过几个管理Issue的示例带大家了解GitHub Action:

    什么是 Github Action

    github 给所有用户都提供了临时可用的虚拟机， 我们通过创建 github action 工作流来使用这个虚拟机. 我们可以使用它来实现自动化部署、自动化测试、代码检查、管理 Issues...

    使用步骤

    在学习之前还需要准备一些资料:

    1. Github Action文档

    2. 官方仓库中有很多可以复用的 Action， 通过uses字段引用就可以直接使用了。

    3. 阮一峰的YAML 教程；

    也推荐大家使用Vscode GitHub Action插件，这个插件在登录后可以用来做语法校验，还能查看运行过的记录。

    除了这些资料之外还有些基础概念需要了解:

    1. 事件: 在工作流中可以监听 github 的一些事件， 在事件触发后执行我们定义的工作流;

    2. 上下文: github 上下文包含有关工作流运行和触发运行的事件的信息，可以读取环境变量中的大多数 github 上下文数据，并允许我们通过变量访问这些数据。

    3. 变量: 变量提供了一种存储和重用非敏感配置信息的方法。 可以将任何配置数据（如编译器标志、用户名或服务器名称）存储为变量。 变量在运行工作流的运行器计算机上插值。 在操作或工作流步骤中运行的命令可以创建、读取和修改变量。

    4. 表达式: 可以使用表达式来运算工作流程文件中的变量。

    5. 秘钥: 普通变量中存储的信息并不安全，很容易泄露，一些需要保密的信息就可以存储到秘钥中。

    如果不想去从头学习yml语法， 可以先了解一些yml的基础用法:

    • 大小写敏感

    • 使用缩进表示层级关系

    • 缩进时不允许使用 Tab 键，只允许使用空格。

    • 缩进的空格数目不重要，只要相同层级的元素左侧对齐即可

    下面开始介绍 GitHub Action 的用法

    使用 github Action ，第一步需要在项目根目录下创建.github/workflows文件夹， 所有的工作流文件都要放到这个文件夹，当事件触发时会自动执行;fd320390b995a60d40181b200cef1eed.png

    大家可以通过这个 workflow 文件示例来简单了解下各个字段的用处:

    1. name: build # workflow的名称，缺省时会使用文件名
    2. on: # workflow监听事件
    3.   push # 具体的事件
    4.     branches: # 在这些分支上才会触发
    5.       - main
    6.       - 'mona/octocat'
    7.       - 'releases/**'
    8. jobs: # 执行的工作的集合
    9.   build: # ‘build’是一个自定义的工作的id
    10.     name: rele # 当前工作的名称
    11.     runs-on: ubuntu-latest # 因为工作实际是运行在虚拟机上的，runs-on就是指定虚拟机的版本
    12.     steps: # steps是步骤的集合
    13.     - name: checkout # name是指定当前工作的名称 在workflow（工作流）文件的steps中，每个用‘-’代替缩进视为一个步骤的开始
    14.       uses: actions/checkout@v2 # uses字段是选择一个可以直接复用的action，并且在github action store中的action可以直接使用，不需要下载
    15.     - name: setting env
    16.       id: setting # id 是步骤的唯一标识符，可以使用 id 在上下文中引用该步骤
    17.       env: # 设置环境变量
    18.         NODEV: 18
    19.       run: echo "nodev=$NODEV" >> $GITHUB_OUTPUT # run字段会在命令行执行一条命令，这个命令是将"nodev=18"写入到$GITHUB_OUTPUT，这样可以为'output'添加test属性值为test1，详情参考
    20.     - name: addnode
    21.       uses: actions/setup-node@v3 # 使用node环境
    22.       with: # 为‘uses’使用的action传递参数
    23.         node-version: ${{steps.setting.output.nodev}} # 使用上面设置的变量

    在编写工作流文件之前有两件事要做:

    一. 可以在 github 或者 github action 的仓库里查找公用 action.这样可以减少很多工作量:

    常用的 action 有:

    • checkout: 帮我们自动把项目克隆到虚拟机上

    • Setup Node: 自动安装 node

    • issues-helper: 辅助处理 issues

    二. 如果没有设置 action 的读写权限，第一次运行会报错:27be5e8c4bf2d81957c5d6cefbbd7ec4.png设置权限:52bbe2c1d8090cd1dbc378dd8d5caeba.png

    再次运行:

    2346f4f49bc77397a84bf140f4c61a7a.png
    Alt text

    下面通过一些具体示例给大家介绍一些Github Action的用法:

    • 检查 issues 格式是否规范， 并关闭不规范 issue

      在开源项目中，很多人都会提一些 issue。为了方便开发者查看，可以上传 issue 模版，并且根据模版校验 issue 格式，然后关闭不符合模板格式的 issue。

      在这个示例主要介绍脚本执行怎么向github上下文注入变量，我们可以参考github 设置环境变量的教程.

      这个脚本可以配合.github/ISSUE_TEMPLATE文件夹中的 issue 模板使用的，将.md文件放入这个文件夹中就可以作为 Issue 的默认模板;

      9c7a80f20f429e4aa7c3852d33033560.png
      Alt text

      选择 Bug 提交将使用这个模板:

      1. ---
      2. name: Bug 提交
      3. about: 使用此模板来提交一个 bug。
      4. ---
      5.  
      6. # BUG 提交
      7.  
      8. ## 描述该错误
      9.  
      10. 简明扼要地描述一下这个错误是什么。
      11. 可以添加屏幕截图以帮助解释你的问题。
      12.  
      13. ## 复现
      14.  
      15. 这个 BUG 的复现步骤:
      16.  
      17. 1. ...
      18. 2. ...
      19. 3. ...
      20.    ...
      21.    或者添加录屏链接
      22.  
      23. ## 运行结果
      24.  
      25. 预期的结果:
      26. ... ...
      27. 实际的结果:
      28. ... ...
      29.  
      30. ## 运行环境信息
      31.  
      32. - Device: [e.g. 设备名称]
      33. - OS: [e.g. 操作系统]
      34. - Browser [e.g. 浏览器]
      35. - Version [e.g. 浏览器版本]
      36.  
      37. ## 其它
      38.  
      39. 在此添加关于问题的任何其它信息。

      选择功能请求将使用这个模板:

      1. ---
      2. name: 功能请求
      3. about: 使用此模板来提交一个功能请求。
      4. ---
      5.  
      6. # 功能请求
      7.  
      8. ## 你期望添加什么样的功能?
      9.  
      10. 你期望新增功能的描述，或者示例链接。

      检查 issue 格式的脚本:

      1. // action_script/lintIssue.js
      2. const issueText = process.env.ISSUE
      3.  
      4. const textSplit = issueText
      5.   .split(
      6.     `
      7. `
      8.   )
      9.   .map((str) => str.replace('\r', ''))
      10. const bugHandle = () => {
      11.   // 缺少错误描述
      12.   const desIndex = textSplit.indexOf('## 描述该错误')
      13.   if (desIndex === -1) {
      14.     console.log('ISSUE_CHECK_RESULT=unqualified')
      15.     console.log('ISSUE_CHECK_REPLY=缺少错误描述')
      16.     return
      17.   }
      18.   const repeatIndex = textSplit.indexOf('## 复现')
      19.   if (repeatIndex === -1) {
      20.     console.log('ISSUE_CHECK_RESULT=unqualified')
      21.     console.log('ISSUE_CHECK_REPLY=缺少复现步骤')
      22.     return
      23.   }
      24.   const desContent = textSplit
      25.     .slice(desIndex + 1, repeatIndex)
      26.     .join('')
      27.     .replaceAll(' ', '')
      28.   if (!desContent) {
      29.     console.log('ISSUE_CHECK_RESULT=unqualified')
      30.     console.log('ISSUE_CHECK_REPLY=缺少错误描述')
      31.     return
      32.   }
      33.   // 缺少复现步骤
      34.   const runResultIndex = textSplit.indexOf('## 运行结果')
      35.   if (runResultIndex === -1) {
      36.     console.log('ISSUE_CHECK_RESULT=unqualified')
      37.     console.log('ISSUE_CHECK_REPLY=缺少运行结果')
      38.     return
      39.   }
      40.   const repeatContent = textSplit
      41.     .slice(repeatIndex + 1, runResultIndex)
      42.     .join('')
      43.     .replaceAll(' ', '')
      44.   if (!repeatContent) {
      45.     console.log('ISSUE_CHECK_RESULT=unqualified')
      46.     console.log('ISSUE_CHECK_REPLY=缺少复现步骤')
      47.     return
      48.   }
      49.   // 运行结果
      50.   const envIndex = textSplit.indexOf('## 运行环境信息')
      51.   if (envIndex === -1) {
      52.     console.log('ISSUE_CHECK_RESULT=unqualified')
      53.     console.log('ISSUE_CHECK_REPLY=缺少运行环境信息')
      54.     return
      55.   }
      56.   const resContent = textSplit
      57.     .slice(runResultIndex + 1, envIndex)
      58.     .join('')
      59.     .replaceAll(' ', '')
      60.   if (!resContent) {
      61.     console.log('ISSUE_CHECK_RESULT=unqualified')
      62.     console.log('ISSUE_CHECK_REPLY=缺少运行结果')
      63.     return
      64.   }
      65.   // 运行环境信息
      66.   const otherIndex = textSplit.indexOf('## 其他') || textSplit.length + 1
      67.   const envContent = textSplit.slice(envIndex + 1, otherIndex)
      68.   const envReg = /\[e\.g\..{5,}\]/
      69.   let hasDevice = false
      70.   let hasOS = false
      71.   let hasBrowser = false
      72.   let hasVersion = false
      73.   let errMsg = ''
      74.   envContent.forEach((str) => {
      75.     if (str.match(envReg)) {
      76.       if (str.includes('Device')) {
      77.         hasDevice = true
      78.       } else if (str.includes('OS')) {
      79.         hasOS = true
      80.       } else if (str.includes('Browser')) {
      81.         hasBrowser = true
      82.       } else if (str.includes('Version')) {
      83.         hasVersion = true
      84.       }
      85.     }
      86.   })
      87.  
      88.   if (!hasDevice) {
      89.     errMsg += '缺少设备名称;'
      90.   } else if (!hasOS) {
      91.     errMsg += '缺少操作系统名称;'
      92.   } else if (!hasBrowser) {
      93.     errMsg += '缺少浏览器名称;'
      94.   } else if (!hasVersion) {
      95.     errMsg += '缺少浏览器版本;'
      96.   }
      97.   if (errMsg) {
      98.     console.log('ISSUE_CHECK_RESULT=unqualified')
      99.     console.log('ISSUE_CHECK_REPLY=' + errMsg)
      100.   } else {
      101.     console.log('ISSUE_CHECK_RESULT=pass')
      102.   }
      103. }
      104.  
      105. const featureHandle = () => {
      106.   // 缺少错误描述
      107.   const desIndex = textSplit.indexOf('## 你期望添加什么样的功能?')
      108.   const desContent = textSplit
      109.     .slice(desIndex + 1, textSplit.length)
      110.     .join('')
      111.     .replaceAll(' ', '')
      112.     .replaceAll('\n', '')
      113.   if (desIndex === -1 || desIndex === textSplit.length - 1 || !desContent) {
      114.     console.log('ISSUE_CHECK_RESULT=unqualified')
      115.     console.log('ISSUE_CHECK_REPLY=缺少功能描述')
      116.     return
      117.   } else {
      118.     console.log('ISSUE_CHECK_RESULT=pass')
      119.   }
      120. }
      121. if (textSplit[0] === '# BUG 提交') {
      122.   console.log('ISSUE_CHECK_TYPE=bug')
      123.   bugHandle()
      124. } else if (textSplit[0] === '# 功能请求') {
      125.   console.log('ISSUE_CHECK_TYPE=feature')
      126.   featureHandle()
      127. } else {
      128.   console.log('ISSUE_CHECK_TYPE=invalid')
      129.   console.log('ISSUE_CHECK_RESULT=unqualified')
      130.   console.log('ISSUE_CHECK_REPLY=这不是一个BUG或者功能请求')
      131. }

      工作流示例文件:

      1. # .github/workflows/close-non_standard-issue.yml
      2.   name: close non-standard issues
      3.  
      4. on:
      5.   issues:
      6.     types: [opened, edited] # issue 打开或者编辑后
      7.  
      8. jobs:
      9.   close-issue:
      10.     runs-on: ubuntu-latest
      11.     env:
      12.       ISSUE: ${{ github.event.issue.body }}
      13.     steps:
      14.       - name: 'checkout'
      15.         uses: actions/checkout@v3
      16.       - name: Setup node
      17.         uses: actions/setup-node@v3
      18.         with:
      19.           node-version: 18
      20.           registry-url: https://registry.npmjs.com/
      21.       - name: lint sh
      22.         run: node ./action_script/lintIssue.js  >> "$GITHUB_ENV" # 设置自定义github变量
      23.       - name: add-label
      24.         uses: actions-cool/issues-helper@v3
      25.         with:
      26.           actions: 'add-labels'
      27.           token: ${{ secrets.GITHUB_TOKEN }}
      28.           issue-number: ${{ github.event.issue.number }}
      29.           labels: ${{env.ISSUE_CHECK_TYPE}}
      30.  
      31.       - name: 'close-issue'
      32.         if: ${{env.ISSUE_CHECK_RESULT == 'unqualified'}}
      33.         uses: actions-cool/issues-helper@v3
      34.         with:
      35.           actions: 'close-issue'
      36.           token: ${{ secrets.GITHUB_TOKEN }}
      37.           body: |
      38.             Hello @${{ github.event.issue.user.login }}.你的Issue因为下面的原因被关闭了:
      39.             ${{env.ISSUE_CHECK_REPLY}}

    • 如果是做一些简单的校验可以使用 actions-cool/issues-helper@v3 中的 check-issue:

      这个示例主要是演示运算符的使用:

      1. name: add label of non_standard Issue
      2.  
      3. on:
      4.   issues:
      5.     types: [opened, edited]
      6.  
      7. jobs:
      8.   check-issue:
      9.     runs-on: ubuntu-latest
      10.     steps:
      11.       - id: check-issue # 必须使用id,不然不能访问到运行结果
      12.         uses: actions-cool/issues-helper@v3
      13.         with:
      14.           actions: "check-issue"
      15.           token: ${{ secrets.GITHUB_TOKEN }}
      16.           issue-number: ${{ github.event.issue.number }}
      17.           title-includes: "【,BUG,】" # 标题包含['【','BUG','】']
      18.           body-includes: "问题描述,问题复现步骤" # 内容包含 ['问题描述','问题复现步骤']
      19.       - name: add-label
      20.         uses: actions-cool/issues-helper@v3
      21.         if: ${{steps.check-issue.outputs.check-result == 'true'}} # 如果判断条件是 'true', 继续运行
      22.         with:
      23.           actions: "add-labels"
      24.           token: ${{ secrets.GITHUB_TOKEN }}
      25.           issue-number: ${{ github.event.issue.number }} # 当前Issue的编号
      26.           labels: "bug" # 添加标签: 'bug'

    • 关闭缺少复现步骤的 Issue

      有些 Issue 虽然通过了格式检查，但是还会缺少一些步骤，或者不能复现。我们可以手动添加 label，并且在三天不活跃的情况下自动关闭。

      这个示例主要是介绍怎么执行定时任务:

      1. # .github/workflows/close-inactive-issue.yml
      2. name: close inactive issue
      3. on:
      4.   schedule:
      5.     - cron: "00 12,00,18 * * *" # 在每天标准时间的12：00/00:00/18:00 执行
      6.  
      7. jobs:
      8.   check-inactive-info:
      9.     runs-on: ubuntu-latest
      10.     steps:
      11.       - name: need reproduction
      12.         uses: actions-cool/issues-helper@v3
      13.         with: # 关闭有label是'need reproduction'，并且三天不活跃的Issue
      14.           actions: "close-issues"
      15.           token: ${{ secrets.GITHUB_TOKEN }}
      16.           labels: "need reproduction"
      17.           inactive-day: 3

    • 添加标签时自动评论、关闭 BUG

      有些常用的评论内容，或者用的比较多的操作，每次使用都比较繁琐。我们可以在添加标签的时候自动评论，或者执行对应的操作。比如：自动评论欢迎词，关闭手动筛选出来不符合 issue 模版的 issue 并告诉用户原因。

      这个示例是介绍在.yml文件中长文本的写法

      1. name: Issue Labeled
      2. # .github/workflows/issue-labeled.yml
      3. # 在issue添加标签后回复对应的评论
      4. on:
      5.   issues:
      6.     types: [labeled]
      7.  
      8. jobs:
      9.   reply-labeled:
      10.     runs-on: ubuntu-latest
      11.     steps:
      12.       # 需要帮助
      13.       - name: contribution welcome
      14.         if: github.event.label.name == 'help wanted'
      15.         uses: actions-cool/issues-helper@v3
      16.         with:
      17.           actions: "create-comment"
      18.           issue-number: ${{ github.event.issue.number }}
      19.           body: |
      20.             你好 @${{ github.event.issue.user.login }}，我们完全同意你的提议/反馈，欢迎直接在此仓库 [创建一个 Pull Request](https://github.com/NI-Web-Infra-Team/vue3-template/pulls) 来解决这个问题。请将 Pull Request 发到 `dev` 分支，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。
      21.         # 补充复现流程
      22.       - name: need reproduction
      23.         if: github.event.label.name == 'need reproduction'
      24.         uses: actions-cool/issues-helper@v3
      25.         with:
      26.           actions: "create-comment"
      27.           issue-number: ${{ github.event.issue.number }}
      28.           body: |
      29.             你好 @${{ github.event.issue.user.login }}， 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。可以通过点击 [此处](https://codepen.io/pen/) 创建或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
      30.  
      31.       - name: invalid
      32.         if: github.event.label.name == 'invalid'
      33.         uses: actions-cool/issues-helper@v3
      34.         with:
      35.           actions: "create-comment, close-issue"
      36.           issue-number: ${{ github.event.issue.number }}
      37.           body: |
      38.             你好 @${{ github.event.issue.user.login }}，为了能够进行高效沟通，我们对 issue 有一定的格式要求，你的 issue 因为不符合要求而被自动关闭。你可以通过模板来创建 issue 以方便我们定位错误。谢谢配合！

    • 使用 ftp 自动部署

      如果有在公网的服务器，可以在编译完成后打包发送到自己的服务器实现自动部署。 在 github 中搜索 ftp action， 第一个 SamKirkland/FTP-Deploy-Action 就是将 github 项目部署到 ftp 服务器的:

      最后这个示例介绍的是怎么设置秘钥:

      1. name: ftp send file
      2.  
      3. on: workflow_dispatch # 手动部署
      4.  
      5. jobs:
      6.   web-deploy:
      7.     name: Deploy
      8.     runs-on: ubuntu-latest
      9.     steps:
      10.       - name: Get latest code
      11.         uses: actions/checkout@v3 # 拉取项目代码
      12.       - name: Setup node
      13.         uses: actions/setup-node@v3 # 安装node
      14.         with:
      15.           node-version: 18
      16.           registry-url: https://registry.npmjs.com/
      17.       - name: install package
      18.         run: npm i # 安装项目依赖
      19.       - name: build
      20.         run: npm run build # 编译
      21.       - name: pack
      22.         run: zip -q -r dist.zip ./dist # 打包成zip
      23.       - name: Sync files
      24.         uses: SamKirkland/FTP-Deploy-Action@v4.3.4 # 上传到ftp服务器
      25.         with:
      26.           server: 10.52.0.x # 服务器地址
      27.           username: testusername # 服务器用户名
      28.           password: ${{ secrets.ftp_password }} # 服务器密码

      • 设置在 action 中可以访问的秘钥

        服务器密码secrets.ftp_password，就是在 github 中设置的秘钥:b3d99db7d108040500fff6d37fa69e6e.png867d509abfe9593c34cc56843d76a50d.pngb7c069e7c56c2492b06faab1c25cedc2.png

    结语

    通过使用 Github Action 来管理 Issue，可以有效的提高生产力和效率，在自动化、协作、代码质量管理等方面都有提升，并帮助我们更好地组织和管理问题。文章篇幅有限，我们暂且介绍到这里，感兴趣的小伙伴们可以再自行探索。

    - END -

    关于奇舞团

    奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

    bcac0ea2df12f76a06b72b602213b300.png

  • 相关阅读:
    tkmybatis 权威指南 官方文档
    完美PDF打印：PDFPrinting.NET Crack
    基于LEX的词法分析实验
    【小呆的热力学笔记】热力学第一定律
    李宏毅机器学习笔记-transformer
    Linearization
    python-opencv 之开运算、闭运算、形态学梯度、“礼帽”和“黑帽”
    含文档+PPT+源码等]精品基于springboot幼儿园管理系统包运行成功]Java毕业设计SpringBoot项目源码
    HCIA-HarmonyOS设备开发V2.0证书
    Jetson Agx Xavier平台V4L2 qeues是否可优化问题
  • 原文地址：https://blog.csdn.net/qiwoo_weekly/article/details/134410841