我司是如何在测试环境对web项目实现进行自动更新的？

前端_彭于晏
1,601 阅读4分钟

前置要求

服务端环境： node git 没装的，快点

产生想法的原因

在我司的实际开发环境中，并没有特别严格的提测流程。经常是测试找我们来测功能，最经常的一句话是你们的测试环境代码是不是没更新，你们的BUG修改有没有上测试环境啊。（多么负责的测试啊，给他呱唧呱唧）又或者领导经常说 前端吴彦祖，你这个功能开发好了吗，好了就更新到服务器上我看看。每到这个时候我就要屁颠屁颠的去登录服务器、进入服务器目录、执行更新命令。

问题来了，我们应该怎么解决这个问题呢？

公司技术栈介绍

先说下我们公司的整体技术栈介绍：

  • 前端：jquery
  • 后端：JAVA
  • 代码管理：gitLab
  • HTTP服务：NGINX

之前的方式是，我代码开发完成提交到git上面前，然后把包发到测试服务器上用于平时的使用和测试，但很多时候我并不能及时的把代码更新到服务器上去（因为懒）。所以这就需要我们以技术手段去解决这个问题。实现代码提交到git的master分支之后服务端就自动更新。不废话，下面上干货。

监听master分支提交

我们想要做到代码提交之后，服务端就立刻响应。那必须要监听到代码的提交。如何监听呢？ 我这边提供两种思路。

  • 爬取gitLab里要监听项目的master提交记录
  • 使用gitLab提供的webHook进行监听（推荐）

爬取gitLab

这个方法我大体说下，首先进入项目的提交记录分支，我司的提交记录地址是 (http://192.168.10.115/zhoumaoning/pipegallery-static/commits/master) 搭建一套爬虫框架，在这我不具体讲解我使用的是 node superagent cheerio 不会的点击搭建教程。 然后获取到提交记录的第一条信息，缓存起来。每次获取到第一条信息和缓存对比，如果有变化就执行 后续操作。

当然缺点很明显，特别浪费资源。毕竟在大多数时间中我们并没有提交代码。

webHook（推荐）

什么是Webhook呢？官方文档 顾名思义，其实就是钩子。当我们在Gitlab上做出某些特定操作时，可以触发钩子，去进行一些我们事先设定好的脚本，以达到某些特定功能。

配置界面

我这个是中文版本的，英文版本的gitLab可以通过位置对应去查找。 然后配置webHook

知道你们看不懂英文，给你们看看中文版本的（其实我也看不懂）。

谷歌翻译真香！

现在webhook已经配置完成。

接口开发

我们采用webHook监听提交时，就需要我们就需要开发接口为gitLab调用。我采用的是node的koa2来提供接口服务。 安装 koa2 和 koa-router,然后编写接口 示例：

const Koa = require('koa2');
const router = require('koa-router')();
const app = new Koa();
router.post('/monitorCodePost', (ctx) => {
    // ...
  ctx.body = 'ok';
});
app.use(router.routes());
app.listen('4077');

接口一定要支持 post请求！post请求！post请求 重要的事情说三遍！我就在这栽了个跟头

到这步我们是知道我们什么时候提交了代码，那如何更新项目呢？

项目更新配置

以我司项目为例。

  • 新建目录 pipegallery
  • 在项目执行git clone http://192.168.10.115/zhoumaoning/pipegallery-static.git
  • 执行git pul看是否能正常更新
  • NGINX配置http服务的目录指向pipegallery/* 目录（*代表你更新下来项目目录）
  • 说明一下当你们的项目是vue之类的项目时,NGINX配置http服务的目录指向pipegallery/*/dist 你打包的目录/> 以上配置就算完成了。逻辑上说，当我们进入pipegallery/* 目录在执行git pull就更新了项目。那如何让代码执行这些操作呢?

完整接口代码

const Koa = require('koa2');
const router = require('koa-router')();
let process = require('child_process');
const app = new Koa();
router.post('/monitorCodePost', (ctx) => {
//进入目录并进行git pull 操作
  process.exec(
    'cd /home/extend_app/silverdata2/pipegallery/pipegallery-static/&&git pull',
    (error, stdout, stderr) => {
      if (err) {
        // ...
        console.log('error:' + stderr);
      } else {
        // ...
        console.log(stdout);
      }
    }
  );
  ctx.body = 'ok';
});
app.use(router.routes());
app.listen('4077');

不知道 child_process 是什么的 点击查看 我这块并没有进行太多的处理，在执行错误的时，需要人工介入应该怎么办？这些都在回调函数里进行编写实现。比如发邮件之类的消息来通知你来处理错误，这些都可以扩展

小结

本次是前端吴彦祖第一次踩这类坑，让我切身感受到了前端人员不是个只能画页面的仔。

avatar
文章
阅读
粉丝