前言
我们的构建,现在还只能通过一个带参数的URL地址才能触发构建,而且构建的进度以及状态,我们都监听不到,那么我们该怎么打造这样的一个闭环呢,我这里以我的机器作为一个服务器,来打造一个前端化的构建闭环,
开始
打造一个闭环,那么我们需要一个可视化的前端界面加一个后端的服务,所以我们要新建立一个admin项目,在起一个自己的node服务项目,如果要做回滚和日志记录这些功能的话,可能需要后端的支持,因为我这里只做测试环境的发布使用,所以不需要用到这些功能,只起一个基础的node服务就可以.
前台可视化项目
构建一个admin项目,构建发布界面
包含对应的三个参数,然后我们点发布,触发之前我们的远程构建,这里要拿到触发的任务在队列里的ID,所以需要我们需要通过后端来拿到这个ID 前端代码如下
handleOk () {
this.modalInfo.loading = true
var id = ''
const { project, branch, env } = this.form
Server({
url: 'post',
data: {
project,
branch,
env
},
method: 'POST',
needLoading: true
}).then((res) => {
id = res.data.id
this.getJobId(id, project)
})
}
后端代码(自己起的node服务)
app.post("/post",async function(req,res){
var resultId = await getId(req.body)
var result = {code:200,id: resultId,msg:"post请求成功"};
res.send(result);
});
function getId (par) {
var options = { method: 'POST',
url: 'http://192.168.0.85:8080/buildByToken/buildWithParameters',
headers:
{ 'cache-control': 'no-cache',
'Content-Type': 'application/x-www-form-urlencoded' },
form:
{ job: par.project,
token: 'xxxxxxxxxx',
branch: par.branch,
env: par.env
} };
return new Promise(function(resolve,reject){
request(options, function (error, response, body) {
if (error) throw new Error(error);
var id = response.headers.location.split('/')[response.headers.location.split('/').length - 2]
console.log('id'+id)
resolve(id)
});
})
}
拿到在队列里的ID之后,我们要去查构建时的ID,这个时候有可能任务还只在队列里等待,还没有构建,所以没有构建ID,这个时候就需要轮询去查这个构建ID,只有通过这个构建ID才能拿到任务在执行时的状态
前端代码
getJobId (id, project) {
Server({
url: 'http://192.168.0.85:8088/getJobId?resultId=' + id,
method: 'get',
needLoading: true
}).then((res) => {
if (res.data.code == 200) {
this.getState(res.data.number, project)
} else {
setTimeout(() => {
this.getJobId(id)
}, 1000)
}
})
},
这里做一个轮询,如果查不到队列里的id,就下一秒再查一次,一直查到为止
后端代码
app.get("/getJobId",async function(req,res){
var number = await getNumber(req.query)
var result = {code:200,number: number,msg:"jogId请求成功"};
res.send(result);
})
function getNumber (par) {
return new Promise(function(resolve,reject){
request({ method: 'GET',
url: 'http://192.168.0.85:8080/queue/item/'+ par.resultId +'/api/json',
headers:
{ 'cache-control': 'no-cache',
'Content-Type': 'application/x-www-form-urlencoded' }}, function (error, response, body) {
if (error) throw new Error(error);
const executable = JSON.parse(response.body).executable
if (executable) {
resolve(executable.number)
}
})
})
}
这里有个重点,我们通过这个接口拿回来的是个string类型,所以要转成json才能用,我们主要用的是executable这个字段里的number值,这个值就是构建的任务id,注意,和队列id不是一个东西,拿到这个id表明任务已经在执行了,而不是排在队列里了,我们就可以查到任务的状态了,根据这个id去查任务状态
前端代码
getState (number, project) {
this.showProgress = true
Server({
url: 'http://192.168.0.85:8088/getStauts?id=' + number + '&job=' + project,
method: 'get',
needLoading: false
}).then((res) => {
if (res.data.stauts) {
this.modalInfo.loading = false
this.showProgress = false
this.$message.success('构建成功')
this.modalInfo.visible = false
} else {
setTimeout(() => {
this.getState(number, project)
}, 1000)
}
})
},
跟上面的一样,轮询,一秒钟一次,直到查到构建的状态为止
后端代码
app.get("/getStauts",async function(req,res){
var stauts = await getStauts(req.query)
var result = {code:200,stauts: stauts,msg:"get请求成功"};
res.send(result);
})
function getStauts (query) {
return new Promise(function (resolve, reject) {
options1.url = 'http://192.168.0.85:8080/job/'+ query.job +'/lastBuild/api/json'
request(options1, function (error, response, body) {
resolve(JSON.parse(response.body).result)
});
})
}
总体的流程就是先去查任务在队列里的id,然后去轮询查这个任务的执行id,因为队列里可能有别的任务,所以要轮询查,查到任务执行的id,再通过执行id来查执行的状态,这样就能在可可视化界面里拿到这个信息.
注意项
这里有个注意项,我们之前写的触发构建文章里是把上传任务配置在
这样就会有一个问题,我们查这个状态的时候,他查的是构建状态,所以构建完成后就返回成功了,但这个时候,上传动作还没完,并没有监听到上传这个动作,所以我们要改下,把上传任务加到构建里去
配置和之前配置是一样的,这要就把上传动作也加入到构建动作里了,能监听到所有的动作了.
