聊聊实现自动化构建与部署

开发 前端
在GitHub的项目仓库中有一个Actions模块,它是一个持续集成(CI)和持续部署(CD)平台,开发者可以利用它提供的配置规则,通过编写yaml文件[1]来自定义工作流程,实现代码的构建、测试、打包、发布等。

前言

这几天玩了下GitHub的自动化构建与部署,实现了给分支打上tag执行构建命令,构建完成之后将其上传到releases并生成更新日志。

本文就跟大家分享下我是如何实现这套CI的,欢迎各位感兴趣的开发者阅读本文。

实现思路

在GitHub的项目仓库中有一个Actions模块,它是一个持续集成(CI)和持续部署(CD)平台,开发者可以利用它提供的配置规则,通过编写yaml文件[1]来自定义工作流程,实现代码的构建、测试、打包、发布等。

图片

工作原理

GitHub Actions的核心是工作流程(Workflow)。它是由一个或多个步骤(step)组成的一系列自动化任务,可以使用三大平台(MacOS/Windows/Linux)的操作系统,运用各种编程语言和工具实现项目的构建。工作流程可以根据事件触发,例如在代码提交、拉取请求、新增tag时触发,也可以手动触发。

一些常见的使用场景:

  • 自动化测试:在提交代码或者拉取请求时自动运行测试,以确保代码质量和稳定性
  • 自动化部署:在代码合并到主分支后,自动部署应用程序到生产环境
  • 自动化构建:自动化构建和打包应用程序,以便进行部署或发布
  • 自动化通知:根据事件触发发送通知和提醒
  • 自动化文生成:在代码合并后自动生成和发布文档

GitHub Actions的官方文档中有丰富的例子和使用教程,感兴趣的开发者请移步:

  • GitHub Actions 快速入门[2]

使用方法

阅读官方文档后,我们知道了应该如何编写一个工作流配置,如下所示:

  • 在项目的根目录创建.github文件夹
  • 在.github文件夹内创建workflows文件夹
  • 在workflows文件夹内创建build-release.yml文件

这个后缀为.yml的文件就是我们实现想法的地方,根据文档中所罗列的可供我们使用的方法,结合自己的需求完成配置的编写,GitHub Action就会按照我们的命令去做事情(命令式编程)。

实现过程

本文就以我的截图插件[3]为例,跟大家分享下我是如何用这套CI/CD工具来简化我的工作流提升效率的。

创建token

在工作流中,我们需要对项目做操作就得拥有完整的仓库操作权限,它的原理是通过读取存储在secrets​环境变量中的字段来完成鉴权的。我们在配置文件中通过GITHUB_TOKEN字段来指定即可完成这一操作。

首先,我们登录GitHub,进入settings-tokens[4]面板。

  • 点击页面右上角的Generate new token
  • 在弹出的菜单中选择Generate new token (classic)

图片

在打开的新面板中,填写相关信息:

  • Note,你的token名
  • Expiration,过期时间,我这里选择的是No expiration永不过期
  • Select scopes,选择你这个token可以使用哪些功能,按需选择即可,当然为了省事你也可以全选。

图片

创建完成后,你会看到成功的提示并附带着token,将这个token复制下来。

图片

打开项目的settings模块,进入settings/secrets/actions[5]面板。

  • 点击右上角的New repository secret
  • 填写Name,你在yml配置文件里通过secrets变量访问时的属性名。
  • 填写Secret,在上一步拿到的token。

图片

image-20230404071035745

实现自动构建与部署

通常情况下,我的截图插件[6]开发完成之后,发布到GitHub的Releases的流程为:

  • 构建项目

执行项目的构建命令

将生成的dist文件夹打成zip包

  • 在GitHub上创建Release
  • 设置tag

  • 填写release名

  • 将zip包上传到刚才创建好的Release中

  • 填写更新日志

那么,我们只需要将上述流程转换为GitHub Actions的workflows即可,步骤如下:

  • 打开我们在使用方法章节创建好的build-release.yml文件
  • 填写工作流的名字
  • 定义此工作流需要对仓库中的文件进行写入的操作权限
  • 定义此工作流的触发条件
  • 当推送的tag中以v开头就执行
  • 编写此工作流需要执行的任务
  • 构建项目、创建release、上传zip包

  • 生成更新日志

下属配置中,我们上述工作流拆分成了2个串行任务:

  • 构建与上传
  • 创建更新日志
name: Build and Release

# 定义本Action需要对仓库中的文件进行写操作的权限。
permissions:
contents: write

# 推送的tag中以v开头则执行此action
on:
push:
tags:
- "v*"

jobs:
build-release:
runs-on: "ubuntu-latest"
steps:
- name: "Checkout code"
uses: actions/checkout@v3

# 设置node版本
- name: "Set up Node.js"
uses: actions/setup-node@v3
with:
node-version: '14.18.0'
# 安装依赖
- name: "Install dependencies"
run: npm install
# 执行构建命令
- name: "Install dependencies"
run: npm run build-rollup:prod
# 将dist目录打成zip包
- name: Zip Dist
run: zip -r dist.zip dist
# 创建Release
- name: Create Release
id: create_release
uses: actions/create-release@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUBTOKEN }}
with:
tag_name: ${{ github.ref }}
release_name: ${{ github.ref }}
draft: false
prerelease: false
# 上传zip包
- name: Upload Release Asset
uses: actions/upload-release-asset@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUBTOKEN }}
with:
upload_url: ${{ steps.create_release.outputs.upload_url }}
asset_path: ./dist.zip
asset_name: js-screen-shot-dist.zip
asset_content_type: application/zip


create-changelog:
runs-on: ubuntu-latest
# 需要等build结束后才执行此处
needs: build-release
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0

- uses: actions/setup-node@v3
with:
node-version: 16.x

# 生成版本更新日志
- run: npx changelogithub
env:
GITHUB_TOKEN: ${{secrets.GITHUBTOKEN}}

配置编写完成后,提交代码并推送至远程仓库就完成了这个工作流的创建。我们只需要给分支上的提交记录打上tag,命名时以v开头,将tag推送至远程仓库,这套工作流就会自动执行。

图片

最后,在项目的actions面板就能看到此工作流的运行日志了。

图片

项目的Releases中也出现了我们构建好的压缩包以及更新日志。

图片

如果你使用的webstorm可以通过安装GitHub Actions Manager插件来快速查看和管理每个工作流的执行情况。

图片

实现issue创建模版

GitHub的默认issue在创建时并没有分的很细,虽然它提供了很多选项给提问者,但是大多数人在提问问题的时候,都不会注意到这些选项。因此,我们希望在提问时可以把issue进行细分,比如:

  • Bug,使用插件的过程中遇到了一些问题
  • Feature,使用插件的过程中希望可以加入某个功能
  • General,其他有关插件的问题(比如插件的xx功能怎么用)

要实现这些,我们需要在项目的.github目录下创建ISSUE_TEMPLATE文件夹,通过创建.yml文件编写配置来实现。

  • bug-report.yml[7]
  • feature-request.yml[8]
  • general.yml[9]

将这些文件放入指定目录推送至GitHub后,我们再去创建issue,就能看到如下所示的界面了。

图片

有关这一块的配置GitHub的官方文档[10]已经讲的很清楚了,此处我们就不做过多的介绍了。你可以直接点击上方的链接把相关的yml文件下载下来稍作修改,放到你项目的指定目录即可。

实现issue的自动回复

通常情况下,我们收到issue后都会简单的回一下对方,幸运的是这个流程我们也可以通过GitHub Actions来实现。

在workflows文件夹下创建issue-reply.yml文件。

  • 监听有label的 issue 创建时触发工作流程
  • 根据不同的label创建对应的comment
name: Issue Reply

on:
issues:
types: [labeled]

jobs:
reply-helper:
runs-on: ubuntu-latest
steps:
- name: feature request
if: github.event.label.name == 'enhancement'
uses: actions-cool/issues-helper@v2.5.0
with:
actions: 'create-comment'
token: ${{ secrets.GITHUBTOKEN }}
issue-number: ${{ github.event.issue.number }}
body: |
Hello @${{ github.event.issue.user.login }}. Your suggestion has been received, and you will be notified in the issue area after the evaluation is completed.
你好 @${{ github.event.issue.user.login }},已收到你的建议,评估完成后将在issue区域通知你。

- name: need reproduction
if: github.event.label.name == 'bug'
uses: actions-cool/issues-helper@v2.5.0
with:
actions: 'create-comment'
token: ${{ secrets.GITHUBTOKEN }}
issue-number: ${{ github.event.issue.number }}
body: |
Hello @${{ github.event.issue.user.login }}. Your feedback has been received, and you will be notified in the issue area when the problem is resolved.
你好 @${{ github.event.issue.user.login }},已收到你反馈的问题,问题解决后将在issue区域通知你。

将上述配置推送至GitHub后,我们创建一个新issue后,就能立即得到对应类型的回复。

图片

image-20230404170847132

项目地址

本文列举到的所有工作流配置文件,请移步:

  • .github[11]
  • workflows[12]
  • ISSUE_TEMPLATE[13]

写在最后

至此,文章就分享完毕了。

我是神奇的程序员,一位前端开发工程师。

如果你对我感兴趣,请移步我的个人网站[14],进一步了解。

  • 公众号无法外链,如果文中有链接,可点击下方阅读原文查看😊

参考资料

[1]yaml文件: https://yaml.org/

[2]GitHub Actions 快速入门: https://docs.github.com/zh/actions/quickstart

[3]截图插件: https://github.com/likaia/js-screen-shot

[4]settings-tokens: https://github.com/settings/tokens

[5]settings/secrets/actions: https://github.com/{用户名}/{项目名}/settings/secrets/actions

[6]截图插件: https://github.com/likaia/js-screen-shot

[7]bug-report.yml: https://github.com/likaia/js-screen-shot/blob/master/.github/ISSUE_TEMPLATE/bug-report.yml

[8]feature-request.yml: https://github.com/likaia/js-screen-shot/blob/master/.github/ISSUE_TEMPLATE/feature-request.yml

[9]general.yml: https://github.com/likaia/js-screen-shot/blob/master/.github/ISSUE_TEMPLATE/general.yml

[10]GitHub的官方文档: https://docs.github.com/zh/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository

[11].github: https://github.com/likaia/js-screen-shot/tree/master/.github

[12]workflows: https://github.com/likaia/js-screen-shot/tree/master/.github/workflows

[13]ISSUE_TEMPLATE: https://github.com/likaia/js-screen-shot/tree/master/.github/ISSUE_TEMPLATE

[14]个人网站: https://www.kaisir.cn/

责任编辑:武晓燕 来源: 神奇的程序员
相关推荐

2012-09-04 10:20:31

IBMdw

2022-11-15 17:07:40

开发自动化前端

2011-06-03 17:06:09

自动化测试

2020-11-13 07:31:10

自动化事件安全

2021-03-16 12:08:32

Python 服务器脚本

2014-03-11 11:10:10

PowerShell自动化脚本

2020-10-14 10:30:07

前端Node代码

2015-10-21 15:08:25

电缆自动化

2015-06-03 09:07:46

白盒审计PHPPHP自动化审计

2020-11-05 12:56:19

Python办公自动化

2013-11-27 11:34:43

自动化部署Python

2022-08-19 14:16:02

Python命令

2013-09-03 09:58:51

Web前端

2024-01-24 18:50:21

WebFTP服务器

2015-02-04 09:17:38

亚马逊AWS云自动化

2012-11-23 14:28:45

IBMdW

2017-12-17 21:58:18

2021-06-11 10:15:15

自动化人工智能AI

2015-06-16 09:43:51

2018-06-07 11:00:27

NFVSDN部署
点赞
收藏

51CTO技术栈公众号