vnStatSVG: 流量監控軟體 vnStat 最佳 Web 前端

Wu Zhangjin 發表於 2022-11-28
前端

vnStat 簡介

vnStat 是一款輕量級的網路流量監控工具,目前各大 Linux/BSD 系統都已內建支援。

vnStat 本身只支援命令列的互動方式,而 Web 前端則由第三方工具支援。這裡彙總並對比下 vnStat 的幾種 Web 前端併為大家推薦最佳的一款。

vnStat Web 前端對比

vnStat 首頁推薦的四個前端有:

  • vnStat SVG frontend: 基於 CGI / SVG / AJAX 的輕量級 web 前端

    僅僅需要一個支援 CGI 的 HTTP 伺服器,可以產生非常漂亮的基於 SVG 的圖形報告。支援按月/日/時/秒等檢視流量資訊,還支援 top10 展示。

    因為不需要安裝額外的 PHP 解析器,所以輕鬆支援 Apache, Nginx 以及 Busybox 內建的 httpd 伺服器。

    更重要的是,vnStatSVG 不僅支援普通的 Linux 主機,還可以輕鬆支援伺服器,叢集抑或是一個小型的嵌入式系統。

    vnStatSVG Demo

  • jsvnstat – interactive network traffic analysis

    jsvnstat 是另外一款 Web 前端,基於 Javascript 可以實現簡單的互動,不過它依賴 PHP 支援,而且不支援叢集和嵌入式系統。

    JSvnStat Demo

  • vnStat PHP frontend: 一款基於 PHP 的 Web 前端

    嚴重依賴 PHP 和 GD image libraries。同樣不支援叢集和嵌入式系統。

    vnStatPHP Demo

  • VnstatSystrayIcon (Windows): 基於 Windows 平臺

vnStatSVG 表現最佳

綜合上述比較,不難發現 vnStatSVG 是一款最佳的 vnStat 前端。

關於它的更多特性,可以從其官方主頁找到:

  • 基於 CGI / SVG / AJAX 動態地生成流量的圖形報告(Top10/每月/每天/每時/每秒/彙總)
  • 支援 Apache, Nginx 以及 Busybox httpd,甚至其他更輕量級的 Web 伺服器
  • 僅需 CGI 支援,無須 PHP 和其他額外模組,所以佔用空間非常小
  • 因為只需從伺服器傳輸 XML 格式的流量資料,所以消耗的頻寬非常小
  • 可同時監控單臺主機的任意多個網路裝置介面,例如 eth0, eth1…
  • 可在一個視窗中同時監控某個叢集的任意多臺主機
  • 左側的裝置節點資訊可展開,也可收縮,即使同時監控幾十臺主機都方便檢視
  • 支援叢集間的多種通訊協議:http, ftp, file and even ssh
  • 支援多種瀏覽器客戶端:Chromium, Firefox 以及 Safari
  • 可靈活透過多種不同方式獲取 XML 格式的流量資料

總之,vnStatSVG 不僅支援普通的 Linux 主機,伺服器,叢集,而且支援基於 Busybox 這樣的小型嵌入式系統。

vnStatSVG 快速上手

vnStatSVG 首頁詳細介紹了其用法,不過用的是英文,我們們用中文簡單介紹一下如何在 Ubuntu 主機上快速安裝和使用它。

安裝 vnStat 和 Apache

sudo apt-get install vnstat apache2

下載 vnStatSVG

git clonehttps://gitlab.com/tinylab/vnstatsvg.git

安裝 vnStatSVG

假設 Apache 的根目錄放在 /var/www/,可以在 /var/www/ 建立一個 vnstatsvg 目錄,然後把 Web 前端安裝到下面。

sudo-scd vnstatsvg.gitmkdir/var/www/vnstatsvg./configure-dvnstatsvgmake&&make install

如果根目錄不在 /var/www/,請用 ./configure w 指定。

透過 Web 檢視流量資訊

預設就可以透過瀏覽器開啟 http://localhost/vnstatsvg/ 檢視流量資訊了。

新增更多網路裝置節點

可以透過編輯 /var/www/vnstatsvg/sidebar.xml 修改各個裝置節點的資訊,也可以直接複製一個模板過去:

sudo cp src/admin/sidebar.xml-template-4-singlehost/var/www/vnstatsvg/sidebar.xml

配置大體如下:

<?xml version='1.0'encoding='UTF-8'standalone='no'?><sidebar id="sidebar">
<!--thisconfiguration isforsingle host,the hosts anddump_tool field should be the same-->
<iface>
<name>eth0</name>
<host>localhost</host>
<description>Local Host</description>
</iface>
</sidebar>

更多模板請檢視 src/admin/sidebar.xml-template*

之後,編輯 sidebar.xml 配置各類網路裝置節點的資訊:

  • name: 網路裝置節點名,預設為 eth0, eth1 …
  • host: 主機地址或者域名
  • protocol: XML 格式的流量資料獲取協議,預設為 http
  • dump_tool: 預設為 shell 方式,即 /cgi-bin/vnstat.sh
  • description: 裝置節點對應的服務資訊描述

支援同時監控多臺主機

如果要同時監控多個主機,最簡單的方式莫過於在其他機器上用同樣方式安裝一份 vnstatvnStatSVG,這樣就只需要配置 namehostdescription,其他保持預設。

例如,如果要監控 localhost 和 泰曉科技(域名為 tinylab.org) 的資料,可以新增一份如下配置:

<?xml version='1.0'encoding='UTF-8'standalone='no'?>
<sidebar id="sidebar">
<!--thisconfiguration isforsingle host,the hosts anddump_tool field should be the same-->
<iface>
<name>eth0</name>
<host>localhost</host>
<description>Local Host</description></iface><iface>
<name>eth1</name>
<host>tinylab.org</host>
<description>TinyLab.org</description>
</iface>
</sidebar>

如果不想在其他機器上安裝一份額外的 vnStatSVG,那麼可以只安裝 vnstat,但是需要有一種方式從其他主機上把資料複製到本地,例如,複製到本地的 vnstat 資料目錄下 /var/lib/vnstat

例如,可以用 ssh 協議(可以透過配置公鑰免密登入)。

# collect-data.sh
hosts="tinylab.org"
ifaces="eth0 eth1"
while:;do
for h in hosts
do
for i in $ifaces
do
scp ${h}:/var/lib/vnstat/${i} /var/lib/vnstat/${h}-${i}
scp ${h}:/proc/net/dev > /var/lib/vnstat/${h}-${i}-second
done
done
sleep 5
done

可以在後臺一直執行該指令碼或者啟動另外一個 cron 任務來執行該指令碼。這樣就可以用 file 虛擬協議,如下的 sidebar.xml 就可以實現同樣的效果了。

<?xml version='1.0'encoding='UTF-8'standalone='no'?>
<sidebar id="sidebar">
<!--thisconfiguration isforsingle host,the hosts anddump_tool field should be the same-->
<iface>
    <name>eth0</name>
    <host>localhost</host>
    <description>Local Host</description>
</iface>
<iface>
    <name>tinylab.org-eth0</name>
    <host>localhost</host>
    <description>TinyLab.org:eth0</description>
</iface>
<iface>
    <name>tinylab.org-eth1</name>
    <host>localhost</host>
    <description>TinyLab.org:eth1</description>
</iface>
</sidebar>

小結

vnStatSVG 的確是一款非常小巧但是功能強大的 vnStat web 前端,非常推薦!

關於更多用法,比如說嵌入式系統支援,請參考其專案首頁

另外,如果要給 Nginx 新增 CGI 支援,可以參考 Add CGI support for Nginx