使用nodejs实现模拟jenkins打包发布vue项目工程
ztj100 2025-06-13 18:10 4 浏览 0 评论
前端工程化的今天,版本发布已经成为开发中的重要一环。
很多项目开发中都开始使用jenkins来做自动发版工作。
不过jenkins复杂的安装配置比较不容易上手,而且很多环境是不适用安装jenkins来做自动发版的。
我模拟Jenkins逻辑写了一个node版本的自动发版的程序。带大家了解一下自动发版的基本原理。同时,如果需要的朋友也可以直接上手来使用。
仓库地址和使用方式
使用方式:
> git clone https://github.com/shb190802/node-jenkins.git
> cd node-jenkins
> npm install
> node app.js
浏览器访问YOUR_IP_ADDRESS:3011
需求分析
首先分析,如果要做到自动发版需要实现哪些功能。
- 从相应仓库下载要发布的分支代码
- 编译代码设置npm源安装依赖执行编译命令
- 将编译后的代码发布到服务器指定目录
技术实现
1、从相应仓库下载要发布的分支
此处使用download-git-repo,来完成从相应仓库下载要发布的分支代码。放置在一个临时目录下。
// 示例方法
let repository = `direct:${this.repo}#${this.branch}`
download(repository, destination, options, callback)
2、编译代码
编译代码我们使用child_process.exec来执行命令行命令来执行
// 示例方法
const COMMAND = ['npm config set registry http://registry.npm.taobao.org/', 'npm install', 'npm run build']
for (let i = 0, len = COMMAND.length; i < len; i++) {
await this.exec(COMMAND[i]) // 需要在async函数中
}
3、将编译后代码发送到服务器对应目录
这里使用到ssh2-sftp-client
// 示例方法
let client = new Sftp()
console.log('连接web服务器'.yellow)
await client.connect({
host: this.host,
username: this.username,
password: this.password
})
console.log(`mkdir ${this.remotePath}`.green)
await client.mkdir(this.remotePath, true)
console.log(`传输文件【${localPath}】===>【${this.remotePath}】`.green)
await client.uploadDir(localPath, this.remotePath) // 将本地文件夹传输到远程
console.log('文件传输完毕'.green)
client.end()
4、项目优化
前三步已经完成一个自动下载、打包、发布的流程。
我们可写出一个js文件,使用命令行工具【node+filename.js】来做到本机自动发版。
但是项目还有很多可以优化的地方。
(1)将编译选项抽象成配置项
将配置选项从代码中抽象出来,我们将发版程序做的更加独立。
{
/** build config */
name: '聊天室 客户端',
repo: 'https://github.com/shb190802/chat.git', // 仓库地址
branch: 'master', // 编译分支 默认master
srcPath: 'client', // 项目编译目录,一般是vue.config.js所在目录
buildCommand: ['npm config set registry http://registry.npm.taobao.org/', 'npm install', 'npm run build'],
outputPath: 'server/static/html', // 编译目录 默认是srcPath下 dist
/* host config */
remotePath: '/usr/local/nginx/html/html', //YOUR_REMOTE web项目远程目录 注意,由于会提前清空远程目录。请慎重填写地址
host: '', // YOUR_HOST web服务器IP地址
username: '', // YOUR_NAME
password: '' // YOUR_PWD
}
(2)重复使用node_modules
node的依赖安装,占到了打包的很大一部分时间。
我在这里处理方式是:
从仓库下载代码之前,先判断是否已经有过安装的node_modules目录。
如果有,就将它转移到一个临时目录。等待代码下载完成之后。在转移到编译目录下。
5、使用koa创建一个server端,给局域网内其他同事提供打包服务
即时完成了前边步骤,我们也还只是一个单机版的发版程序。
最后,我们使用koa建立一个简单的website。发布局域网内的同事。
静态页面和serviceApi的开发,此处就不在赘述了。
最终项目效果:
相关推荐
- 13个python常用库,提高你的开发能力
-
Python拥有大量封装好的功能模块和工具库,这些库广泛应用于数据分析、机器学习、Web开发、自动化等多个领域。库在Python的作用非常重要,利用库不仅能简化复杂的任务还能极大减少开发的时间。下面介...
- TensorFlow中logits的含义解析(tensorflow2 lstm)
-
技术背景在机器学习尤其是深度学习领域,...
- Python TensorFlow机器学习模型构建指南
-
以下是一篇关于使用Python和TensorFlow构建机器学习模型的详细指南,结合代码示例和关键概念解释:探索TensorFlow:构建强大的机器学习模型TensorFlow是由Goo...
- TensorFlow和Pytorch中的音频增强
-
对于图像相关的任务,对图像进行旋转、模糊或调整大小是常见的数据增强的方法。因为图像的自身属性与其他数据类型数据增强相比,图像的数据增强是非常直观的,我们只需要查看图像就可以看到特定图像是如何转换的,...
- 使用TensorFlow进行深度学习模型训练
-
深度学习是一种机器学习的子领域,它通过模拟人脑神经网络的结构和运作方式,从而实现在大规模数据上进行复杂任务的训练和预测。TensorFlow是由Google开发的一款开源的深度学习框架,它为我们...
- Keras各种Callbacks介绍(keras中backend常用)
-
1前言在tensorflow.keras中,callbacks能在fit、...
- 实例解析神经网络的工作原理(神经网络具体实例)
-
来源:算法进阶...
- 在浏览器中进行深度学习:TensorFlow.js (五)构建一个神经网络
-
这一次我们终于可以开始真正的深度学习了,从一个神经网络开始。神经网络(NeuralNetwork)是深度学习的基础,基本概念包括:神经元,层,反向传播等等。如果细讲我估计没有五到十篇文章那是讲不完的...
- TensorFlow和Keras入门必读教程(tensorflow_core.keras)
-
导读:本文对TensorFlow的框架和基本示例进行简要介绍。作者:本杰明·普朗什(BenjaminPlanche)艾略特·安德烈斯(EliotAndres)来源:华章科技01TensorFlo...
- Transformer系列:残差连接原理详细解析和代码论证
-
关键词:...
- 详解SoftMax多分类器(多分类svm代码)
-
常见的逻辑回归、SVM等常用于解决二分类问题,对于多个选项的分类问题,比如识别手写数字,它就需要10个分类,同样也可以用逻辑回归或SVM(只是需要多个二分类来组成多分类)。对于多分类的实现,我们还可以...
- 如何使用 TensorFlow 构建机器学习模型
-
在这篇文章中,我将逐步讲解如何使用TensorFlow创建一个简单的机器学习模型。TensorFlow是一个由谷歌开发的库,并在2015年开源,它能使构建和训练机器学习模型变得简单。...
- 芋道 ruoyi-vue-pro 踩的那些坑—前端编译打包问题
-
1、芋道ruoyi-vue-pro前端没有README.md,是可以理解,毕竟他们是以文档来创收的。但是对于非专业的前端人员非常的不友好。坑是一个接一个,很崩溃。我看项目有有个yarn.lock,...
- Nginx部署Vue项目以及解决刷新页面404
-
在部署vue、react的前端项目时,经常会出现404的问题,一般是文件不是真正的存在,所以Nginx报404的错误一、打包项目1.在项目中的package.json上右键,点击Shownpm...
- vue3管理后台,打包方便体积小,访问速度快,代码规整可读性强
-
项目介绍增强型vue3管理后台,打包方便体积小,访问速度快,代码规整可读性强。项目特点首页...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- 13个python常用库,提高你的开发能力
- TensorFlow中logits的含义解析(tensorflow2 lstm)
- Python TensorFlow机器学习模型构建指南
- TensorFlow和Pytorch中的音频增强
- 使用TensorFlow进行深度学习模型训练
- Keras各种Callbacks介绍(keras中backend常用)
- 实例解析神经网络的工作原理(神经网络具体实例)
- 在浏览器中进行深度学习:TensorFlow.js (五)构建一个神经网络
- TensorFlow和Keras入门必读教程(tensorflow_core.keras)
- Transformer系列:残差连接原理详细解析和代码论证
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)