6.ため池監視用Webサイト構築

この節では、前節で準備したサーバを、遠隔操作を行いため池監視用Webサイトの構築を行います。

作業時間：120分

ため池監視用Webサイトの構築
サーバの遠隔操作

ため池監視用Webサイトの構築は、前節で準備したサーバを、遠隔操作を行い構築します。遠隔操作はWindows PowerShellソフトウェアを用い行います。

Windows PowerShellの起動を行います。キーボード「Windows」キーを入力し、スタートメニューを開き、「PowerShell」と入力します。
最も一致する検索結果にWindows PowerShellが表示されますので、「Windows PowerShell」をクリックし起動します。

起動完了後、Windows PowerShellにコピー＆ペーストをする為の設定を行います。ウィンドウ左上のアイコン画像を右クリックし、「プロパティ(P)」メニューをクリックします。

「Ctrl+Shift+C/Vをコピー/貼り付けとして使用する(C)」にチェックを入れ、「OK」ボタンをクリックします。

「ため池監視用IoT機器重要情報」エクセルファイル、Ubuntu 18.04欄の「sshコマンド」をコピーし、Windows PowerShellに「Ctrl+Shift+V」キーを同時に入力し貼り付けし、「エンターキー」を入力します。

※「sshコマンド」コピー時、セルに関数が入っているため、セルを選択状態でコピーすること(中身の関数をコピーしない)

「Are you sure you want to continue connecting (yes/no)?」と表示されますので、「yes」と入力し、「エンターキー」を入力します。

「ubuntu@IPアドレス’s password:」と表示されますので、「ため池監視用IoT機器重要情報」エクセルファイル、UBUNTU 18.04欄のパスワードを入力し、「エンターキー」を入力します。
※パスワード入力時、何も表示されませんが、パスワードは入力されています。

「ubuntu@・・・」と表示され、サーバの遠隔操作が可能な状態となります。

ため池監視用Webサイトの構築

まず、サーバのアップデートを行います。サーバのアップデートコマンドを１行ずつコピーし、Windows PowerShellに「Ctrl+Shift+V」キーを同時に入力し貼り付けし、「エンターキー」を入力しコマンドを実行します。

※コマンド実行時「[sudo] password for ubuntu:」と表示されたら、「ため池監視用IoT機器重要情報」エクセルファイル、UBUNTU 18.04欄のパスワードを入力し、「エンターキー」を入力します。

サーバのアップデートコマンド

sudo apt-get -y update
sudo apt-get -y upgrade

※この節で、コマンド実行時、同様に「[sudo] password for ubuntu:」と表示されたら、「ため池監視用IoT機器重要情報」エクセルファイル、UBUNTU 18.04欄のパスワードを入力します。

次に、ため池監視用Webサイトを構築する為に必要な各ソフトウェアのインストールを行います。
下記コマンドを１行ずつ(画面の解像度により行が折り返し表示される場合があります)コピーし、Windows PowerShellに「Ctrl+Shift+V」キーを同時に入力し貼り付けし、「エンターキー」を入力しコマンドを実行します。

各ソフトウェアのインストール

sudo apt-get install -y vim
sudo apt-get install -y git
sudo apt-get install -y php7.2 php7.2-mysql php7.2-mbstring php7.2-zip php7.2-intl
sudo apt-get install -y python3-dev python3-pip python3-venv
sudo apt-get install -y apache2
sudo apt-get install -y certbot
sudo apt-get install -y mysql-server
sudo apt-get install -y phpmyadmin

phpmyadminソフトウェアインストール時、設定が必要となります。

「Web server to reconfigure automatically:」と表示されたら、「apache2」にチェックが入っていることを確認し、「エンターキー」を入力します。

「configure database for phpmyadmin with dbconfig-common?」と表示されたら、「<Yes>」が選択されていることを確認し、「エンターキー」を入力します。

「MySQL application password for phpmyadmin:」と表示されたら、「ため池監視用IoT機器重要情報」エクセルファイル、UBUNTU 18.04欄のパスワードを入力し、「エンターキー」を入力します。

「Password confirmation:」と表示されたら、同じパスワードを入力し、「エンターキー」を入力します。

各ソフトウェアの説明

ソフトウェア名用途
vimプログラムや設定を編集する為の
テキストエディタ
gitプログラムファイルを設置する為の
ソフトウェア
php7.2webサイト用プログラムを
動作させる為の
ソフトウェア
python3雨量予測や水位予測等の
プログラムを動作させる為の
ソフトウェア
apachewebサイトを動作させる為の
webサーバソフトウェア
certbotSSL証明書を発行するソフトウェア
mysql-server水位データ等の情報を
保存する為の
データベースサーバソフトウェア
phpmyadminWebブラウザで
データベースを管理する為の
ソフトウェア

python3に必要なパッケージのインストールを行います。１行ずつコマンドをコピーし実行します。

sudo pip3 install --upgrade tensorflow==1.6.0
sudo pip3 install --upgrade keras==2.1.5
sudo pip3 install sklearn mysql-connector-python matplotlib pandas xlrd joblib pymysql

次に、ファイアウォールの設定を行います。ファイアウォールとは、不正アクセスやサイバー攻撃等からサーバを守るために必要な設定となります。下記コマンドを１行ずつコピーし、実行します。

sudo ufw allow 22
sudo ufw allow 80
sudo ufw allow 443
sudo ufw enable
sudo ufw reload

※「sudo ufw enable」実行時、「Command may disrupt existing ssh connections.Proceed with operation (y|n)?」と表示されたら、「y」を入力し、「エンターキー」を入力します。

phpの設定を行います。下記コマンドをコピー後、実行し、テキストエディタに切り替えます。

sudo vim /etc/php/7.2/apache2/php.ini

テキストエディタに切り替え後、「i」キーを入力してモードを「– INSERT –」モードへ変更します。

「PageDown」キーや「↓」キーを入力し、669行目までカーソルを移動します。移動後、post_max_size = 8Mの最後のMへ「→」キーを入力し、カーソルを移動後、バックスペースキーで削除し、「200」と入力します。

同様に822行目までカーソルを移動します。移動後、upload_max_filesize = 2Mの最後のMへ「→」キーを入力し、カーソルを移動後、「00」と入力し、「upload_max_filesize = 200M」にします。

入力後「ESC」キーを入力しINSERTモードを終了し、「:wq」を入力後「Enter」キーを入力し、保存します。

※もし誤って入力した場合、「ESC」キーを入力しINSERTモードを終了し、「:q!」を入力後「Enter」キーを入力すると、保存せずに終了します。再度コマンド入力からやり直して下さい。

ため池監視用webサイトを動作させる為のwebサーバソフトウェアの設定を行います。

下記コマンドをコピー後、実行し、テキストエディタに切り替えます。

sudo vim /etc/apache2/apache2.conf

テキストエディタに切り替え後、「i」キーを入力してモードを「– INSERT –」モードへ変更します。その後、「PageDown」キーや「↓」キーを入力しカーソルを最後の行まで移動後、「End」キーを入力し、カーソルを行の後ろに移動します。

「エンターキー」を２回入力し改行後、下記テキストをコピーし、「Ctrl+Shift+V」キーを同時に入力し貼り付けます。

LoadModule userdir_module /usr/lib/apache2/modules/mod_userdir.so
LoadModule alias_module /usr/lib/apache2/modules/mod_alias.so
LoadModule rewrite_module /usr/lib/apache2/modules/mod_rewrite.so
LoadModule php7_module /usr/lib/apache2/modules/libphp7.2.so

貼り付け完了後「ESC」キーを入力しINSERTモードを終了し、「:wq」を入力後「Enter」キーを入力し、保存します。

※もし誤って入力した場合、「ESC」キーを入力しINSERTモードを終了し、「:q!」を入力後「Enter」キーを入力すると、保存せずに終了します。再度コマンド入力からやり直して下さい。

次に、ため池監視用Webサイトを、Google Chrome等のWebブラウザでアクセス可能にする為の設定を行います。

まず、メモ帳アプリを起動します。

メモ帳アプリの起動方法は、「スタート」ボタンをクリックし、「Windows アクセサリ」フォルダをクリック、「メモ帳」をクリックすると起動します。
または、「スタート」ボタンをクリックし、「メモ帳」と入力後、「メモ帳」をクリックすると起動します。

下記テキストを貼り付けます。

Include /etc/phpmyadmin/apache.conf

<VirtualHost *:80>
    ServerName phpmyadmin.domain
    DocumentRoot /usr/share/phpmyadmin
    ErrorLog /var/log/apache2/phpmyadmin.error.log
    CustomLog /var/log/apache2/phpmyadmin.access.log combined
    <Directory "/usr/share/phpmyadmin">
        Options FollowSymLinks Includes
        AllowOverride All
        Order allow,deny 
        Allow from all 
        Require all granted
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerName domain
    DocumentRoot "/var/www/html/tameike/"
    ErrorLog "/var/log/apache2/tameike-error_log"
    CustomLog "/var/log/apache2/tameike-access_log" common
    <Directory /var/www/html/tameike/>
        Options FollowSymLinks Includes
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
</VirtualHost>

「ServerName phpmyadmin.domain」のdomain部分を削除し、ため池監視用IoT機器重要情報」エクセルファイル、さくらのVPS欄ドメイン入力します。

「ServerName domain」のdomain部分を削除し、ため池監視用IoT機器重要情報」エクセルファイル、さくらのVPS欄ドメイン入力します。

下記コマンドをコピー後、実行し、テキストエディタに切り替えます。

sudo vim /etc/apache2/sites-available/tameike.conf

テキストエディタに切り替え後、「i」キーを入力してモードを「– INSERT –」モードへ変更します。その後、メモ帳のテキストをすべてコピーし、「Ctrl+Shift+V」キーを同時に入力し貼り付けます。

貼り付け完了後「ESC」キーを入力しINSERTモードを終了し、「:wq」を入力後「Enter」キーを入力し、保存します。

※もし誤って入力した場合、「ESC」キーを入力しINSERTモードを終了し、「:q!」を入力後「Enter」キーを入力すると、保存せずに終了します。再度コマンド入力からやり直して下さい。

保存完了後、下記コマンドを1行ずつ入力し、設定項目を反映します。

cd /etc/apache2/sites-available
sudo a2ensite tameike
sudo service apache2 reload

ため池監視用Webサイトのプログラムファイルの設置及び設定を行います。

下記コマンドを1行ずつ入力し、実行します。

cd /var/www/html
sudo git clone https://github.com/1933680012w/tameike.git
sudo chown -hR www-data:www-data ./tameike/

以上でプログラムファイルの設置は完了です。

次に、ため池監視用Webサイトのプログラムをデータベースへ接続する設定を行います。下記コマンドをコピー後、実行し、テキストエディタに切り替えます。

sudo vim /var/www/html/tameike/php/fn_connect.php

テキストエディタに切り替え後、「i」キーを入力してモードを「– INSERT –」モードへ変更します。その後、「dbpassword」部分を「↓」キーや「→」キーを入力し移動後、「バックスペースキー」を入力して削除します。

ため池監視システム重要情報エクセルファイルのUBUNTU 18.04 DB欄のパスワードを入力します。

入力完了後「ESC」キーを入力しINSERTモードを終了し、「:wq」を入力後「Enter」キーを入力し、保存します。

※もし誤って入力した場合、「ESC」キーを入力しINSERTモードを終了し、「:q!」を入力後「Enter」キーを入力すると、保存せずに終了します。再度コマンド入力からやり直して下さい。

以上でため池監視用Webサイトのプログラムファイルの設置及び設定は完了です。

次に雨量予測およびAIによる水位予測プログラムファイルの設置及び設定を行います。

下記コマンドを1行ずつ入力し、実行します。

cd /home/ubuntu
sudo git clone https://github.com/1933680012w/tameikepython.git

以上でプログラムファイルの設置は完了です。

次にプログラムをデータベースへ接続する設定を行います。下記コマンドをコピー後、実行し、テキストエディタに切り替えます。

 sudo vim /home/ubuntu/tameikepython/fnSQL.py

テキストエディタに切り替え後、「i」キーを入力してモードを「– INSERT –」モードへ変更します。その後、先ほどと同様に「dbpassword」部分を、「↓」キーや「→」キーを入力し移動後、「バックスペースキー」を入力して削除します。

ため池監視システム重要情報エクセルファイルのUBUNTU 18.04 DB欄のパスワードを入力します。

入力完了後「ESC」キーを入力しINSERTモードを終了し、「:wq」を入力後「Enter」キーを入力し、保存します。

※もし誤って入力した場合、「ESC」キーを入力しINSERTモードを終了し、「:q!」を入力後「Enter」キーを入力すると、保存せずに終了します。再度コマンド入力からやり直して下さい。

以上で雨量予測およびAIによる水位予測プログラムファイルの設置及び設定は完了です。

水位、水温情報や雨量情報を保存するデータベースの設定を行います。

下記コマンドを実行し、データベースの初期設定を行います。

sudo mysql_secure_installation

・「Press y|Y for Yes, any other key for No:」
と表示されたら「n」入力後エンターキー入力。

・「New password:」
と表示されたら、「ため池監視用IoT機器重要情報」エクセルファイル、UBUNTU 18.04欄のパスワードを入力し、「エンターキー」を入力。

・「Re-enter new password:」
と表示されたら同じパスワードを入力し、「エンターキー」を入力。

・「Remove anonymous users? (Press y|Y for Yes, any other key for No) :」
と表示されたら「n」入力後エンターキー入力。

・「Disallow root login remotely? (Press y|Y for Yes, any other key for No) :」
と表示されたら「n」入力後エンターキー入力。

・「Remove test database and access to it? (Press y|Y for Yes, any other key for No) :」
と表示されたら「n」入力後エンターキー入力。

・「Reload privilege tables now? (Press y|Y for Yes, any other key for No) :」
と表示されたら「n」入力後エンターキー入力。

以上でデータベースの初期設定は完了です。

次にデータを格納する上で必要なデータベースの作成や、ユーザの設定を行います。下記コマンドを実行し、データベースにログインします。

sudo mysql -u root

ログイン完了後、データベースの作成を行う為、下記コマンドを実行します。

create database tameike_db; 

データベースに接続するユーザの作成と設定を行います。
メモ帳アプリを開き、下記コマンドをコピーし貼り付けます。

create user 'tameike'@'localhost' identified by 'password'; 
grant all on tameike_db.* to 'tameike'@'localhost'; 

「passowrd」箇所を削除し、ため池監視システム重要情報エクセルファイルのUBUNTU 18.04 DB欄のパスワードを入力します(シングルクォーテーションは残す)。

パスワード入力完了後、メモ帳のコマンドを１行ずつWindows PowerShellで実行します。

下記コマンドを実行し、データベースからログアウトします。

exit

以上で、データベースの設定は完了です。

水位予測プログラムを動作させるために必要な、mysqlの設定を行います。下記コマンドを実行し、テキストエディタに切り替えます。

sudo vim /etc/mysql/my.cnf

テキストエディタに切り替え後、「i」キーを入力してモードを「– INSERT –」モードへ変更します。その後、「PageDown」キーや「↓」キーを入力しカーソルを最後の行まで移動後、「End」キーを入力し、カーソルを行の後ろに移動します。

「エンターキー」を２回入力し改行後、下記テキストをコピーし、「Ctrl+Shift+V」キーを同時に入力し貼り付けます。

[mysqld]
sql_mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION

貼り付け完了後「ESC」キーを入力しINSERTモードを終了し、「:wq」を入力後「Enter」キーを入力し、保存します。

※もし誤って入力した場合、「ESC」キーを入力しINSERTモードを終了し、「:q!」を入力後「Enter」キーを入力すると、保存せずに終了します。再度コマンド入力からやり直して下さい。

保存完了後、下記コマンドを実行し、mysqlソフトウェアを再起動します。

sudo service mysql restart

以上でmysqlの設定は完了です。

データベース管理ソフトウェアphpmyadminは、初期の状態だとエラーが発生する為、プログラムファイルの修正を行います。下記コマンドを実行し、テキストエディタに切り替えます。

sudo vim /usr/share/phpmyadmin/libraries/sql.lib.php

テキストエディタに切り替え後、「i」キーを入力してモードを「– INSERT –」モードへ変更します。その後、「PageDown」キーや「↓」キー、「→」キーを入力しカーソルを613行目16「(」まで移動します。

移動後「(」を入力します。入力完了後、「→」キーを入力しカーソルを613行目60「]」まで移動します。

移動後「)」を入力します。入力完了後「ESC」キーを入力しINSERTモードを終了し、「:wq」を入力後「Enter」キーを入力し、保存します。

下記コマンドを実行し、テキストエディタに切り替えます。

sudo vim /usr/share/phpmyadmin/libraries/plugin_interface.lib.php

テキストエディタに切り替え後、「i」キーを入力してモードを「– INSERT –」モードへ変更します。その後、「PageDown」キーや「↓」キー、「→」キーを入力しカーソルを551行目39「$」まで移動します。

移動後「(array)」を入力します。入力完了後「ESC」キーを入力しINSERTモードを終了し、「:wq」を入力後「Enter」キーを入力し、保存します。

※もし誤って入力した場合、「ESC」キーを入力しINSERTモードを終了し、「:q!」を入力後「Enter」キーを入力すると、保存せずに終了します。再度コマンド入力からやり直して下さい。

以上でphpmyadminのソフトウェアプログラムの修正は完了です。

水位、水温情報や、雨量等のデータを格納するテーブルの作成を行います。

下記「ダウンロード」ボタンをクリックし、テーブル作成プログラムが入っている圧縮ファイルのダウンロードを行います。

tameike_dbダウンロード

ダウンロード完了後、ダウンロードフォルダを開き、ダウンロードした「tameike_db.zip」ファイルを右クリックし、「すべて展開(T)…」メニューをクリックします。

展開先の選択とファイルの展開ウィンドウが表示されますので、「展開(E)」ボタンをクリックします。

展開後フォルダが開きますので、「×」ボタンをクリックし閉じます。

Google ChromeやFirefox、Microsoft Edge等のWebブラウザで、ため池監視システム重要情報エクセルファイルのさくらのVPS欄のphpmyadminのURLをコピー後Webuブラウザに入力し、ページを開きます。
※phpmyadminのセルに関数が入っているため、セルを選択状態でコピーすること(中身の関数をコピーしない)

phpMyAdminへようこそページが開いたら、「ユーザ名」、「パスワード」入力欄に、ため池監視システム重要情報エクセルファイルUBUNTU 18.04 DB欄のIDとパスワードを入力します。

入力完了後「実行」ボタンをクリックします。

phpMyAdmin管理画面が表示されますので、画面左側「tameike_db」メニューをクリックします。

画面上側「インポート」ボタンをクリックします。

データベース “tameike_db” へのインポート画面が表示されますので、File to import:欄のアップロードファイル：「参照」ボタンをクリックします。

先ほど展開したtameike_dbフォルダ内「tameike_db.sql」ファイルを選択し「開く(O)」ボタンをクリックします。

下にスクロールし、「実行」ボタンをクリックします。

「インポートは正常に終了しました。」と表示され、データを格納する為のテーブル作成が完了します。

データベースに機器を設置するため池の情報や、ため池監視Webサイトの設定を反映します。

画面左側「places」テーブルをクリックし、placesテーブル管理画面を開き、「編集」をクリックします。

編集画面が表示されますので、viewName欄「tameikeName」を削除し、機器を設置するため池の名前(蛙股ため池等)を入力します。

lat欄に、ため池監視システム重要情報エクセルファイルの設置するため池の場所欄の緯度情報を入力します。

lon欄に、ため池監視システム重要情報エクセルファイルの設置するため池の場所欄の経度情報を入力します。

入力完了後「実行」ボタンをクリックします。

編集完了後「settings」テーブルをクリックし、settingsテーブル管理画面を開き、「編集」をクリックします。

編集画面が表示されますので、url欄に、ため池監視システム重要情報エクセルファイルのさくらのVPS欄の「ドメイン」を入力します。

yumakeKey欄に、ため池監視システム重要情報エクセルファイルの時系列天気予報APIキー欄の「key」情報を入力します。

token欄に、ため池監視システム重要情報エクセルファイルのUBUNTU 18.04欄の「token」情報を入力します。

入力完了後「実行」ボタンをクリックします。

以上で、データベースに機器を設置するため池の情報や、ため池監視Webサイトの設定は完了です。ブラウザの「×」ボタンをクリックし、ブラウザを閉じます。

最後に雨量予測およびAIによる水位予測プログラムを実行する為の設定を行います。

Windows PowerShellで下記コマンドを入力します。
※コマンド実行時「[sudo] password for ubuntu:」と表示されたら、「ため池監視用IoT機器重要情報」エクセルファイル、UBUNTU 18.04欄のパスワードを入力し、「エンターキー」を入力します。

sudo crontab -e

エディターの選択が表示されますので、「/usr/bin/vim.basic」の番号を確認後(ここでは2番)、番号を入力し、「エンターキー」を入力します。

テキストエディタに切り替わるので、「i」キーを入力してモードを– INSERT –モードへ変更します。
その後、「↓」キーを入力し続け一番下にカーソルを移動後、「→」キーを入力し続け一番右にカーソルを移動します。
移動後、「エンター」キーを入力し改行します。

下記テキストをコピーし、「Ctrl+Shift+V」キーを同時に入力し貼り付けます。

0 */1 * * * /usr/bin/python3 /home/ubuntu/tameikepython/yumakeApi.py
0 */1 * * * /usr/bin/python3 /home/ubuntu/tameikepython/sqlTameikeLearn.py
30 */1 * * * /usr/bin/python3 /home/ubuntu/tameikepython/sqlTameikePrediction.py

貼り付け完了後「ESC」キーを入力しINSERTモードを終了し、「:wq」を入力後「Enter」キーを入力し、保存します。

※もし誤って入力した場合、「ESC」キーを入力しINSERTモードを終了し、「:q!」を入力後「Enter」キーを入力すると、保存せずに終了します。再度コマンド入力からやり直して下さい。

以上で雨量予測およびAIによる水位予測プログラムを実行する為の設定は完了です。

次の節では、作成した機器からため池監視Webサイトへデータを送信するプログラムファイルの設置や、プログラムを実行する為の設定を行います。

次の節：ため池監視用Webサイトへのデータ送信