使用GitHub Actions自动发布electron多端安装程序

GitHub Actions 是一个强大的自动化工具,可以帮助开发者在 GitHub 仓库中自动化构建、测试和部署工作流程。我们的客户端就是使用github action来打包项目发布的。

以下是关于 GitHub Actions 自动化构建的一些关键点和步骤:

GitHub Actions 的基本概念

  • 工作流(Workflows):工作流是由一个或多个作业组成的自动化过程,可以在仓库中定义一个或多个工作流。
  • 事件(Events):工作流可以被 GitHub 仓库中的特定事件触发,如 push、pull request、issue 创建等。
  • 作业(Jobs):一个工作流包含一个或多个作业,这些作业可以并行或顺序执行。
  • 步骤(Steps):每个作业由一系列步骤组成,步骤可以执行命令或使用 Actions。
  • Actions:是在步骤中调用的独立命令,可以是自己编写的或者是由社区提供的。

自动化构建的步骤

  1. 准备项目:
    • 确保你的项目已经托管在 GitHub 上。
    • 准备项目的构建脚本(如 Makefile、Dockerfile、npm scripts 等)。
  2. 创建工作流文件:
    • 在你的 GitHub 仓库中创建一个新的 .github/workflows 目录(如果尚不存在)。
    • 在 .github/workflows 目录中创建一个 YAML 文件,用于定义工作流。例如,可以命名为 build.yml。
  3. 定义工作流:
    • 在 YAML 文件中,使用 YAML 语法定义工作流。这包括指定触发事件、运行作业的环境(如操作系统)、以及作业的步骤。
    • 使用 actions/checkout@vX(X 为版本号)来检出代码。
    • 使用适合你项目的构建命令或 Actions。例如,对于 Node.js 项目,可以使用 actions/setup-node@vX 来设置 Node.js 环境,并使用 npm install 来安装依赖,npm run build 来构建项目。
  4. 配置环境变量和秘密:
    • 如果你的构建过程需要敏感信息(如 API 密钥、数据库密码等),可以在 GitHub 仓库的 Settings > Secrets 中配置这些秘密,并在工作流文件中引用它们。
  5. 提交并测试:
    • 将工作流文件提交到你的 GitHub 仓库。
    • 触发工作流(如通过 push 代码到仓库)。
    • 在 GitHub 仓库的 Actions 选项卡中查看工作流的运行状态和结果。

build.yml参考代码

name: build

on:
    push:
        tags:
            - '*'

jobs:
    release:
        runs-on: ${{ matrix.os }}

        strategy:
            matrix:
                os: [windows-latest,ubuntu-latest, macos-13]

        # 步骤
        steps:
            # 使用预制action:拉取最新的代码
            - uses: actions/checkout@v3
            # 步骤一的名称:
            - name: Install and Build
              # 该步骤运行的终端命令,进入仓库的目录,安装依赖,运行编译命令
              run: yarn && yarn release
              env:
                  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

给你的代码加上tag

打上新版本 后面版本号,github action就会运行自动化构建。

git tag v1.0.31

提交新版本

git push origin v1.0.31

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
shengmeshi8 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu8 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
*TQK*10 小时前
✨1.HTML、CSS 和 JavaScript 是什么?
前端·javascript·css·html
优联前端10 小时前
DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方DeepSeek接入)
javascript·pycharm·ai编程·前端开发·优联前端·deepseek
萧大侠jdeps10 小时前
el-select 添加icon
前端·javascript·vue.js