Matarialize中文社区-Vue专栏

CI/CD自动化部署

CI/CD

CI/CD 管道简介

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

以下我们将详细讲述如何使用 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 配置

创建工作流文件

在 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

说明：

on：指定触发条件，此示例中工作流会在 main 分支的推送和 PR 合并时触发。
jobs：定义了两个 job：build 和 deploy。build 任务先于 deploy 执行，确保构建成功后再进行部署。
NETLIFY_AUTH_TOKEN 和 NETLIFY_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 包括 build、test 和 deploy。
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 配置变量

进入 GitLab 项目，点击 Settings -> CI / CD -> Variables。
添加 NETLIFY_AUTH_TOKEN 和 NETLIFY_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 Token 和 Site 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 Actions 或 GitLab CI 实现 Vue 项目的 CI/CD，可以大大提高开发效率和代码质量。自动化管道能够确保每次代码提交都经过测试和验证，最终自动部署到生产环境。这不仅减少了手动操作的风险，还能加快发布流程，实现持续交付。

评论区

评论列表

{{ rItem.user.nickname || rItem.user.username }} @ {{ rItem.toUser.nickname || rItem.toUser.username }}