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

      网罗开发   （小红书、快手、视频号同名）   
    各人好，我是 展菲，现在在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技能，包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。
图书作者：《ESP32-C3 物联网工程开发实战》
图书作者：《SwiftUI 入门，进阶与实战》
超等个体：COC上海社区主理人
特约讲师：大学讲师，谷歌亚马逊分享嘉宾
科技博主：极星会首批签约作者

  
摘要

本文旨在探讨怎样为开源的 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 的配置文件。

1. name: CI/CD Pipeline
3. on:
4.   push:
5.     branches:
6.       - main
7.   pull_request:
8.     branches:
9.       - main
11. jobs:
12.   build:
13.     runs-on: ubuntu-latest
15.     steps:
16.     - name: Checkout code
17.       uses: actions/checkout@v2
19.     - name: Set up Node.js
20.       uses: actions/setup-node@v2
21.       with:
22.         node-version: '14'
24.     - name: Install dependencies
25.       run: npm install
27.     - name: Build project
28.       run: npm run build
30.     - name: Run tests
31.       run: npm run test
33.     - name: Deploy to server (optional)
34.       # 这里可以添加部署到服务器的步骤，例如使用 SSH 部署工具
35.       # 需要先配置服务器的 SSH 密钥等
36.       # run: scp -r dist/* user@yourserver:/path/to/deploy/directory

复制代码

主动化测试和构建

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

1. {
2.   "scripts": {
3.     "build": "vue-cli-service build",
4.     "test": "jest"
5.   }
6. }

复制代码

代码示例

• 示例项目结构
  

1. my-vue-project/
2. ├── .github/
3. │   └── workflows/
4. │       └── ci-cd.yml
5. ├── dist/
6. ├── node_modules/
7. ├── public/
8. ├── src/
9. ├── package.json
10. └── vue.config.js

复制代码

• 示例 vue.config.js 配置
  

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

复制代码

Jenkins 实现 CI/CD 流水线

Jenkins 配置步调

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

代码示例

• 示例 Jenkinsfile
  

1. pipeline {
2.     agent any
4.     stages {
5.         stage('Checkout') {
6.             steps {
7.                 git 'https://your-git-repo-url.git'
8.             }
9.         }
11.         stage('Build') {
12.             steps {
13.                 script {
14.                     sh 'npm install'
15.                     sh 'npm run build'
16.                 }
17.             }
18.         }
20.         stage('Test') {
21.             steps {
22.                 script {
23.                     sh 'npm run test'
24.                 }
25.             }
26.         }
28.         stage('Deploy') {
29.             steps {
30.                 script {
31.                     // 部署步骤，例如使用 SSH 部署到服务器
32.                     // sh 'scp -r dist/* user@yourserver:/path/to/deploy/directory'
33.                 }
34.             }
35.         }
36.     }
37. }

复制代码

流水线运行和监控

• 在 GitHub Actions 中，可以在仓库的 “Actions” 选项卡中检察流水线的运行情况和日志。
  
• 在 Jenkins 中，可以在仪表盘中检察流水线的运行状态和日志，方便举行问题排查和监控。
  

QA环节

Q1：GitHub Actions 和 Jenkins 哪个更得当 Vue.js 项目？
A1：这取决于项目的具体需求和团队的偏好。GitHub Actions 与 GitHub 仓库无缝集成，配置简单且方便管理。而 Jenkins 功能强盛且机动，但需要单独安装和配置。
Q2：怎样在 CI/CD 流水线中处理不怜悯况的配置？
A2：可以通过情况变量或配置文件来区分不怜悯况的配置。比方，在 .env 文件中界说不怜悯况的变量，然后在构建时根据情况变量来设置相应的配置。
总结

本文详细先容了怎样利用 GitHub Actions 和 Jenkins 为 Vue.js 开源项目计划 CI/CD 流水线，实现了主动化的构建、测试和发布流程。通过搭建 CI/CD 流水线，可以显著进步开发效率，减少手动操作带来的错误，从而进步项目的质量和稳固性。
随着前端技能的不断发展和开源社区的强大，Vue.js 项目将碰面临更多的挑战和机会。未来，可以进一步优化 CI/CD 流水线的配置和流程，引入更多的主动化工具和技能，如主动化测试框架、性能监控工具等，以提升项目的开发效率和质量。
参考资料

• Vue.js 官方文档
  
• GitHub Actions 官方文档
  
• Jenkins 官方文档
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。