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

举报
CeshirenTester 发表于 2022/06/27 10:41:58 2022/06/27
【摘要】 笔者所在的项目组有多个测试环境,偶尔会出现由于程序错误导致负载飙升或日志打满磁盘的问题。基于早发现、早治疗的原则,我们可以构建一个web应用,从而对服务器的负载及磁盘空间进行监控。在本文中,前端我们使用易于上手的Vue、饿了么开源的Element以及百度的Echarts,后端接口使用基于Python的Flask框架。No.1搭建前端框架我们将使用Vue CLI产生基本Vue.js App。如...

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


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_template
app = 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。

获取更多相关资料戳:https://qrcode.ceba.ceshiren.com/link?name=article&project_id=qrcode&from=jianshu&timestamp=1656297522&author=wuyue

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。