午夜久草,天天躁狠狠躁狠狠躁夜夜躁,色噜噜在线

奇技指南

筆者所在的項(xiàng)目組有多個(gè)測(cè)試環(huán)境，偶爾會(huì)出現(xiàn)由于程序錯(cuò)誤導(dǎo)致負(fù)載飆升或日志打滿磁盤的問題?；谠绨l(fā)現(xiàn)、早治療的原則，我們可以構(gòu)建一個(gè)web應(yīng)用，從而對(duì)服務(wù)器的負(fù)載及磁盤空間進(jìn)行監(jiān)控。在本文中，前端我們使用易于上手的Vue、餓了么開源的Element以及百度的Echarts，后端接口使用基于Python的Flask框架。

本文轉(zhuǎn)載自Qtest之道

No.1

搭建前端框架

我們將使用Vue CLI產(chǎn)生基本Vue.js App。如果你還沒有安裝它，請(qǐng)參考：https://cli.vuejs.org/zh/guide進(jìn)行安裝，然后使用Vue CLI快速創(chuàng)建一個(gè)應(yīng)用，如：$ vue create server-monitor。

在選擇了一些配置項(xiàng)并經(jīng)過漫長(zhǎng)等待之后，Vue CLI會(huì)建好相應(yīng)文件夾，打開這個(gè)文件夾，并執(zhí)行$vue add element、$npm install vue-echarts –save、$npm install axios –save以添加element、vue-echarts和axios。

同樣，在選擇了一些配置項(xiàng)并經(jīng)過等待之后，可以看到添加成功的提示，下圖以element為例：

此時(shí)，執(zhí)行$ npm run serve會(huì)在本地的8080端口啟動(dòng)服務(wù)，打開瀏覽器并輸入地址，可以看到這樣的一個(gè)頁(yè)面，這表明Vue+Element的環(huán)境已經(jīng)搭建成功了：

此時(shí)，我們?cè)陧?xiàng)目文件夾運(yùn)行$ npm run build可以生成一個(gè)包。

No.2

后端服務(wù)

接下來，我們開始編寫我們的后端服務(wù)，在前端項(xiàng)目同級(jí)文件夾新建一個(gè)文件夾backend，在backend文件夾內(nèi)新建一個(gè)文件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文件夾執(zhí)行$ python run.py可以啟動(dòng)后端服務(wù)，默認(rèn)端口為5000，在瀏覽器中輸入localhost:5000，如果一切正確，你將見到熟悉的歡迎界面，但這一次是由flask路由的頁(yè)面。

接下來，我們編寫業(yè)務(wù)代碼。我們的需求是：遠(yuǎn)程連接一臺(tái)服務(wù)器，獲取該服務(wù)器的負(fù)載和磁盤使用空間，存到本地?cái)?shù)據(jù)庫(kù)以返回給前端頁(yè)面。

首先，我們需要一個(gè)配置文件以保存服務(wù)器密碼，我們使用configparser這個(gè)包來實(shí)現(xiàn)這個(gè)功能。在backend文件夾新建一個(gè)文件monitor.config，并寫入服務(wù)器連接密碼：

[config]SERVER_PASS=123456

而對(duì)于數(shù)據(jù)的存取，我們使用sqlite作為數(shù)據(jù)庫(kù)，peewee這個(gè)包作為ORM，本文中我們建了包含磁盤容量、已用容量和更新時(shí)間的表”system_disk_monitor”和包含當(dāng)前負(fù)載、用戶連接數(shù)、更新時(shí)間的表”system_uptime”。sqlite數(shù)據(jù)庫(kù)文件保存在backend目錄下：

接著，我們開始編寫后端的業(yè)務(wù)代碼。代碼邏輯是使用paramiko這個(gè)包連接服務(wù)器、執(zhí)行命令，在獲得所需數(shù)據(jù)后對(duì)數(shù)據(jù)進(jìn)行處理后保存在數(shù)據(jù)庫(kù)，本文中我們獲取了磁盤空間、磁盤已使用空間、當(dāng)前連接數(shù)和15分鐘的平均負(fù)載這四個(gè)數(shù)據(jù)。對(duì)于服務(wù)器的連接和執(zhí)行命令，可以這樣編寫代碼：

ssh = paramiko.SSHClient() ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())

 ssh.connect('192.168.199.208', 22, 'pi', SERVER_PASS) # SERVER_PASS應(yīng)為configparser所讀取的服務(wù)器密碼

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()

需要注意的是，由于筆者手頭并無(wú)個(gè)人服務(wù)器，這里使用了一臺(tái)樹莓派作為演示，對(duì)于截取目標(biāo)字段，不同服務(wù)器可能不同，需要靈活操作。此外，如果需要監(jiān)控的服務(wù)器就是應(yīng)用部署的服務(wù)器，那么psutil不失為更優(yōu)雅的選擇。對(duì)于Windows系統(tǒng)，我們可以使用“Windows定時(shí)任務(wù)”來定時(shí)運(yùn)行此文件以不斷獲得數(shù)據(jù)；對(duì)于Linux系統(tǒng)，我們則可以使用crontab。

執(zhí)行獲取數(shù)據(jù)的代碼后，在數(shù)據(jù)庫(kù)中，我們就可以看到數(shù)據(jù)已經(jīng)成功保存了：

接下來，我們編寫flask后端接口。新增一個(gè)路由：

@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)

這段代碼將獲取數(shù)據(jù)庫(kù)內(nèi)保存的數(shù)據(jù)，將其生成json后返回給前端，再次運(yùn)行$ python run.py并訪問http://localhost:5000/systemMonitor，可見接口可以成功返回?cái)?shù)據(jù)：

No.3

前端業(yè)務(wù)代碼

然后，我們編寫前端業(yè)務(wù)代碼，修改的文件為server-monitor\src\App.vue?？梢栽趘ue實(shí)例生命周期的mounted中使用axios調(diào)用后端接口并綁定數(shù)據(jù)：

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下重新執(zhí)行$ npm run build，這將構(gòu)建一個(gè)新的包，然后刷新localhost:5000頁(yè)面，如果一切正確，你將看到數(shù)據(jù)準(zhǔn)確顯示的頁(yè)面：

No.4

后續(xù)

在實(shí)際應(yīng)用中，我們可能有多臺(tái)服務(wù)器需要進(jìn)行監(jiān)控，并且需要增加諸如郵件告警等功能，這時(shí)可能接口結(jié)構(gòu)、數(shù)據(jù)庫(kù)表結(jié)構(gòu)、以及代碼邏輯都需要修改，有興趣的讀者可以自行嘗試，本文完整代碼可以參見https://github.com/shr1213/VueServerMonitor

關(guān)注我們

界世的你當(dāng)不

只做你的肩膀

無(wú)

360官方技術(shù)公眾號(hào)

技術(shù)干貨|一手資訊|精彩活動(dòng)

空·

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区