[技術ブログvol.30] EC2サーバのトラフィックをレスポンシブに見る方法

[技術ブログvol.23] AWS EC2サーバのトラフィックを簡単に確認する方法で、サーバのトラフィックをvnstatで確認する方法を紹介しました。
今回は、グラフを「今どきな感じのレスポンシブ」にしてみたいと思います。

注意

vnstatの導入は完了しているものとします。
vnstatの導入については、[技術ブログvol.23] AWS EC2サーバのトラフィックを簡単に確認する方法を参照して下さいね。

vnstat-phpの導入

結論からいうと、今回はvnstat-phpというアプリをインストールするだけです。
[技術ブログvol.23] AWS EC2サーバのトラフィックを簡単に確認する方法で自作したHTMLをレスポンシブなものに改修してもいいですが、いい感じのグラフにしてくれるvnstat-phpを使うことにします。

サーバの準備

サーバはAWS上で「Centos6 with hvm (ami-13614b12)」を使います。
インスタンスタイプは、t2.microにしています。

サーバ環境の準備

vnstat-phpは、GitHubで公開されていますが、サーバ要件(Requirement)の記載がありません。
色々と試した結果、以下が必要になることが分かったので、予めインストールしておきます。

# yum -y install gcc gcc-c++ git
# yum -y install php-pear php-devel httpd-devel libicu libicu-devel
# pecl install intl

PHPはPHP 5.3.3がインストールされます。

intl拡張モジュールのインストールが完了すると、下記のメッセージが出ますので、php.iniにextension=intl.soの1文を追加しておきましょう。

configuration option "php_ini" is not set to php.ini location
You should add "extension=intl.so" to php.ini

ついでに「date.timezone = "Asia/Tokyo"」も追記しておきます。

GitHubからの導入

それでは、vnstat-phpをgitでインストールしていきます。
Apacheの設定はデフォルトのままなので、ドキュメントルートである/var/www/htmlにダウンロードします。

cd /var/www/html/
git clone https://github.com/DASPRiD/vnstat-php.git

コードの修正

要件の記載が無かったので、最初は気が付きませんでしたが、vnstat-phpはPHP5.4以降を想定して書かれています。
しかし、CentOS6のデフォルトのPHPバージョンは「5.3.3」です。

その為、vnstat-php内で使われている配列の処理がこのままでは動きません。
そこで、vnstat-phpの配列の処理の箇所を「PHP5.3」の記載方法のものに修正します。

修正が必要なファイルは2つあります。

vnstat-php/index.php
vnstat-php/Vnstat/Database.php

パッチの適用

ファイルを開いて該当箇所を修正してもいいですが、今回はパッチを作成しましたので、パッチの適用で修正を行います。

パッチファイルの作成

下記の内容にてパッチファイルを作成します。

vi vnstat-php53.patch

diff -u -r vnstat-php/index.php vnstat-php53/index.php
--- vnstat-php/index.php        2015-04-30 02:46:55.177345113 +0000
+++ vnstat-php53/index.php      2015-04-30 02:13:48.317353677 +0000
@@ -5,7 +5,7 @@

 function formatBytes($bytes)
 {
-    $units = ['B', 'KiB', 'MiB', 'GiB', 'TiB'];
+    $units = array('B', 'KiB', 'MiB', 'GiB', 'TiB');
     $pow   = floor(($bytes ? log($bytes) : 0) / log(1024));
     $pow   = min($pow, count($units) - 1);
     $bytes /= (1 << (10 * $pow));
@@ -15,7 +15,7 @@

 function formatBitrate($bytes, $seconds)
 {
-    $units = ['bit', 'kbit', 'mbit', 'gbit', 'tbit'];
+    $units = array('bit', 'kbit', 'mbit', 'gbit', 'tbit');
     $bits  = ($bytes * 8) / $seconds;
     $pow   = floor(($bits ? log($bits) : 0) / log(1024));
     $pow   = min($pow, count($units) - 1);
@@ -121,22 +121,22 @@

                 $hours = $database->getHours();

-                $receivedData = [
+                $receivedData = array(
                     'className' => '.received',
-                    'data'      => [],
-                ];
+                    'data'      => array(),
+                );

-                $sentData = [
+                $sentData = array(
                     'className' => '.sent',
-                    'data'      => [],
-                ];
+                    'data'      => array(),
+                );

                 $maxBytes = 0;

                 for ($i = $startHour; $i < 24; $i++) {
                     $hour = $hours[$i];
-                    $receivedData['data'][] = ['x' => $i, 'y' => $hour->getBytesReceived()];
-                    $sentData['data'][] = ['x' => $i, 'y' => $hour->getBytesSent()];
+                    $receivedData['data'][] = array('x' => $i, 'y' => $hour->getBytesReceived());
+                    $sentData['data'][] = array('x' => $i, 'y' => $hour->getBytesSent());

                     $maxBytes = max($maxBytes, $hour->getBytesReceived(), $hour->getBytesSent());
                 }
@@ -144,8 +144,8 @@
                 if ($endHour !== 23) {
                     for ($i = 0; $i <= $endHour; $i++) {
                         $hour = $hours[$i];
-                        $receivedData['data'][] = ['x' => $i, 'y' => $hour->getBytesReceived()];
-                        $sentData['data'][] = ['x' => $i, 'y' => $hour->getBytesSent()];
+                        $receivedData['data'][] = array('x' => $i, 'y' => $hour->getBytesReceived());
+                        $sentData['data'][] = array('x' => $i, 'y' => $hour->getBytesSent());

                         $maxBytes = max($maxBytes, $hour->getBytesReceived(), $hour->getBytesSent());
                     }
diff -u -r vnstat-php/Vnstat/Database.php vnstat-php53/Vnstat/Database.php
--- vnstat-php/Vnstat/Database.php      2015-04-30 02:46:55.172345190 +0000
+++ vnstat-php53/Vnstat/Database.php    2015-04-30 02:16:39.937346146 +0000
@@ -53,22 +53,22 @@
     /**
      * @var Entry[]
      */
-    protected $days = [];
+    protected $days = array();

     /**
      * @var Entry[]
      */
-    protected $months = [];
+    protected $months = array();

     /**
      * @var Entry[]
      */
-    protected $top10 = [];
+    protected $top10 = array();

     /**
      * @var Entry[]
      */
-    protected $hours = [];
+    protected $hours = array();

     public function __construct()
     {

パッチ適用

上記のパッチを適用します。

patch -p1 -d vnstat-php < vnstat-php53.patch

これで、vnstat-phpディレクトリ内の該当ファイルにパッチが適用されました。

動作確認

ブラウザから確認して下のようなグラフが表示されていれば完了です。

http://<your server>/vnstat/

備考

PHPのバージョンによる違い
5.3と5.4以降の配列の記載の違いについては、下記などを参考にしてもらえればと思います。
http://php.net/manual/ja/language.types.array.php

他に遭遇したこと

vnstat-phpを初めて使ったのは、随分前になるのですが、その時は、時間別のHourlyのグラフだけ表示されませんでした。
その時は、d3.min.jsを最新のものに更新すると表示することが出来ました。(vnstat-php/xcharts/d3.min.js)

もし同じような状況になった場合は、上記を試してみるとうまく表示できるかもしれません。

D3.js

d3.min.jsの最新ファイルは下記からゲットしました。
https://github.com/mbostock/d3

これで、スマホからいつでもトラフィックを確認できるようになりました！
えっ、見たくない！？

admin

注意