【覚書】2020版 10分でAzure Web AppsでWord Press環境を構築する。　

WordPress関連の相談が増えたので
Azure Web AppsでWord Press環境を構築してみた。


#以下、作業のメモ


## Azure側での作業

### 1.Azureマーケットプレイス 『 WordPress 』で検索　→　先頭に出てくる『 WordPress 』を選択
<img width="700" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/c2e883a2-5da3-7663-b121-54518035fd81.png">




### 2.作成を選択
<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/05ffdd8c-315c-2791-9a0b-7d6786734528.png">






### 3.必要情報を入力していきます。
データベースプロバイダーはMy SQL in App(データベース組み込み)に切り替えることでランニングコストを抑えられます。

App Serviceプラン/場所については作成するワードプレスの方針により方針が異なるため、次項で説明。
App Serviceプラン/場所をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/56400cd6-32a9-942d-6cf9-536d8e6c7091.png)



### 4.必要情報を入力していきます。

新規作成をクリックします
<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/d12e4a93-69fe-7316-6acf-9f7d6ed17de8.png">

プラン名（わかりやすければ何でもよし）を設定して、価格レベルをクリックします。
<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/e64675cd-4cb6-b07b-378a-957bf7e28459.png">

特にこだわりがなければデフォルトのS1がベターで良いんですがこんなに機能もりもりじゃなくて良いので
開発/テストをクリックします
<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/68799c2c-f746-2f89-cd72-56fc9c31f8a8.png">

ここで選択をせまられるのがF1とB1です。
F1・・・破格の無料プランですが、ストレージが小さすぎるのと独自ドメイン、SSLが使えない点がとても痛いです。Googleさんから嫌われます。
D1・・・F1プランに加え、カスタムドメインが使用できるようになったものです。　微妙。
B1・・・ストレージが10倍になり、独自ドメイン＋SSLの設定が可能になります。　独自ドメイン＋SSLが設定できないと困る方は最低限B1が良いです。　お試しで構築するならF1で良いです。

なので私はB1プランを設定します。
<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/d90f1571-e210-15a2-007d-4054f66efa3f.png">

上記で適用→OKを選択すると元の画面に戻るので、作成をクリック。　これでWordPressの完成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/95bd7f13-681b-1499-0f0a-e9e48645d476.png)


　　
あとはひたすらデプロイの完了を待ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/07cfd4e2-8bae-818d-08f5-cb911df79b5b.png)


### 5.デプロイが完了したら、動作確認を行います。　Azureでの作業は以上です。

デプロイが完了したら、リソースに移動します。
<img width="350" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/f8ccc540-bd65-21a7-3816-f9d939aac7cb.png">


　

URLを選択します
<img width="850" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/01ef5b6a-2a5f-b8c0-93ec-2737ebc23910.png">


　
　
　


## Web側での作業

### 1.Word Pressの初期設定画面が出てくるのでアクセスします

日本語を選択して、続けるを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/14ed1471-586f-7550-a906-e2a9d2211f10.png)




### 2.必要情報を入力して、WordPressをインストールを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/eee3270c-233d-6fea-39e8-337a9c13cb7d.png)




### 3.成功しました！と出ればインストール成功です。　ログインボタンを押してみます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/188af9b8-1dcd-c247-1e34-8d0b0ae7287e.png)





### 4.ログイン画面が出るので、#2で設定したIDとパスワードを入力してログインしてみます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/b0941c30-6a40-6b29-57db-205f6aa59084.png)




### 5.以下のような画面が表示されれば設定完了です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/53214fbc-7cde-6a59-0281-636f58cfe0c4.png)






# 補足（F1プランとB1プランの大きな差）

**F1プランで作成したWebサイト**
SSL非対応なので、保護されていない通信と表示されてしまう。
Googleさんから嫌われるやつ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/5b7f9a4d-6267-1458-0fe9-1ca67fb7dcc8.png)

**B1プランで作成したWebサイト**
しっかり保護されています。　ブログ運用を目的とするのであればカスタムドメインも設定できるB1プラン以上がいいっすね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/3bf08c42-d38c-2eef-eee2-d7c37ce78242.png)



フリープランのWeb appsは消しますが、B1プランのほうはワードプレススキルアップの為に今後も活用していきたいと思います。