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

最新推荐文章于 2024-09-14 08:45:56 发布

前端阳光

最新推荐文章于 2024-09-14 08:45:56 发布

阅读量1.1k

点赞数 1

文章标签： java js vue git javascript

本文链接：https://blog.csdn.net/weixin_43964148/article/details/124358197

版权

点击上方前端阳光，关注公众号

回复加群，加入技术交流群交流群

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吧。