如何搭建 Vue.js 开源项目的 CI/CD 流水线

news2025/1/12 19:22:50

在这里插入图片描述

网罗开发 （小红书、快手、视频号同名）

大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。

图书作者：《ESP32-C3 物联网工程开发实战》
图书作者：《SwiftUI 入门，进阶与实战》
超级个体：COC上海社区主理人
特约讲师：大学讲师，谷歌亚马逊分享嘉宾
科技博主：极星会首批签约作者

文章目录

- 摘要
- 引言
- 选择合适的 CI/CD 工具
- GitHub Actions 实现 CI/CD 流水线
- - GitHub Actions 配置文件
  - 自动化测试和构建
  - 代码示例
- Jenkins 实现 CI/CD 流水线
- - Jenkins 配置步骤
  - 代码示例
- 流水线运行和监控
- QA环节
- 总结
- 参考资料

摘要

本文旨在探讨如何为开源的 Vue.js 项目构建 CI/CD 流水线，以实现自动化的构建、测试和发布流程。通过使用 GitHub Actions 和 Jenkins 等工具，可以显著提高开发效率，减少手动操作带来的错误。文章将详细介绍流水线的设计和实现，并提供可运行的示例代码模块。

引言

随着前端技术的不断发展，Vue.js 凭借其简洁、灵活和高效的特性，已经成为众多开发者心中的首选。然而，对于开源项目来说，缺乏自动化的构建和发布流程会导致开发效率低下，且手动操作容易出错。因此，搭建 CI/CD 流水线成为提高项目质量和开发效率的关键。

选择合适的 CI/CD 工具

GitHub Actions
- GitHub 提供的 CI/CD 服务，支持自定义工作流程。
- 与 GitHub 仓库无缝集成，方便管理。
Jenkins
- 一个强大的持续集成/持续部署（CI/CD）工具，支持多种语言和平台。
- 需要单独安装和配置，但功能强大且灵活。

GitHub Actions 实现 CI/CD 流水线

GitHub Actions 配置文件

在 Vue.js 项目的根目录下创建一个名为 .github/workflows/ci-cd.yml 的文件，这是 GitHub Actions 的配置文件。

name: CI/CD Pipeline

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'

    - name: Install dependencies
      run: npm install

    - name: Build project
      run: npm run build

    - name: Run tests
      run: npm run test

    - name: Deploy to server (optional)
      # 这里可以添加部署到服务器的步骤，例如使用 SSH 部署工具
      # 需要先配置服务器的 SSH 密钥等
      # run: scp -r dist/* user@yourserver:/path/to/deploy/directory

自动化测试和构建

在 package.json 文件中配置 scripts，以便在 CI/CD 流水线中运行测试和构建命令。

{
  "scripts": {
    "build": "vue-cli-service build",
    "test": "jest"
  }
}

代码示例

示例项目结构

my-vue-project/
├── .github/
│   └── workflows/
│       └── ci-cd.yml
├── dist/
├── node_modules/
├── public/
├── src/
├── package.json
└── vue.config.js

示例 vue.config.js 配置

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/'
}

Jenkins 实现 CI/CD 流水线

Jenkins 配置步骤

安装 Jenkins：在服务器上安装 Jenkins，并配置好访问权限。
创建项目：在 Jenkins 中创建一个新项目，选择适合的项目类型（如 Maven、Gradle 等）。
配置源码管理：在项目配置中，设置源码管理（如 Git），以便 Jenkins 可以拉取最新的代码。
配置构建触发器：在构建触发器中，选择适合的触发方式（如定期轮询、代码提交等），以便 Jenkins 在适当的时机自动触发构建。
配置构建步骤：在构建步骤中，设置构建过程，包括打包、测试等。可以使用 Jenkins 提供的插件来简化构建过程。
配置发布步骤：在发布步骤中，设置发布过程，包括将构建产物部署到目标环境、执行必要的脚本等。可以使用 Jenkins 的插件（如 Publish Over SSH）来简化发布过程。

代码示例

示例 Jenkinsfile

pipeline {
    agent any

    stages {
        stage('Checkout') {
            steps {
                git 'https://your-git-repo-url.git'
            }
        }

        stage('Build') {
            steps {
                script {
                    sh 'npm install'
                    sh 'npm run build'
                }
            }
        }

        stage('Test') {
            steps {
                script {
                    sh 'npm run test'
                }
            }
        }

        stage('Deploy') {
            steps {
                script {
                    // 部署步骤，例如使用 SSH 部署到服务器
                    // sh 'scp -r dist/* user@yourserver:/path/to/deploy/directory'
                }
            }
        }
    }
}