手把手教你三步完成测试监控系统搭建

奇技指南

笔者所在的项目组有多个测试环境，偶尔会出现由于程序错误导致负载飙升或日志打满磁盘的问题。基于早发现、早治疗的原则，我们可以构建一个web应用，从而对服务器的负载及磁盘空间进行监控。在本文中，前端我们使用易于上手的Vue、饿了么开源的Element以及百度的Echarts，后端接口使用基于Python的Flask框架。

本文转载自Qtest之道

No.1

搭建前端框架

我们将使用Vue CLI产生基本Vue.js App。如果你还没有安装它，请参考：https://cli.vuejs.org/zh/guide进行安装，然后使用Vue CLI快速创建一个应用，如：$ vue create server-monitor。

在选择了一些配置项并经过漫长等待之后，Vue CLI会建好相应文件夹，打开这个文件夹，并执行$vue add element、$npm install vue-echarts –save、$npm install axios –save以添加element、vue-echarts和axios。

同样，在选择了一些配置项并经过等待之后，可以看到添加成功的提示，下图以element为例：

此时，执行$ npm run serve会在本地的8080端口启动服务，打开浏览器并输入地址，可以看到这样的一个页面，这表明Vue+Element的环境已经搭建成功了：

此时，我们在项目文件夹运行$ npm run build可以生成一个包 。

No.2

后端服务

接下来，我们开始编写我们的后端服务，在前端项目同级文件夹新建一个文件夹backend，在backend文件夹内新建一个文件run.py，并粘贴下方代码：

from flask import Flask, render_templateapp = Flask(__name__,static_folder = '../server-monitor/dist',static_url_path='',template_folder = '../server-monitor/dist')@app.route('/')def index(): return render_template('index.html')if __name__ == '__main__': app.run(host='0.0.0.0', port=5000, debug=True)

在backend文件夹执行$ python run.py可以启动后端服务，默认端口为5000，在浏览器中输入localhost:5000，如果一切正确，你将见到熟悉的欢迎界面，但这一次是由flask路由的页面。 

接下来，我们编写业务代码。我们的需求是：远程连接一台服务器，获取该服务器的负载和磁盘使用空间，存到本地数据库以返回给前端页面。

首先，我们需要一个配置文件以保存服务器密码，我们使用configparser这个包来实现这个功能。在backend文件夹新建一个文件monitor.config，并写入服务器连接密码：

[config]SERVER_PASS=123456

而对于数据的存取，我们使用sqlite作为数据库，peewee这个包作为ORM，本文中我们建了包含磁盘容量、已用容量和更新时间的表”system_disk_monitor”和包含当前负载、用户连接数、更新时间的表”system_uptime”。sqlite数据库文件保存在backend目录下：

接着，我们开始编写后端的业务代码。代码逻辑是使用paramiko这个包连接服务器、执行命令，在获得所需数据后对数据进行处理后保存在数据库，本文中我们获取了磁盘空间、磁盘已使用空间、当前连接数和15分钟的平均负载这四个数据。对于服务器的连接和执行命令，可以这样编写代码：

ssh = paramiko.SSHClient() ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy()) ssh.connect('192.168.199.208', 22, 'pi', SERVER_PASS) # SERVER_PASS应为configparser所读取的服务器密码 stdin, stdout, stder = ssh.exec_command('df') occupation_result_list = stdout.read().decode(encoding='utf-8',errors='strict').split('\n') stdin, stdout, stder = ssh.exec_command('uptime') uptime_result_list = stdout.read().decode(encoding='utf-8',errors='strict').split('\n') ssh.close()

需要注意的是，由于笔者手头并无个人服务器，这里使用了一台树莓派作为演示，对于截取目标字段，不同服务器可能不同，需要灵活操作。此外，如果需要监控的服务器就是应用部署的服务器，那么psutil不失为更优雅的选择。对于Windows系统，我们可以使用“Windows定时任务”来定时运行此文件以不断获得数据；对于Linux系统，我们则可以使用crontab。

执行获取数据的代码后，在数据库中，我们就可以看到数据已经成功保存了：

接下来，我们编写flask后端接口。新增一个路由：

@app.route('/systemMonitor', methods=['GET'])def systemMonitor():    result = {}    system_disk_monitor_query = system_disk_monitor.select().order_by(        -system_disk_monitor.id).limit(1).dicts()    result['disk']={}    for row in system_disk_monitor_query:        result['disk']['size'] = row['size']        result['disk']['used'] = row['used']        result['time']=row['update_time']    system_uptime_query = system_uptime.select().order_by(-system_uptime.id).limit(60).dicts()    i = 0    result['uptime']={}    result['uptime']['average']=[]    result['uptime']['time']=[]    for row in system_uptime_query:        result['uptime']['average'].append(row['average'])        result['uptime']['time'].append(row['update_time'].strftime('%H:%M'))        i += 1    return jsonify(result)

这段代码将获取数据库内保存的数据，将其生成json后返回给前端，再次运行$ python run.py并访问http://localhost:5000/systemMonitor，可见接口可以成功返回数据：

No.3

前端业务代码

然后，我们编写前端业务代码，修改的文件为server-monitor\src\App.vue。可以在vue实例生命周期的mounted中使用axios调用后端接口并绑定数据： 

mounted() { axios({ method: 'GET', url: 'http://localhost:5000/systemMonitor' }).then(data => { this.update_time = data.data['update_time'] this.info1.conn = data.data['user'] this.pie1.series[0].data[0].name = '已使用' + data.data['disk']['used'] + 'G' this.pie1.series[0].data[0].value = data.data['disk']['used'] this.pie1.series[0].data[1].name = '剩余' + (data.data['disk']['size'] - data.data['disk']['used']) + 'G' this.pie1.series[0].data[1].value = data.data['disk']['size'] - data.data['disk']['used'] this.line1.xAxis.data = data.data['uptime']['time'].reverse() this.line1.series[0].data = data.data['uptime']['average'].reverse() }) }

完成App.vue后，在server-monitor下重新执行$ npm run build，这将构建一个新的包，然后刷新localhost:5000页面，如果一切正确，你将看到数据准确显示的页面：

No.4

后续

在实际应用中，我们可能有多台服务器需要进行监控，并且需要增加诸如邮件告警等功能，这时可能接口结构、数据库表结构、以及代码逻辑都需要修改，有兴趣的读者可以自行尝试，本文完整代码可以参见https://github.com/shr1213/VueServerMonitor

关注我们

界世的你当不

只做你的肩膀

无

 360官方技术公众号 

技术干货|一手资讯|精彩活动

空·