GitHub Actions CI/CD 入门——从配置到自动化部署

, , , ,

GitHub Actions CI/CD 入门——从配置到自动化部署

作者： CaoZH
日期： 2022-10-20
本文为原创教程

GitHub Actions 是 GitHub 在 2019 年推出的 CI/CD 工具，到 2022 年已经成为最流行的自动化构建平台之一。它的最大优势是和 GitHub 仓库深度集成，不需要额外搭建 Jenkins 等 CI 服务器。

本文从一个 Vue 前端项目为例，带你完整走一遍 GitHub Actions CI/CD 流程。

一、什么是 CI/CD？

概念 全称 含义
CI Continuous Integration 持续集成：每次提交自动构建和测试
CD Continuous Deployment 持续部署：通过测试后自动部署到服务器

传统流程 vs CI/CD

传统流程：

1
编码 → 手动构建 → 手动测试 → 手动部署到服务器

CI/CD 流程：

1
编码 → git push → 自动构建 → 自动测试 → 自动部署

二、认识 GitHub Actions

核心概念

概念 说明 类比
Workflow 一个自动化流程 流水线
Job Workflow 中的一个任务 流水线的一道工序
Step Job 中的一个步骤 一个具体操作
Action 可复用的步骤单元 功能模块
Event 触发 Workflow 的条件 开关
Runner 运行 Workflow 的服务器 工人

目录结构

GitHub Actions 的配置文件放在仓库的 .github/workflows/ 目录下，使用 YAML 格式。

1
2
3
4
5
6
7
my-project/
├── .github/
│   └── workflows/
│       ├── ci.yml         # CI 流程
│       └── deploy.yml     # 部署流程
├── src/
└── package.json

三、实战：Vue 项目自动化构建 + 部署

第一步：创建 CI 工作流

创建 .github/workflows/ci.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
name: CI

# 触发条件：push 或 pull request 到 main 分支
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build-and-test:
    runs-on: ubuntu-latest

    steps:
      # 1. 检出代码
      - uses: actions/checkout@v3

      # 2. 设置 Node.js 环境
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'
          cache: 'npm'

      # 3. 安装依赖
      - name: Install dependencies
        run: npm ci

      # 4. 运行 lint
      - name: Lint
        run: npm run lint

      # 5. 运行测试
      - name: Test
        run: npm run test

      # 6. 构建
      - name: Build
        run: npm run build

      # 7. 上传构建产物
      - name: Upload artifact
        uses: actions/upload-artifact@v3
        with:
          name: dist
          path: dist/

第二步：创建部署工作流

创建 .github/workflows/deploy.yml，自动部署到服务器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
name: Deploy to Server

on:
  workflow_run:
    workflows: ["CI"]
    types:
      - completed
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    if: ${{ github.event.workflow_run.conclusion == 'success' }}

    steps:
      - name: Download artifact
        uses: actions/download-artifact@v3
        with:
          name: dist
          path: dist/

      - name: Deploy via rsync
        uses: burnett01/rsync-deployments@5.2
        with:
          switch: --avz --delete
          path: dist/
          remote_path: /var/www/my-app/
          remote_host: ${{ secrets.DEPLOY_HOST }}
          remote_user: ${{ secrets.DEPLOY_USER }}
          remote_key: ${{ secrets.DEPLOY_KEY }}

第三步：配置 Secrets

在 GitHub 仓库的 Settings → Secrets and variables → Actions 中添加：

Secret 名称 值
DEPLOY_HOST 服务器 IP 地址
DEPLOY_USER SSH 用户名
DEPLOY_KEY SSH 私钥内容

部署到阿里云 OSS（静态网站）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
name: Deploy to OSS

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'

      - run: npm ci
      - run: npm run build

      - name: Upload to OSS
        uses: fangbinwei/aliyun-oss-website-action@v1
        with:
          accessKeyId: ${{ secrets.OSS_KEY_ID }}
          accessKeySecret: ${{ secrets.OSS_KEY_SECRET }}
          bucket: my-app-bucket
          endpoint: oss-cn-beijing.aliyuncs.com
          folder: dist/

四、常用 Actions 推荐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 缓存依赖（加速构建）
- uses: actions/cache@v3
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

# 发送通知到钉钉
- name: DingTalk notification
  uses: Vision-CAIR/dingtalk-notification-action@v1
  with:
    webhook: ${{ secrets.DINGTALK_WEBHOOK }}
    message: "部署成功！"

# 发布到 Docker Hub
- name: Build and push Docker image
  uses: docker/build-push-action@v3
  with:
    push: true
    tags: myusername/myapp:latest

五、最佳实践

  1. CI 和 CD 分开：CI 负责测试，CD 负责部署
  2. 使用缓存：加速依赖安装
  3. Secrets 管理：敏感信息放在 GitHub Secrets，不要硬编码
  4. 条件触发：只在 main 分支或 tag 推送时部署
  5. 通知机制：部署失败时发通知到钉钉/企业微信/Slack

六、总结

通过 GitHub Actions，你可以做到：

  • ✅ 每次 git push 自动运行 lint + 测试
  • ✅ 测试通过后自动构建
  • ✅ 构建成功后自动部署到服务器/OSS
  • ✅ 部署失败自动通知团队

从手动部署到一键自动化部署，配置一次，终身受益。

首发于 CaoZH 的笔记

CaoZHProgrammer

学习使我快乐。