CI/CD自动化部署

class CI/CD

CI/CD 管道简介

CI/CD(Continuous Integration/Continuous Delivery or Deployment)是现代软件开发中常见的自动化实践。通过 CI/CD 管道,开发团队可以持续集成(CI)代码到共享代码库,并在每次代码提交时自动进行测试、打包和部署到生产环境或其他环境中。常用的 CI/CD 工具包括 GitHub ActionsGitLab CIJenkinsCircleCI 等。

以下我们将详细讲述如何使用 GitHub Actions 和 GitLab CI 实现 Vue 项目的自动化构建、测试和部署,并通过一个项目实战展示完整的使用流程。


一、GitHub Actions

1. 什么是 GitHub Actions?

GitHub Actions 是 GitHub 自家的 CI/CD 服务,提供自动化构建、测试和部署等功能。你可以通过编写 YAML 文件来定义工作流,并在触发条件(如推送代码、合并 Pull Request)时自动执行任务。

2. GitHub Actions 的主要概念

  • Workflow:工作流,定义了自动化任务的配置文件,通常存储在 .github/workflows/ 目录下。
  • Job:作业,是一个工作流中的任务集合,可以包含多个任务。
  • Step:步骤,每个作业由多个步骤组成,每个步骤是具体的命令或操作。
  • Runner:执行工作流的环境,可以是 GitHub 提供的虚拟机或自托管服务器。

3. GitHub Actions 配置文件示例

我们将通过 GitHub Actions 实现以下自动化流程:

  • 持续集成:代码推送到主分支时,自动运行构建和测试。
  • 持续部署:当代码被推送到主分支时,自动将 Vue 应用部署到 Netlify。
示例:Vue 项目 CI/CD 配置
  1. 创建工作流文件

在 Vue 项目根目录下创建 .github/workflows/ci.yml 文件:

name: CI/CD for Vue Project

# 定义何时触发工作流
on:
  push:
    branches:
      - main  # 在推送到 main 分支时触发
  pull_request:
    branches:
      - main  # 在向 main 分支发起 Pull Request 时触发

# 定义工作流中的 Jobs
jobs:
  build:
    runs-on: ubuntu-latest  # 在 Ubuntu 虚拟机上运行

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3  # 检出仓库代码

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18  # 使用 Node.js 18

      - name: Install dependencies
        run: npm install  # 安装项目依赖

      - name: Run tests
        run: npm run test  # 运行测试

      - name: Build project
        run: npm run build  # 运行构建任务

  deploy:
    needs: build  # 依赖于 build 任务完成后再执行
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Deploy to Netlify
        run: npm run deploy  # 假设在 package.json 中已定义了 Netlify 部署命令
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}  # 使用 GitHub Secrets 存储的 Netlify API token
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}  # 存储 Netlify 站点 ID
  1. 说明
  • on:指定触发条件,此示例中工作流会在 main 分支的推送和 PR 合并时触发。
  • jobs:定义了两个 job:builddeploybuild 任务先于 deploy 执行,确保构建成功后再进行部署。
  • NETLIFY_AUTH_TOKENNETLIFY_SITE_ID 是从 GitHub Secrets 中读取的,保证敏感信息不会暴露在代码库中。

4. GitHub Secrets 配置

在 GitHub 仓库中,点击 Settings -> Secrets -> Actions,然后添加两个 Secrets:

  • NETLIFY_AUTH_TOKEN:Netlify 的 API Token,用于授权部署。
  • NETLIFY_SITE_ID:Netlify 的站点 ID,用于指定部署目标。

5. 触发和监控

每次推送到 main 分支或发起 Pull Request 后,GitHub Actions 将自动执行工作流。你可以通过 Actions 标签页查看工作流的执行状态和日志。


二、GitLab CI

1. 什么是 GitLab CI?

GitLab CI 是 GitLab 提供的集成持续集成和持续交付的工具。GitLab CI/CD 通过 .gitlab-ci.yml 文件定义自动化管道,在代码库的每次提交时自动执行测试、构建和部署操作。

2. GitLab CI/CD 的主要概念

  • Pipeline:由一系列 Job 组成,通常包括编译、测试和部署任务。
  • Stages:每个 Job 都隶属于某个 Stage,常见的 Stage 包括 buildtestdeploy
  • Runners:执行 Pipeline 的环境,可以是 GitLab 提供的共享 Runner,也可以是自托管的 Runner。

3. GitLab CI 配置文件示例

我们将通过 GitLab CI 实现一个类似于 GitHub Actions 的工作流,完成 Vue 项目的自动化构建和部署。

示例:Vue 项目 GitLab CI 配置

在 Vue 项目的根目录下创建 .gitlab-ci.yml 文件:

stages:
  - build
  - deploy

# 定义构建任务
build_job:
  stage: build
  image: node:18  # 使用 Node.js 18 环境
  script:
    - npm install  # 安装依赖
    - npm run build  # 构建项目
  artifacts:
    paths:
      - dist/  # 将 dist 文件夹作为构建产物

# 定义部署任务
deploy_job:
  stage: deploy
  image: node:18
  script:
    - npm install -g netlify-cli  # 安装 Netlify CLI
    - netlify deploy --prod --dir=dist  # 部署到 Netlify
  only:
    - main  # 仅在推送到 main 分支时触发
  environment:
    name: production
  variables:
    NETLIFY_AUTH_TOKEN: $NETLIFY_AUTH_TOKEN  # 从 GitLab CI/CD 配置的变量中读取
    NETLIFY_SITE_ID: $NETLIFY_SITE_ID

4. GitLab CI 配置变量

  1. 进入 GitLab 项目,点击 Settings -> CI / CD -> Variables
  2. 添加 NETLIFY_AUTH_TOKENNETLIFY_SITE_ID 变量,这些变量将在 CI/CD 管道中被引用。

5. GitLab CI/CD 管道触发

每次提交代码或合并到 main 分支时,GitLab CI 会自动触发。你可以通过 CI/CD -> Pipelines 标签页查看执行状态和日志。


三、项目实战:CI/CD 实战案例

项目需求:

  • 一个简单的 Vue 应用,使用 GitHub Actions 或 GitLab CI 实现持续集成和持续部署。
  • 应用开发后,需要自动化地构建、测试和部署到 Netlify。

步骤:

1. 创建 Vue 项目

通过 Vue CLI 创建项目并初始化 Git 仓库:

vue create vue-ci-cd-example
cd vue-ci-cd-example
git init
2. 编写 GitHub Actions 或 GitLab CI 配置

根据项目实际需求,编写 .github/workflows/ci.yml.gitlab-ci.yml 文件,确保在每次代码推送时触发构建和部署任务。

3. 配置 Secrets 或 CI/CD 变量

在 GitHub 或 GitLab 中配置 Netlify 的 API TokenSite ID,以保证部署权限。

4. 推送代码

将项目推送到 GitHub 或 GitLab:

git add .
git commit -m "Initial commit with CI/CD setup"
git remote add origin <your-repository-url>
git push -u origin main
5. 自动化流程

每次推送到 main 分支时,GitHub Actions 或 GitLab CI 将自动执行:

  • 构建 Vue 应用
  • 运行测试
  • 部署到 Netlify

6. 查看结果

成功部署后,Netlify 将生成一个可访问的 URL,应用将被自动更新。


四、总结

通过 GitHub ActionsGitLab CI 实现 Vue 项目的 CI/CD,可以大大提高开发效率和代码质量。自动化管道能够确保每次代码提交都经过测试和验证,最终自动部署到生产环境。这不仅减少了手动操作的风险,还能加快发布流程,实现持续交付。

评论区
评论列表
menu