vnstat × Apacheでサーバーの転送量を公開する

今回は転送量を簡単に公開する方法をまとめます。
(半分筆者の備忘録なのでもっと最適なやり方があるかもしれません。)


1.Apacheの導入

(Nginxでも問題ないと思います。(設定が多少変わってきます))

sudo apt update
sudo apt install apache2

2.vnstat, vnstatiの導入

sudo apt install vnstati

3.画像出力の自動化

crontabを使います。

crontab -e


Select an editor. To change later, run 'select-editor’.

  1. /bin/nano <—- easiest
  2. /usr/bin/vim.basic
  3. /usr/bin/vim.tiny
  4. /bin/ed

Choose 1-4 [1]:

使用するエディターを聞かれます。
今回は2を使います。

色々出てきますが一番下まで行き(2を選択した場合は)iで入力可能なモードに変更して

* * * * * vnstati -5 -o /var/www/traffic/5min.png
* * * * * vnstati -h -o /var/www/traffic/1hour.png
* * * * * vnstati -d -o /var/www/traffic/1day.png
* * * * * vnstati -m -o /var/www/traffic/1month.png

を追加します。
trafficの部分は好きなものに変更しても大丈夫です。
(公開に利用するサーバーにてこれ以外にApacheを利用する事が無いのであればhtmlにしておくと楽です。)

上から、5分、1時間、1日、1月間隔のグラフが出力されます。不要だと思うものがあればその行の文を削除してください。(*からgまで)

参考

エディター選択で2を選んでいればEsc→:wq→Enterで保存ができます。


4.Apacheの設定

・mkdir /var/www/traffic
traffic以外に設定した場合は同じものを入力してください。"html"に設定した場合はこの操作は不要です。

・vi /var/www/traffic/index.html
こちらもtrafficの部分は自身が設定したものと同じものを入力してください。

・5分

<script>
    function reloadimg1(){ 
            five.src = "5min.png?r=" + Math.random(); 
        }
	function setreload5min(timer){
		setTimeout('reloadimg1()',timer);
    }
</script>
<img name="five" src="5min.png" onload="setreload5min(1000)" onerror="setreload5min(500)" />

・1時間

<script>
    function reloadimg2(){
            hour.src = "1hour.png?r=" + Math.random();
        }
		    function setreload1hour(timer){
		        setTimeout('reloadimg2()',timer); 
    }
</script>
<img name="hour" src="1hour.png" onload="setreload1hour(1000)" onerror="setreload1hour(500)" />

・1日

<script>
    function reloadimg3(){
            day.src = "1day.png?r=" + Math.random();
        }
	    function setreload1day(timer){ 
        setTimeout('reloadimg3()',timer); 
    }
</script>
<img name="day" src="1day.png" onload="setreload1day(1000)" onerror="setreload1day(500)" />

・1か月

<script>
    function reloadimg4(){
            month.src = "1month.png?r=" + Math.random();
        }
	function setreload1month(timer){
        setTimeout('reloadimg4()',timer);
    }
</script>
<img name="month" src="1month.png" onload="setreload1month(1000)" onerror="setreload1month(500)" />

完了すればEsc→:wq→Enterで保存できます。
(これらをそのまま入力するとこのような表示になります。)

参考

筆者はこのように設定しています。参考にどうぞ


<html>
<!--nobanner-->
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>タイトル</title>
<h2></h2>
<h3>--Traffic Data--</h3>
<p>- 5min -</p>
<script>
    function reloadimg1(){ 
            five.src = "5min.png?r=" + Math.random(); 
        }
	function setreload5min(timer){
		setTimeout('reloadimg1()',timer);
    }
</script>
<img name="five" src="5min.png" onload="setreload5min(1000)" onerror="setreload5min(500)" />

<p>- 1hour -</p>
<script>
    function reloadimg2(){
            hour.src = "1hour.png?r=" + Math.random();
        }
		    function setreload1hour(timer){
		        setTimeout('reloadimg2()',timer); 
    }
</script>
<img name="hour" src="1hour.png" onload="setreload1hour(1000)" onerror="setreload1hour(500)" />

<p>- day -</p>
<script>
    function reloadimg3(){
            day.src = "1day.png?r=" + Math.random();
        }
	    function setreload1day(timer){ 
        setTimeout('reloadimg3()',timer); 
    }
</script>
<img name="day" src="1day.png" onload="setreload1day(1000)" onerror="setreload1day(500)" />

<p>- month -</p>
<script>
    function reloadimg4(){
            month.src = "1month.png?r=" + Math.random();
        }
	function setreload1month(timer){
        setTimeout('reloadimg4()',timer);
    }
</script>
<img name="month" src="1month.png" onload="setreload1month(1000)" onerror="setreload1month(500)" />

タイトル、 <h2>〇</h2> (〇の部分)は自由に何か入力してください。


5.Virtualhostの設定

trafficの部分をhtmlにした方は不要です。お疲れ様でした!

vi /etc/apache2/sites-available/virtual.host.conf

※virtual.host.conf※

<VirtualHost *:80>
ServerName *使用するホスト名 (〇.〇.net等)*
DocumentRoot /var/www/traffic

trafficの部分は自身が設定したものを入力してください。
完了すればEsc→:wq→Enterで保存できます。

a2ensite virtual.host
systemctl reload apache2

これで転送量を公開することが出来ます!
お疲れ様でした!