使用GithubActions自动化介绍&演示
概述
本节介绍 GitHub Actions 的核心概念与工作流配置,演示如何通过 CI/CD 自动化完成多平台打包(Windows/macOS/Linux)并将产物发布到 GitHub Releases。
CI/CD 核心概念
| 概念 | 说明 | 对应配置 |
|---|---|---|
| Workflow | 自动化流程定义 | .github/workflows/*.yml |
| Event | 触发条件(push、release、schedule 等) | on: |
| Job | 一组关联的步骤,可并行执行 | jobs: |
| Step | 单个操作(运行命令或使用 Action) | steps: |
| Action | 可复用的操作单元 | uses: |
| Runner | 执行环境(GitHub 托管或自托管) | runs-on: |
GitHub Actions 工作流配置示例
# .github/workflows/release.yml
name: Build and Release
on:
push:
tags:
- 'v*' # 推送 v 开头的 tag 时触发
jobs:
release:
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [windows-latest, macos-latest, ubuntu-latest]
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '18'
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Build project
run: pnpm run compile
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Upload artifacts
uses: actions/upload-artifact@v4
with:
name: ${{ matrix.os }}-build
path: dist/
- name: Create Release
uses: softprops/action-gh-release@v2
if: startsWith(github.ref, 'refs/tags/')
with:
files: dist/**
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
yaml
Electron 多平台发布完整示例
# .github/workflows/electron-release.yml
name: Electron Release
on:
push:
tags: ['v*']
jobs:
build:
runs-on: ${{ matrix.os }}
strategy:
matrix:
os: [macos-latest, windows-latest, ubuntu-latest]
include:
- os: macos-latest
build_cmd: 'build --mac'
- os: windows-latest
build_cmd: 'build --win'
- os: ubuntu-latest
build_cmd: 'build --linux'
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 18
- name: Install dependencies
run: npm ci
- name: Build Electron app
run: npm run ${{ matrix.build_cmd }}
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: List build output
run: ls -la dist/ || dir dist\
- name: Upload to Release
uses: softprops/action-gh-release@v2
with:
files: |
dist/*.dmg
dist/*.exe
dist/*.AppImage
dist/*.deb
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
yaml
自动更新流程
开发者推送 tag → GitHub Actions 构建打包 → 发布到 Releases
↓
用户打开应用 ← 检测到新版本 ← electron-updater 拉取 latest.yml
text
// 渲染进程 - 检测更新
import { autoUpdater } from 'electron-updater'
autoUpdater.checkForUpdatesAndNotify()
autoUpdater.on('update-downloaded', () => {
// 提示用户安装更新
dialog.showMessageBox({
type: 'info',
title: '发现新版本',
message: '是否立即安装更新?',
buttons: ['确定', '稍后']
}).then(({ response }) => {
if (response === 0) {
autoUpdater.quitAndInstall()
}
})
})
typescript
调试技巧
- 阅读错误日志:Actions 面板中每个 Step 都有详细日志,仔细阅读红色错误信息
- 本地验证优先:确保
npm run compile本地可以正常执行 - 分步骤调试:先确保 install 和 build 通过,再处理 release
- Secrets 配置:确认
GITHUB_TOKEN和NPM_TOKEN已在仓库设置中配置 - 重新运行:修改后使用
Re-run jobs快速验证
小结
- GitHub Actions 通过 YAML 配置文件定义自动化工作流
- 支持
matrix策略实现多平台并行构建 secrets.GITHUB_TOKEN自动提供,无需手动配置- Electron 应用可结合
electron-updater实现自动更新闭环 - 调试 CI/CD 的核心是耐心阅读错误日志,逐步排查
↑