vue + flask 實現的 linux web dashboard

最近抽空寫了一個linux 的 dashboard, 藉此熟悉了vue框架和前端構建技術webpack等技術, 偶爾一次看到羊駝的英文名叫alpaca, 就拿來做這個項目的名字了。

alpaca是一個基於vue2.0 python2.7 flask的簡單linux dashboard, 用於收集、統計和展示linux操作系統信息,主要包括四個維度的信息：

1. 基本信息: ip，hostname，cpu配置信息，磁盤分區信息等;

2. 系統信息: 前load及變化趨勢，cpu空閒率，cpu時間分佈，內存使用率，內存使用分佈，佔用
   cpu／內存比較多的進程， IO讀寫數量，以及耗費的時間等；

3. 網絡信息: 各個網卡的進出流量統計和走勢，網絡連接的詳情以及各狀態統計；

4. 進程信息: 顯示特定進程的詳情，包括進程的內存使用情況，cpu使用情況，創建時間，狀態，
   IO情況，子進程列表，網絡連接列表，打開的文件描述符列表，啓動的線程列表等；

git地址

https://github.com/echoyuanliang/alpaca

安裝

環境要求

linux操作系統；python2.7; node >= 4.0.0; npm>= 3.0.0

安裝和啓動

1. 確保目標機器環境符合要求

2. 將代碼clone到目標機器，進入代碼文件目錄，可以看到其中有以alpaca命名的管理腳本, 管理腳本提供了build(安裝程序依賴包，打包前端的js，css文件等操作）, start， stop，restart，status等功能，因此，代碼剛clone到本地或者修改以後，需要重新build，然後再start.

git clone [email protected]:echoyuanliang/alpaca.git
cd alpaca 
bash alpaca build
bash alpaca start

相關配置

• 程序使用gunicorn託管（也可以直接使用run.py啓動）,guncorn啓動配置文件路徑爲backend/gun.py.默認配置如下，默認端口爲8080，也是此處配置:

  # -*- coding: utf-8 -*-
  import multiprocessing
  
  bind = "0.0.0.0:8080"
  pidfile = 'var/gunicorn.pid'
  workers = multiprocessing.cpu_count() * 2 + 1
  
  worker_class = 'sync'
  backlog = 2048
  daemon = True
  loglevel = 'info'
  accesslog = 'logs/access.log'
  errorlog = 'logs/error.log'
  access_log_format = "%({X-Real-IP}i)s %(h)s %(l)s %(u)s %(t)s %(r)s %(s)s %(b)s %(f)s %(a)s"    
  

• 應用程序配置文件路徑爲backend/config.py, alpaca使用linux的用戶(root用戶除外)，密碼來管理登陸的用戶，因此需要配置那些用戶具有訪問權限，配置項爲AUTH_USER, 如果不配置或配置爲空數組，則所有用戶均有權限登錄, 同時，alpaca僅對白名單ip授予訪問權限，配置項爲AUTH_IP，如果不配置或配置項爲空數組，則所有ip均有權限登錄。

技術棧

python flask ecmascript6 vue2.0

項目結構

截圖

基本信息頁面

系統信息頁面

網絡信息頁面

進程信息頁面