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

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 主機，還可以輕鬆支援伺服器，叢集抑或是一個小型的嵌入式系統。

  

• jsvnstat – interactive network traffic analysis

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

  

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

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

  

• 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: 裝置節點對應的服務資訊描述

支援同時監控多臺主機

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

例如，如果要監控 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。