整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Groovy 操作 HTML 文档

. 问题描述

端工程化的今天,版本发布已经成为开发中的重要一环。

很多项目开发中都开始使用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

需求分析

首先分析,如果要做到自动发版需要实现哪些功能。

  1. 从相应仓库下载要发布的分支代码
  2. 编译代码设置npm源安装依赖执行编译命令
  3. 将编译后的代码发布到服务器指定目录

技术实现

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的开发,此处就不在赘述了。
最终项目效果:

两天折腾了一下 Jenkins 持续集成,由于公司使用自己搭建的 svn 服务器来进行代码管理,因此这里 Jenkins 是针对 svn 服务器来进行的配置,Git 配置基本一致,后面也介绍了下针对 Github 管理的项目的 Jenkins 配置

之前项目每次修改之后都需要本地 npm run build 一次手动发布到服务器上方便测试和产品查看,有了Jenkins持续集成之后只要 svn 或者 git 提交之后就会自动打包,很方便,此次记录以备后询。

声明:

  1. 后面的项目地址与打包地址都是使用 my-demo,自行修改;
  2. 另外还有路径等,根据自己情况自行修改;

1、安装

1.1 安装 Nginx

可以直接去官网下直接下载,解压缩 start nginx就可以使了,常用命令:

start nginx # 启动
nginx -s reload # 修改配置后重新加载生效
nginx -s reopen # 重新打开日志文件
nginx -t # 配置文件检测是否正确

1.2 安装Jenkins

从官网下载文件安装之后,我这里安装到 C:Jenkins(Mac 不用在意),默认端口 8080,这时候浏览器访问 localhost:8080 就能访问 Jenkins 首页,这里注意如果不安装到 C 盘根目录有些插件安装会出错


这里会让你去某个地方找一个初始密码文件打开并填到下面的密码框里,验证成功之后进入页面,选择 Installsuggested plugins 推介安装的插件


插件都安装完成之后进入用户登录界面,设定用户名、密码及邮箱。

然后提示 Jenkins is ready!→ Start using Jenkins ~


注意这里因为要使用node的命令来执行创建后操作,所以还需要安装插件:NodeJSPlugin、 Deployto container、 Github、 Postbuild task

这里顺便记录一下启动和关闭Jenkins服务的命令行:

net start jenkins // 启动Jenkins服务
net stop jenkins // 停止Jenkins服务

2、创建svn项目的Jenkins任务

2.1 新建

左边栏新建一个任务,输入一个任务名称,这里随便写一个


2.2 配置

General

这里才是重头戏,进入刚刚创建的任务的配置页面的 General


丢弃旧的构建就是检测到新的版本之后把旧版本的构建删除

源码管理

这里采用的是 svn 来管理代码,

构建触发器


这里的 Poll SCM 表示去检测是否更新构建的频率, ***** 表示每分钟, H**** 表示每小时

构建

cd cd C:Jenkinsworkspacemy-demo
node -v
npm -v
cnpm i
npm run build

构建后操作

安装插件 Postbuild task 后,可以在 增加构建后操作步骤中选择 Postbuild task 选项,增加构建后执行的script,具体也可以参考文章:jenkins部署maven项目构建后部署前执行shell脚本 - https://blog.csdn.net/minebk/article/details/73294785

我这里的 Logtext 是 Buildcomplete

Script:

rmdir /q/s C:ginx-1.14.0htmlmy-demo
xcopy /y/e/i C:Jenkinsworkspacemy-demomy-demo C:ginx-1.14.0htmlmy-demo

复制生成好的文件到Nginx的目录下,路径自行修改

3、创建Github项目的Jenkins任务

Jenkins 不仅可以持续集成 svn 项目,Git 项目也是可以的,这里以 Github 上的项目为例:



其他配置和上面一章一样

这样如果 github 有新的 push 请求,都会自动化部署到之前的服务器上,可以说很方便了。

试一试

配置好了我们试一试,在刚刚 github 项目中随便 commit 一版到 github :


稍等片刻去本地 Jenkins 地址 http://localhost:8080/job/vue-element-template/ 就能看到 Jenkins 已经在构建中了



50秒之后:


构建成功!构建用时 54 秒,现在访问本地服务器地址 http://localhost:8282/vue-element-template,已经能看到编译后的发布版本啦~

如果你希望发布的是测试版本,可以自行修改构建后操作的 script