クラウドで作るWEB環境（作成したWEBページにテーブルを表示）

◆初めに

前回の記事で｢サーバ｣を作成しないでWEB環境の構築を行いました。今回は前回作成したWEBページにカスタマイズを行い前回同時に作成したDBにテーブルを作成しWEBページに表示させます。

　前回は｢インフラに関する知識がなくてもできる｣をターゲットにしていましたが今回はWEBではPHPを使用しDBは｢PostgreSQL｣を使用しますのでスクリプト作成が出来る程度の知識は必要かなと思いますが、前回同様にすべてクラウド上で行います！

---

前回のリンク先　：　
クラウドで作るWEB環境（インフラ知識なくてもできる）

---

◆今回使うもの
・Azure CloudShell
・PHP
・PostgresSQL
・WEBAPP + PostgresSQL

◆事前準備
・Azureアカウントの作成
・WEBAPP + PostgresSQLの環境作成
（※上記リンク先を見てください)
◆所要時間
・30～60分（実際にはもっと短くできます）

---

◆やりかた

【CloudShellを使ってのDB接続】

　[CloudShell]とはAzureのポータル上で使用可能となるShell機能になります。クラウド空間に[clouddrive]を持ち、必要時にアクセスしリソース関連の操作を行うというToolになります。今回は[CloudShell]を使用して前回作成したDBにアクセスし、テーブルの作成を行います。

１．[AzurePortal]へログインする。
２．下記のアイコンをクリックする。

３．ブラウザ上下部に以下の画面が表示されるので[Bash(Linux)]を選択する

４．下図画面において[サブスクリプション]を選択し,[CreateStorage]をクリックする
※この時点でクラウド空間にストレージを作成します。

５．下図画面を資格確認。
※IDに関する箇所は隠しています。

６．[CloudShell]上で以下のコマンドを実行

コマンド例：
$ psql -h [DBサーバ名] -U [DBユーザ] postgres

--[DBサーバ名],[DBユーザ]--
作成したAzureDBから取得します(下図画面赤枠内)

実行例：

xxxxx@Azure:~$ psql -h wsdbserver.postgres.database.azure.com -U hoge@wsdbserver wsdb
Password for user hoge@wsdbserver:
psql (9.5.10, server 9.6.5)
WARNING: psql major version 9.5, server major version 9.6.
         Some psql features might not work.
SSL connection (protocol: TLSv1.2, cipher: ECDHE-RSA-AES256-SHA384, bits: 256, compression: off)
Type "help" for help.

wsdb=>

７．以下のSQLを実行しテーブルを作成

コマンド例：
=> create table [テーブル名] ( [karamu名] [データ型] )
実行例：

=> create table wsdbtable (id int4,lastname char(10),firstname char(10),mf char(10),birthday DATE);
CREATE TABLE

８．以下のSQLを実行し、データを入力

コマンド例：
=> insert into [テーブル名] ( [カラム名],[カラム名]) values ('値','値')
実行例：

wsdb=> insert into wsdbtable ( id,lastname,firstname,mf,birthday ) values ( '0001','oda','nobunaga','male','1979/01/01' );
INSERT 0 1
wsdb=> insert into wsdbtable ( id,lastname,firstname,mf,birthday ) values ( '0002','toyotomi','hideyoshi','male','1979/02/02' );
INSERT 0 1
wsdb=> insert into wsdbtable ( id,lastname,firstname,mf,birthday ) values ( '0003','tokugawa','ieyasu','male','1979/03/03' );
INSERT 0 1
wsdb=> insert into wsdbtable ( id,lastname,firstname,mf,birthday ) values ( '0004','ono','komachi','female','1980/01/01' );
INSERT 0 1
wsdb=> insert into wsdbtable ( id,lastname,firstname,mf,birthday ) values ( '0004','kureo','patora','female','1980/02/02' );
INSERT 0 1
wsdb=> insert into wsdbtable ( id,lastname,firstname,mf,birthday ) values ( '0004','you','kihi','female','1980/03/03' );
INSERT 0 1
wsdb=>

９．以下のSQLを実行し、作成したテーブルを確認

コマンド例：
=> select * from [テーブル名];
実行例：

wsdb=> select * from wsdbtable;
 id |  lastname  | firstname  |     mf     |  birthday
----+------------+------------+------------+------------
  1 | oda        | nobunaga   | male       | 1979-01-01
  2 | toyotomi   | hideyoshi  | male       | 1979-02-02
  3 | tokugawa   | ieyasu     | male       | 1979-03-03
  4 | ono        | komachi    | female     | 1980-01-01
  4 | kureo      | patora     | female     | 1980-02-02
  4 | you        | kihi       | female     | 1980-03-03
(6 rows)

wsdb=>

１０．[CloudShell]を[×]ボタンで閉じる

以上でDBテーブルの作成は終わりです。次は作成したテーブルをWEBで表示させるコードを[WEBApp]に書きます。

【WEBAppコンテンツ表示】

　現段階で作成した[Web App]：[WS-WEBAPP]は初期ページが表示されているだけです。こちらをコードを記載することで自分で
作成したページを表示させます。コードを記載するときにデータベースのクエリーを実行させることでweb上にテーブルの結果が表示されるようにします。

１．[リソースグループ]：[WS-WEBAPP]から[App Service]：[WS-WEBAPP]を選択する

２．[App Service]：[WS-WEBAPP]から[App Service Editor(プレビュー)]をクリックする

３．下図画面から[移動]をクリック

４．下図画面の[WWWROOT]の[New File]をクリックする。

５．下図画面のコメント部分に[index.php]と入力し[Enter]を押す。

６．以下枠内にコードを入力し[Save]をクリックする。

(入力画面)

Code.rb

<?php

header('Content-Type: text/html; charset=UTF-8');
echo "WEB+DB(PostgreSQL)Paas Only!!";
echo nl2br("\n");

try {
/////////パラメータ記載///////////////////////////////////////////////////////////
        $host = "wsdbserver.postgres.database.azure.com";
        $dbname = "wsdb";
        $user = "hoge@wsdbserver";
        $pass = "        ";
/////////DB接続///////////////////////////////////////////////////////////
        $dbh = new PDO("pgsql:host={$host}; dbname={$dbname}", $user, $pass);
        echo nl2br("\n");
        echo "ステータス：接続成功";
        echo nl2br("\n");
        print "<hr>";
/////////クエリー表示///////////////////////////////////////////////////////////
        $SQL = 'select * from wsdbtable';
        $res = $dbh->query($SQL);
        while ( $result = $res->fetch(PDO::FETCH_ASSOC)){
              print $result['id'].",";
              print $result['lastname'];
              print $result['firstname'];
              print $result['mf'];
              print $result['birthday'].'<br>';
        }
/////////エラーパターン///////////////////////////////////////////////////////////
} catch(PDOException $e) {
        echo "ステータス：接続失敗";
        echo nl2br("\n");
        var_dump($e->getMessage());
}

?>

７．[WEB APP]のURLを実行する。もしくは下図画面の[Run]をクリックする

８．以下のページが表示されていることを確認し作業終了！

---

◆さいごに

　今回はとにかくに簡単にweb環境の構築を目指してやってみました。その為無駄なサーバを構築しないで目的に合ったコードを投入するだけでお手軽にwebページの作成が出来るかと思います。今回使用したWEBもDBもAzure環境からならどこでも接続できてカスタマイズするのにもサーバを必要としないところにメリットがあります。DBのレコードを追加したければ[CloudShell]から接続できますし、WEBを編集したければこれもまたAzurePortal上から作成が可能です。またアラート機能などもありますので従来の構築よりも簡単にできるかと思います！