クラウドで作るWEB環境（インフラ知識なくてもできる）

##◆初めに

ここ最近はAzureを使った業務に従事することになり。基本的に毎日Azureを触っています。
クラウドではAWS一強ですが｢Azure]もまた使いこなせると便利であるのは間違いないので
自分の備忘録としてかいていこうかなって思っています。

一応以前調べたとき(2017年10月）のシェア率では以下のような感じでした

---
【主要クラウドシェア率（2017年10月）】

|  | AWS | Azure | IBM | Google | その他 |
|:-----------|------------:|:------------:|:------------:|:------------:|:------------:|
| シェア率 | 34％ | 11% | 8% | 5% | 41% |

---

さて、そんなAzureで行う今回の記事は｢サーバレス｣でのWEB環境の構築をやろうかなと思います。
オンプレミスでWEB環境を構築すると、WEBとDBは欠かせないものになりますがそれぞれにサーバを
所有する必要があります。・・・とするとやっぱりハードルが高くなる人もいるかと思います。

今回はそんな人たちのためにサーバを一切立てないでWEBとDBの環境を構築します。
要はインフラ知識がなくてもできます！

---

####◆事前準備
・Azureのアカウント

####◆今回使用するもの
・Azure Web App
・Azure Azure Database for PostgreSQL

####◆達成目的
・サーバを作成することなくWebブラウザ上にDBのテーブルを表示させる。

---


##◆やりかた
１．AzurePortalへログイン
２．[+新規]をクリック
３．フィルター部分に[Web APP + postgreSQL]と入力し[Enter]
４．[Web APP + postgreSQL]を選択しクリック
![01.png](https://qiita-image-store.s3.amazonaws.com/0/150678/93ab0e5e-d4a1-43c9-19ca-4fa9f0020cd0.png)

５．[作成]をクリック
６．以下適宜入力する
※このタイミングでWEBの設定を行っています
※以下表の[入力値]はお使いの環境に適宜変更する必要があります。

|No |項目 | 入力値 | 意味 | 
|:-----------|:------------|:------------|:------------|
|1 | アプリ名 | WS-WEBAPP | 作成する[WEB]の名前 |
|2 | サブスクリプション | ※指定のもの | サブスクリプション |
|3 | リソースグループ | ws-webapp | 作成する場合は[新規作成]既存を使用する場合は[既存のものを使用]にチェック |
|4 | App Service プラン/場所 | 新規作成 | 詳細は以下参照 |

--App Service プラン/場所--
　デフォルトから変更しないでも作成自体はできますがデフォルト作成だと
　WebAPPを作成する場所(リージョン)も自動的に決められてしまいます。
　また重要な課金の項目もデフォルト指定になりますのでここは新規作成を
　選択します
　
　１．[App Service プラン/場所]をクリック
　２．[新規作成]をクリック
　３．[新しい App Service プラン]に項目を設定しOKをクリック
　※以下表の[入力値]はお使いの環境に適宜変更する必要があります。

|No |項目 | 入力値 | 意味 |
|:-----------|:------------|:------------|:------------|
|1 | App Service プラン | web-plan | 作成するプランの名前 |
|2 | 場所 | Japan East | 作成するWEBAPPの場所を選択 |
|3 | 価格レベル | S1 Standard | 設定する価格レベルを指定 |

![02plan.png](https://qiita-image-store.s3.amazonaws.com/0/150678/95e6ffb4-814a-1a84-b04e-70f2b7f624eb.png)



７．[データベース]をクリック
８．以下適宜入力する
※このタイミングでWEBの設定を行っています
※以下表の[入力値]はお使いの環境に適宜変更する必要があります。

|No |項目 | 入力値 | 意味 | 
|:-----------|------------:|------------:|:------------:|
|1 | サーバ名 | wsdbserver | 作成するDBサーバ(クラウド空間に自動作成)の名前 |
|2 | サーバ管理者ログイン名 | hoge | DBユーザ |
|3 | パスワード | ｘｘｘｘｘｘ| 上記ユーザのパスワード |
|4 | バージョン | 9.6 | データベース<br>(postgreSQLのバージョン) |
|5 | 価格レベル | Basic | 価格レベルの設定(※) |
|5 | データベース名 | wsdb | 作成するデータベース名 |
※価格レベルには[Basic],[Standard],[Premium]が選択できるが現時点(2018年1月)では[Premium]は選択できない

９．[データベースサーバ]のOKをクリック

![03db.png](https://qiita-image-store.s3.amazonaws.com/0/150678/ca0bb661-62f7-007d-1628-a7b63fe86321.png)


１０．内容を確認し[Web App + PostgreSQL]の作成をクリック
※この時点でデプロイが始まります
![04.png](https://qiita-image-store.s3.amazonaws.com/0/150678/5d09f7f3-3fe9-f0f8-0d53-3f0086b53bd3.png)



１１．以下画面を確認し作成を確認する

![05.png](https://qiita-image-store.s3.amazonaws.com/0/150678/5ea25910-622c-7511-ebad-cd985bd0960f.png)

##◆起動確認

　作成したWEB環境が実際にできているか確認します

１.　[Azure Portal]より[リソースグループ]をクリック
２． 作成した[リソースグループ]をクリック
--注意--
 今回リソースグループは新規作成を選んでいます。つまり[WEB],[DB]を同時に作成しています。そのためリソースグループの
場所はデフォルトで[アメリカ中央]になっています。もしリソースグループも東日本にしたい場合は事前にリソースグループのみ
先に作成しておくことを推奨します

![06.png](https://qiita-image-store.s3.amazonaws.com/0/150678/423060a0-b172-80fc-d203-913ad43ba94b.png)

３．リソースグループ[WS-WEBAPP]より作成したWEBAPP[WS-WEBAPP]をクリック

![07.png](https://qiita-image-store.s3.amazonaws.com/0/150678/125bc10a-970b-d45d-aeb4-c104b37c8f61.png)


４．「WS-WEBAPP」のURLをクリックし、以下画面が別ウィンドウで出ることを確認

画面１
![08.png](https://qiita-image-store.s3.amazonaws.com/0/150678/abd43893-88e0-89cb-f1a2-de3c2e38d7fe.png)


画面２（実際のURL)
![09.png](https://qiita-image-store.s3.amazonaws.com/0/150678/12a3a680-52c6-e766-fa83-dd305a4945ee.png)


起動確認終了！

##◆いったん切ります。
この後もデータベースの作成とWEBのコードとか作業があるのですが全部書くと長いのでいったん切ります。
とりあえず、ここまでの段階で、WEBサーバとDBサーバの構築知識を使わずにWEB環境とDB環境の構築ができたかと思います。
次回は、作成したWEBのURLにテーブルを表示させるまでを行います。使用するコードはPHPで、ごく初歩的なコードを書くことになります。（コードって言ってもスクリプトかければ誰でもできるようなしょぼいページになるかと思います。)
ではでは・・・

リンク：
[クラウドで作るWEB環境（作成したWEBページにテーブルを表示)](https://qiita.com/yo_dazy/items/4ae6807d63ca0b9397ca)