用Jenkins搭建项目发布平台--五.实战--获取构建状态打造闭环

前言

我们的构建,现在还只能通过一个带参数的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来查执行的状态,这样就能在可可视化界面里拿到这个信息.

注意项

这里有个注意项,我们之前写的触发构建文章里是把上传任务配置在

这样就会有一个问题,我们查这个状态的时候,他查的是构建状态,所以构建完成后就返回成功了,但这个时候,上传动作还没完,并没有监听到上传这个动作,所以我们要改下,把上传任务加到构建里去

配置和之前配置是一样的,这要就把上传动作也加入到构建动作里了,能监听到所有的动作了.