【Git】第十九节：Git 与 CI/CD 集成 —— 结合 GitHub Actions / GitLab CI 实现自动构建与部署

💻第19节：Git 与 CI/CD 集成 —— 结合 GitHub Actions / GitLab CI 实现自动构建与部署

👽引言：打造高效、可靠的持续集成与交付流程

在现代软件开发中，持续集成（CI）与持续交付/部署（CD） 是保障代码质量、提升交付效率、减少人为错误的关键实践。

Git 作为版本控制的核心工具，天然支持与各类 CI/CD 平台的深度集成。GitHub 和 GitLab 分别提供了强大的自动化平台：

• GitHub Actions
• GitLab CI/CD

通过这些平台，你可以实现：

✅ 自动化运行单元测试、Lint 检查
✅ 构建前端项目（如 Vue、React）、打包后端服务
✅ 自动部署到测试、预发布或生产环境
✅ PR/MR 触发构建并反馈结果
✅ 多环境部署策略（如分支触发不同流程）

本节课老曹将带你全面掌握：

✅ CI/CD 的基本概念与工作流
✅ GitHub Actions 的核心组成与 YAML 配置详解
✅ GitLab CI 的 .gitlab-ci.yml 文件编写技巧
✅ 实战演练从 Push 到 Build 再到 Deploy 的完整流程
✅ 多环境部署配置方法（如 dev/staging/prod）
✅ 最佳实践与注意事项
✅ 10大高频面试题（含答案）

❓一、什么是 CI/CD？为什么需要它？

1. 基本概念

✅ CI/CD 的目标是让代码变更快速、安全地进入生产环境，同时保证质量。

2. CI/CD 的优势

⚡二、GitHub Actions：GitHub 原生 CI/CD 工具

1. 核心组件

2. 示例：Node.js 项目的 CI 流程

# .github/workflows/ci.yml
name: Node.js CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - run: npm test

3. 示例：前端项目构建并部署到 GitHub Pages

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

4. GitHub Actions 的最佳实践

✅ 使用官方 action 尽量保持简洁
✅ 合理划分 job，避免单个 workflow 过于臃肿
✅ 使用 secrets 管理敏感信息（如 API Key）
✅ 为不同分支配置不同的 workflow（如 dev 分支只 CI，main 分支才部署）
✅ 使用 cache 加快依赖安装速度（如 actions/cache）
✅ 设置并发限制避免多个 workflow 同时运行冲突

🔨三、GitLab CI/CD：原生于 GitLab 的强大自动化平台

1. 核心配置文件：.gitlab-ci.yml

该文件位于项目根目录，用于定义整个 CI/CD 流程。

2. 示例：Node.js 项目的 CI 流程

# .gitlab-ci.yml
stages:
  - build
  - test
  - deploy

build_app:
  image: node:18
  stage: build
  script:
    - npm install

run_tests:
  image: node:18
  stage: test
  script:
    - npm test

deploy_to_prod:
  image: alpine
  stage: deploy
  script:
    - echo "Deploying to production..."
  only:
    - main

3. 示例：使用 GitLab Runner 部署到远程服务器

deploy_staging:
  image: alpine
  stage: deploy
  script:
    - apk add --no-cache openssh
    - ssh root@your-server "cd /path/to/app && git pull origin staging && npm install && pm2 restart app"
  only:
    - staging

4. GitLab CI 的最佳实践

✅ 使用 cache 缓存 node_modules 等依赖
✅ 使用 artifacts 保留构建产物供后续 job 使用
✅ 使用 only / except 控制触发条件
✅ 使用 when: manual 实现手动审批部署
✅ 使用 parallel 并行执行任务加速构建
✅ 使用 extends 重用配置片段，避免重复代码

🍭四、实战演练：完整的 CI/CD 流程

场景描述

你正在维护一个 Vue 前端项目，希望实现：

• 提交到 dev 分支时自动构建并部署到测试环境；
• 提交到 main 分支时构建并部署到生产环境；

✅步骤 1：添加 GitHub Actions 配置

# .github/workflows/deploy.yml
name: Vue CI/CD

on:
  push:
    branches:
      - dev
      - main

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - run: npm run build

      - name: Deploy to Dev
        if: github.ref == 'refs/heads/dev'
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

      - name: Deploy to Production
        if: github.ref == 'refs/heads/main'
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
          destination_dir: prod

✅步骤 2：配置 GitLab CI（备选）

# .gitlab-ci.yml
image: node:18

stages:
  - build
  - deploy

build_app:
  stage: build
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - dist/

deploy_dev:
  stage: deploy
  script:
    - scp -r dist/* user@dev-server:/var/www/vue-app
  only:
    - dev

deploy_prod:
  stage: deploy
  script:
    - scp -r dist/* user@prod-server:/var/www/vue-app
  only:
    - main

⛄五、CI/CD 工作流设计模式

💬六、10大高频面试题（含答案）

✅ Q1: CI/CD 的核心价值是什么？

答：
CI/CD 的核心价值在于实现快速反馈、减少人为错误、提升交付效率、确保代码质量可控。

✅ Q2: GitHub Actions 和 GitLab CI 的主要区别是什么？

答：

✅ Q3: GitHub Actions 的 workflow 文件放在哪里？

答：
放在 .github/workflows/ 目录下，文件扩展名为 .yml。

✅ Q4: GitLab CI 的配置文件名是什么？

答：
.gitlab-ci.yml，位于项目根目录。

✅ Q5: 如何在 GitHub Actions 中使用 secret？

答：
在 Settings > Secrets 中添加，然后在 workflow 中引用：

env:
  API_KEY: ${{ secrets.MY_API_KEY }}

✅ Q6: GitLab CI 中如何缓存依赖？

答：
使用 cache 关键字：

cache:
  key: npm-cache
  paths:
    - node_modules/

✅ Q7: 如何实现多环境部署？

答：
根据分支判断，如：

if: github.ref == 'refs/heads/main'

或在 GitLab 中使用 only / rules 控制。

✅ Q8: 如何在 GitHub Actions 中部署到远程服务器？

答：
可以使用 SSH、scp、rsync 等命令，例如：

- run: |
    ssh user@server "rm -rf /app/*"
    scp -r dist/* user@server:/app

✅ Q9: GitLab CI 中的 artifacts 是什么？有什么作用？

答：
artifacts 是 job 之间传递数据的方式，常用于保存构建产物（如 dist、bin 文件），供后续 job 使用。

✅ Q10: 如何实现手动审批部署？

答：
在 GitLab 中使用：

when: manual

在 GitHub Actions 中可以结合外部审批工具或使用 GitHub Environments 设置保护规则。

📚七、总结

本节课我们深入讲解了 Git 与 CI/CD 的集成方式：

✅ CI/CD 的基本概念与核心价值
✅ GitHub Actions 的 workflow 编写与最佳实践
✅ GitLab CI 的 .gitlab-ci.yml 文件结构与配置技巧
✅ 完整的 CI（构建+测试）与 CD（部署）流程实战
✅ 多环境部署、权限管理、缓存优化等高级技巧
✅ 10大高频面试题解析

通过掌握 Git 与 CI/CD 的集成，你可以：

• 构建高效的持续集成流水线；
• 实现自动化的构建、测试与部署；
• 提升代码质量和交付效率；
• 为团队提供稳定可靠的交付能力；

下一讲我们将进入《第20节：Git 安全与最佳实践》，深入讲解 .gitignore 编写规范、敏感信息保护、权限管理与 SSH 配置等关键安全主题，打造安全、规范的 Git 开发环境。

附录：推荐资源

📘 GitHub Actions 官方文档
📘 GitLab CI/CD 官方文档
🧰 GitHub Actions Marketplace
📊 GitLab CI 模板仓库
🎯 下一步建议：尝试为你的开源项目配置完整的 CI/CD 流水线，包括 Lint、Test、Build、Deploy 等阶段。下一讲我们将深入讲解 Git 安全与最佳实践，敬请期待！