手把手教你三步完成測試監控系統搭建

• 2019 年 11 月 30 日
• 筆記

筆者所在的項目組有多個測試環境，偶爾會出現由於程序錯誤導致負載飆升或日誌打滿磁盤的問題。基於早發現、早治療的原則，我們可以構建一個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-monitorsrcApp.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。

Qtest是360旗下的專業測試團隊！

是WEB平台部測試技術平台化、效率化的先鋒力量！