快来学习下webhook吧!超级简单易学

1. Webhook是啥?
简单而言,webhook就是一个监听的钩子,监听你push你的代码到github仓库之后,发起一个请求。这个请求要请求哪里交给你设置要。

主要流程

git push xxx 本地代码提交至远程github仓库
github仓库收到push后进行回调,发post( Payload url 是来自webhooks的配置)请求
基于 Payload url 的服务根据传回来的信息进行提取,拉取最新代码并重新构建项目
可以看到,我们只需把代码提交到github仓库即可,不用再上服务器进行一些列的操作了
在这里插入图片描述
2. webhook有什么作用呢?
目前我发现的我们公司主要是用于 监听到开发者 push代码到仓库之后就 发送消息到企业微信群里。如下图所示:
在这里插入图片描述
完成自动化部署
3.配置webhook超简单
来到你的仓库,点击setting

在这里插入图片描述
然后选中左边的webhook,就可以配置了

在这里插入图片描述
4.主要配置四部分:
Payload URL 回调服务的地址,就是你想请求的一个接口的地址,请求方式是POST;

Content type 回调请求头,建议JSON格式;

Secret 为了做安全校验,设置后会在请求 header 中增加如下两个属性,用来区分请求的来源,避免暴露的请求被恶意访问;

X-Hub-Signature: ...
X-Hub-Signature-256:...
最后我们选择由哪些事件来触发webhook回调,push event(代码推送事件)、everything(所有事件)、某些特定事件三种。

配置完成后,尝试提交代码下,然后从Recent Deliveries中你会发现有调用webhook的记录。

5.实现自动化部署
我们用node简单地搭建一个服务器

下面讲讲在服务器上我们是怎么接收Gitlab的请求并且执行部署的--

const exec = require('child_process').exec
const express = require('express')
const app = express()

let isLocking = false

app.post('/deploy', function (req, res) {
    let headers = req.headers
    let cmdStr = 'cd ... && git fetch origin && ...'
    if (!isLocking && headers['x-gitlab-token'] === 'xxx') {
        isLocking = true
        exec(cmdStr, function (err, stdout, stderr) {
            if (err) {
                // ...
                console.log('error:' + stderr);
            } else {
                // ...
                console.log(stdout)
                isLocking = false
            }
        })
    }
    // ......
})

app.listen(1234, '0.0.0.0', function () {
    console.log(`listening on port 1234`)
})
可以看到,当我们配置webhook的请求URL是我们的deploy接口时,当webhook监听到我们push代码之后,就会请求deploy接口,然后执行接口里面的逻辑,然后自动化部署就是我们在接口里写好的cmdStr字符串了。

6.实现企业微信机器人报告
企业微信的配置其实更简单,我们先创建一个群组,在群组右键有个添加机器人选项,添加成功后会生成webhook地址。我们只要向这个地址发送POST请求,群组内就会收到推送消息。

在这里插入图片描述
消息内容支持文本(text)、markdown(markdown)、图片(image)、图文(news)四种消息类型,而且还支持在群内@群成员,下边以文本格式做示范。

   curl 'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=145a516a-dd15-421f-97a3-ba3bf1479369' \
   -H 'Content-Type: application/json' \
   -d '
   {
        "msgtype": "text",
        "text": {
            "content": "你好,我是程序员内点事"
        }
   }'

直接请求 url 发现消息推送成功,说明配置的没问题。

所以我们可以这样实现:

const exec = require('child_process').exec
const express = require('express')
const app = express()

let isLocking = false

app.post('/deploy', function (req, res) {

  try {
     const content = JSON.parse(req.body.payload) ;
     const name = content.pusher.name;
     const message = content.before;
     
     axios.post('https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=145a516a-dd15-421f-97a3-ba3bf1479369',data: {
      "msgtype": "text",
        "text": {
            "content": "你好,我是程序员内点事"
        }
     })
  } catch (error) {
    console.log(error);
  }
})

app.listen(1234, '0.0.0.0', function () {
    console.log(`listening on port 1234`)
})
看,基本就是这样实现啦,够简单吧,(代码只是写个大概,并不完整)。

快去给你的仓库配置下webhook吧。

作者:事业有成的张啦啦


欢迎关注微信公众号 :前端阳光