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

1. sudo apt-get install vnstat apache2

下載 vnStatSVG

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

安裝 vnStatSVG

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

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

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

通過 Web 查看流量信息

默認就可以通過浏覽器打開 http://localhost/vnstatsvg/ 查看流量信息了。

添加更多網絡設備節點

可以通過編輯 /var/www/vnstatsvg/sidebar.xml 修改各個設備節點的信息，也可以直接復制一個模板過去：

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

配置大體如下：

1. <?xml version='1.0'encoding='UTF-8'standalone='no'?><sidebarid="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） 的數據，可以添加一份如下配置：

1. <?xml version='1.0'encoding='UTF-8'standalone='no'?>
<sidebarid="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 協議（可以通過配置公鑰免密登錄）。

1. # 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 就可以實現同樣的效果了。

1. <?xml version='1.0'encoding='UTF-8'standalone='no'?>
2. <sidebarid="sidebar">
3. <!--thisconfiguration isforsingle host,the hosts anddump_tool field should be the same-->
4. <iface>
5. <name>eth0</name>
6. <host>localhost</host>
7. <description>Local Host</description>
8. </iface>
9. <iface>
10. <name>tinylab.org-eth0</name>
11. <host>localhost</host>
12. <description>TinyLab.org:eth0</description>
13. </iface>
14. <iface>
15. <name>tinylab.org-eth1</name>
16. <host>localhost</host>
17. <description>TinyLab.org:eth1</description>
18. </iface>
19. </sidebar>

小結

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

關於更多用法，比如說嵌入式系統支持，請參考其項目首頁。

另外，如果要給 Nginx 添加 CGI 支持，可以參考 Add CGI support for Nginx。