Contents
1. 概要
GCP(Google Cloud Platform)上に構築したVM(Virtual Machine)インスタンス上にApache2を導入しHPを立ち上げます。そして、そのHPにR-MSMのセンサデータを表示したダッシュボード画面を貼り付けて表示させます（アイキャッチ画面を作成します）。
図1に、全体の流れを示します。
2. プロジェクトの作成とVMインスタンスの作成
必要であれば、GCP上に新規プロジェクトを作成します。また、VMインスタンスを新規に立ち上げます。
新規プロジェクトとVM因子箪笥の立上げに関しては、応用事例「GCP上にUbuntuを立ち上げる」を参照してください。
ここでは、既存プロジェクトにVMインスタンスを追加します。
追加するVMインスタンスの仕様を表1に示します。
表1 追加するVMインスタンスの仕様
VMインスタンスを追加するために、GCPコンソール画面のVMインスタンスの選択画面を表示します。
VMインスタンスの選択画面が表示されたら、[インスタンスを作成]のボタンをクリックして、新しいインスタンスを作成します。仕様に沿って記入し、[作成]ボタンをクリックします。
3. SSH接続と前準備
3-1. SSH接続
新しいVMインスタンスが作成されました。次に、Apache2のインストールのために、SSH接続を行い端末を開きます。
作成された新しいVMインスタンスの外部IPアドレスは、Apache2のインストール後にアクセスするHPのIPアドレスになりますので覚えておいてください。
では、Apache2導入の前準備のために、SSH接続を行います。SSHをクリックしてSSHの画面を開きます。
（ブラウザの設定でポップアップ画面が禁止されていると、端末画面が開きませんので注意が必要です。その場合、このアドレスのみポップアップ画面を許可してください）
SSH接続が完了すると、次のような端末画面が現れます。
3-2. Apache2インストールの前準備
Apache2の前準備として、1) パッケージのアップデートと2)時刻の設定を行います。
3-2-1. パッケージのアップデート
パッケージのアップデートが可能かを確認するため、以下のコマンドを端末から入力します。
$sudo apt updateアップデートのリストが作成され、アップデートが可能であれば、次のコマンドを入力してパッケージのアップデートを行います。
$sudo apt upgrade –yアップデートは少し時間がかかるかもしれません。
3-2-2.時刻の設定
アップデートが完了したら時刻の設定を行います。
まず、時刻の状況を確認します。
$timedatectl status次に示すように、Local timeがUTCで表示されると思います。日本時間に設定するために、Asia/Tokyoのタイムゾーンを設定します。そして、再度、statusを確認します。するとJSTに変わります。
$sudo timedatectl set-timezone Asia/Tokyo
$timedatectl status
以上で前準備は終了です。
4. Apache2の導入
4-1. Apache2のインストール
apache2を導入（インストール）します。端末のコマンドラインに以下のように入力します。
$sudo apt install apache2 –yすると、インストールが開始されます。完了したら、バージョンを確認します。
$apache2 –v以下のようにバージョンが表示されます。
つぎに、apache2の起動と自動起動設定を行います。
次のコマンドで、apache2を起動します。
$sudo systemctl start apache2そして、次のコマンドで、自動起動設定を行います。
$sudo systemctl enable apache2そして、apache2が起動しているか、statusで確認します。同様に、自動起動設定が行われているか確認します。
$systemctl status apache2
$systemctl is-enabled apache2これら4つのコマンドを実行した際の端末画面は、以下のようになります。
apache2がactiveで起動しており、自動起動設定は、enabledで許可されています。
4-2. インストールの確認
apache2がインストールされたかどうかをVMインスタンスの外部アドレスにアクセスして確認します。
http://(外部IPアドレス)/
にブラウザからアクセスしてみてください。
以下のように、apache2のページが表示されればインストールOKです。
apache2は、/var/www/html/index.htmlを表示します。
5. PHPの導入
apache2の導入の次には、PHPを導入します。
不要な場合はスキップしてください。
5-1. PHPのインストール
以下のコマンドを入力してインストールしてください。
$ sudo apt install php –yインストールがうまくいったか、次のコマンドを入力してバージョンの確認をしてください。
$ php –vバージョンは以下のように表示されます。
5-2. インストールの確認
apache2の時と同じように、PHPのインストールの確認をHPにアクセスして行います。
そのための準備を少し行います。apache2の場合は、VMインスタンスの外部IPアドレスにアクセスすると以下のファイルを表示しました。
/var/www/html/index.html
PHPの場合には、以下のファイルになります。そのためこのファイルを作成します。
/var/www/html/index.php
エディタでindex.phpのファイルを開き、新規に記述を追加して、保存して閉じます。
まず、エディタでファイルを開きます。
sudo nano /var/www/html/index.pppその後、以下の文を追加します。phpinfo();とは、PHPの情報を表示しなさいという意味です。
<?php phpinfo(); ?>
もとのindex.htmlの名前を変更しておきます。
sudo mv /var/www/html/index.html /var/www/html/index.txtそして、VMインスタンスの外部IPアドレスにブラウザからアクセスします。
http://(外部IPアドレス)/
下記の様なPHPの情報が表示されればOKです。
6. HPの立上げ
以上で、クラウド上にHPを立ち上げることができました。
後は、index.phpのファイルがHPのホームの画面の記述になりますから、マークアップ言語であるhtml言語を使って、ホームページを作っていくことになります。
ここでは、例として、ユーザーガイドの「14.クラウド（GCP）との接続」で立ち上げた、環境センサのダッシュボード表示画面をindex.phpを変更することで取り込んで、HPのホーム画面に表示させます。一部、Informationを記載して、お知らせが書かれたホーム画面にしてみたいと思います。
エディタで、/var/www/html/index.phpを開きます。
sudo nano /var/www/html/index.pppそして、PHPのインストールの確認の際に記載した記述を削除し、以下を記載します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="uft-8">
<title>R-MSM Dashboard Demo</title>
</head>
<body>
<h2>R-MSM Dashboard Demo<br></h2>
<h3>Information<br></h3>
<p>2022.3.4 : R-MSM Page Open!!</p>
<p><iframe src="http://XX.XXX.XX.XXX:1880/ui/#!/0?socketid=mO0lMhR8OXKaDFN3JGAH" width="900" height="790" framebo
rder="0"></iframe></p>
<p></p>
</body>
</html>以下の部分が、ダッシュボードを表示した際にブラウザのトップ窓に表示されるIPアドレスをコピーした部分になります。
<p><iframe src="http://XX.XXX.XX.XXX:1880/ui/#!/0?socketid=mO0lMhR8OXKaDFN3JGAH" width="900" height="790" framebo
rder="0"></iframe></p>また、以下の部分がお知らせとして追加した部分です。
<h3>Information<br></h3> <p>2022.3.4 : R-MSM Page Open!!</p>
保存してファイルと閉じます。
最後に、外部IPにブラウザからアクセスします。
下記の様に、ダッシュボードがHPに貼り付けられた形で表示されたらOKです。
元のダッシュボードが更新されると、HPに貼り付けたダッシュボードも更新されます。
