GitHub Actions 部署配置

GitHub Actions 基础知识

GitHub Actions 是 GitHub 提供的 CI/CD（持续集成/持续交付）服务，能够自动化执行代码仓库中的构建、测试和部署等任务。

核心组件

1. Workflow（工作流）

   • 定义文件路径：.github/workflows/*.yml
   • 描述自动化任务的执行流程
   • 支持多种触发方式：代码推送（push）、拉取请求（pull_request）、定时任务（cron）或手动触发
   • 可包含多个并行或串行的 job

2. Job（任务）

   • 在独立的虚拟机环境中运行（默认 Linux Ubuntu，也支持 Windows 和 macOS）
   • 可设置并行执行或依赖关系

3. Step（步骤）

   • 构成 job 的基本单元
   • 支持两种执行方式：
     • 运行 shell 命令（run: xxx）
     • 调用预定义的 action（uses: actions/checkout@v3）

4. Action（动作）

   • 可复用的任务模块
   • 常用社区 action 示例：
     • actions/checkout：拉取仓库代码
     • actions/setup-node：配置 Node.js 环境
     • JamesIves/github-pages-deploy-action：自动部署到 GitHub Pages

5. Secrets（机密信息）

   • 存储位置：仓库 Settings → Secrets and variables → Actions
   • 访问方式：${{ secrets.XXXX }}
   • 适用于保存敏感信息：API token、密码、密钥等

运行环境

GitHub Actions 提供以下云端虚拟机环境：

• runs-on: ubuntu-latest（最常用）
• runs-on: windows-latest
• runs-on: macos-latest

典型 CI/CD 流程

前端项目的自动化流程通常包括：

1. 触发机制：如 master 分支的代码推送
2. 代码检出：拉取最新代码
3. 环境准备：安装 Node.js/Python/JDK 等运行环境
4. 依赖安装：执行 npm install 或 pnpm install
5. 项目构建：运行 npm run build
6. 部署发布：将构建产物推送到服务器、云存储或 GitHub Pages

GitHub Actions 部署配置文件(deploy.yml)解析

该文件用于在GitHub上实现自动化构建和部署流程，主要包含以下核心部分：

1. 任务定义(jobs)

• build-and-deploy：任务名称
• 运行环境：最新的Ubuntu系统(runs-on: ubuntu-latest)

2. 执行步骤(steps)

(1) 代码检出

• 使用官方actions/checkout@v2.3.1
• 从仓库获取代码内容

(2) Node.js环境配置

• 使用actions/setup-node@v3
• 指定Node.js版本为16.18.0

(3) 项目构建

• 安装pnpm包管理器(npm i -g pnpm)
• 执行初始化命令(pnpm run init)
• 构建文档(pnpm run docs:build)
• 设置内存限制(NODE_OPTIONS: ‘–max_old_space_size=4096’)

(4) 部署到GitHub Pages

• 使用JamesIves/github-pages-deploy-action@4.1.3
• 配置参数：
  • 目标分支：gh-pages
  • 部署目录：docs/.vuepress/dist
  • 访问凭证：${{ secrets.ACCESS_TOKEN }}

完整工作流：

1. 获取代码库内容
2. 配置一致的Node.js环境
3. 安装依赖并执行构建
4. 将构建产物部署至GitHub Pages

该配置文件实现了从代码检出到最终部署的全自动化流程，确保构建环境一致性，并通过GitHub Actions工具链完成静态资源部署。

代码 deploy.yml

name: Build and Deploy
on:push:branches:- master
jobs:build-and-deploy:runs-on: ubuntu-lateststeps:- name: Checkout  ️uses: actions/checkout@v2.3.1- name: lock npm versionuses: actions/setup-node@v3with:node-version: 16.18.0- name: Install and Buildrun: |npm i -g pnpmpnpm run initpnpm run docs:buildenv:NODE_OPTIONS: '--max_old_space_size=4096'- name: Deployuses: JamesIves/github-pages-deploy-action@4.1.3with:BRANCH: gh-pagesFOLDER: docs/.vuepress/distACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}