Azure Web App for Containers を使って WordPress サイトを 1 時間で立てた

Azure Web App for Containers の勉強がてら、[公式チュートリアル](https://docs.microsoft.com/ja-jp/azure/app-service/containers/tutorial-multi-container-app?WT.mc_id=docs-blog-machiy) に従い、WordPress サイトを立ててみました。
データベースは Azure Database for MySQL を使いました。
(そしてその WordPress サイトが無事動作しているのを確認したらすぐに消しました) (課金回避) (リソースの消し方についてはこの記事の最後に説明があります)


# リファレンス

* 公式チュートリアル：[Web App for Containers でマルチコンテナー (プレビュー) アプリを作成する](https://docs.microsoft.com/ja-jp/azure/app-service/containers/tutorial-multi-container-app?WT.mc_id=docs-blog-machiy)
* 公式ドキュメント：[Azure App Service on Linux の概要](https://docs.microsoft.com/ja-jp/azure/app-service/containers/app-service-linux-intro?WT.mc_id=docs-blog-machiy)
* 公式ドキュメント：[Azure App Service プランの概要](https://docs.microsoft.com/ja-jp/azure/app-service/overview-hosting-plans?WT.mc_id=docs-blog-machiy)
* [Azure 無料アカウント作成](https://azure.microsoft.com/ja-jp/free/?WT.mc_id=docs-blog-machiy)
* 学生用の無料アカウント作成：[Azure for Students](https://azure.microsoft.com/ja-jp/free/students/?WT.mc_id=docs-blog-machiy)

# Web App for Containers とは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/f7e34a58-74d3-3ee4-004c-76964d752732.png)

Microsoft Azure の PaaS のひとつで、
一言でいうと、「**Web アプリに最適化された、Docker コンテナの実行基盤**」です。

コンテナイメージを使用して Web アプリをデプロイできるコンテナホスト環境を提供するものです。

Docker Hub 上の公式イメージやカスタムイメージを、
Azure Container Registry (ACR) や Docker Hub 経由で
簡単にデプロイすることができます。

もともと Linux VM で動いているコンテナベースのアプリをターゲットにしたものでしたが、去年 Windows コンテナも対応しました。

## まずは Azure にログイン

[Microsoft Azure のポータルサイト](https://portal.azure.com/) ( [https://portal.azure.com/](https://portal.azure.com/) ) に行きましょう。



## Cloud Shell を開く

ポータル画面右上の、↓のアイコンをクリックして、Cloud Shell を開きます

![イラスト7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/05d66df7-ef7f-54c3-537e-e65f8601e87a.jpeg)


すると、画面下にターミナルが開くので、そこにコマンドを打っていきます。
まずは作業用のディレクトリを切り、そこに移動します

````bash
mkdir quickstart
cd quickstart
````

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/84a9d115-0f26-d86e-1858-8c9e4a3e535b.png)

## Dockerfile などを GitHub から落とす

Microsoft 公式の [Azure Web App for Containers のサンプル git リポジトリ](https://github.com/Azure-Samples/multicontainerwordpress?WT.mc_id=docs-blog-machiy) を clone します。
WordPress をインストールする記述のある [Dockerfile](https://github.com/Azure-Samples/multicontainerwordpress/blob/master/Dockerfile?WT.mc_id=docs-blog-machiy) などが入っています。

````bash
git clone https://github.com/Azure-Samples/multicontainerwordpress

cd multicontainerwordpress
````

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/718ba57c-22be-d6e4-3334-0dc9a08e49b2.png)

## リソース グループを作成する

Azure 用語『[リソース グループ](https://docs.microsoft.com/ja-jp/azure/azure-resource-manager/management/overview#terminology?WT.mc_id=docs-blog-machiy)』とは、
リソース (Azure 上で作ったインスタンス。DB とか VM とか) を
まとめて管理するフォルダみたいなものです。
例えば、リソースグループごと消すことで、リソースの「まとめて削除」などができて便利です


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/6691a1d7-41c0-d6c5-e470-29aba283e6a3.png)

Azure 用のコマンド `az` を使って、
リソースグループを作ってみましょう。

````bash
az group create \
--name wordpress-rg \
--location "Japan East"
````

![イラスト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/7d518282-92e4-53c5-ae64-039cb9aa71c1.png)

`wordpress-rg` という名前で、東日本リージョンに作ってみました。
西日本が良い場合は `Japan West` と書けばよいです。

## 物理サーバのようなもの、App Service Plan について

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/2e5c0b85-469b-f6b4-c4dc-9052bcc689d5.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/c524318f-7e16-b129-0e76-464f24a65e5c.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/38b3b3d7-3345-e403-09fc-82b054d1e3b4.png)

**App Service Plan** は、アプリが動く物理サーバのようなもので、
Web アプリを実行するための一連のコンピューティング リソースを定義します。

例えば、

* RAM は 何 GB のやつ？
* 裏で立つ VM インスタンスの数はどうする？
* VM は他の人との雑居サーバ (他のお客様のアプリを含む他の App Service アプリと同じ Azure VM 上でアプリを実行) でいい？　それとも俺専用 VM にする？
* リージョンはどこに設置する？（東日本？）
* VM に載ってる OS は Windows? Linux?

など。

[公式ドキュメント：Azure App Service プランの概要](https://docs.microsoft.com/ja-jp/azure/app-service/overview-hosting-plans?WT.mc_id=docs-blog-machiy)

お金をかければかけるほど性能の良いサーバーで Web アプリを動かせます。

価格帯は、安い順から

* Free (無料！) - 雑居 VM 上で動く。とはいえ無料は正義
* Shared
* Basic - 俺専用 VM 上で動くようになる
* Standard
* Premium
* PremiumV2
* Isolated - 専用の Azure 仮想ネットワーク上で専用の Azure VM が実行される

ひとつの App Service Plan を立てたら、その上で複数のアプリを動かすことができます。

## App Service Plan の作成

Cloud Shell で [ az appservice plan create ](https://docs.microsoft.com/ja-jp/cli/azure/appservice/plan?view=azure-cli-latest&WT.mc_id=docs-blog-machiy#az-appservice-plan-create) コマンドを使用して、
先ほど作成した `wordpress-rg` リソース グループに App Service Plan を作成します。
今回は `myAppServicePlan` という名前で作っています。

````bash
az appservice plan create \
--name myAppServicePlan \
--resource-group wordpress-rg \
--sku S1 \
--is-linux
````

＊ 今回は Standard 価格帯で作ってみましたが、無料版を作りたい場合は `--sku S1` のところを `--sku FREE` にして叩きます

また、今回は (Windows ではなく) Linux VM を立てるので `--is-linux` を付けています。

![イラスト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/30f6c3b9-86b7-5b09-2ef5-b7f1c6818375.png)

叩くと、以下のようなアウトプットが返ってきます。


````json
{
  "freeOfferExpirationTime": null,
  "geoRegion": "Japan East",
  "hostingEnvironmentProfile": null,
  "hyperV": false,
  "id": "/subscriptions/aaaa/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "isSpot": false,
  "isXenon": false,
  "kind": "linux",
  "location": "Japan East",
  "maximumElasticWorkerCount": 1,
  "maximumNumberOfWorkers": 10,
  "name": "myAppServicePlan",
  "numberOfSites": 0,
  "perSiteScaling": false,
  "provisioningState": "Succeeded",
  "reserved": true,
  "resourceGroup": "wordpress-rg",
  "sku": {
    "capabilities": null,
    "capacity": 1,
    "family": "S",
    "locations": null,
    "name": "S1",
    "size": "S1",
    "skuCapacity": null,
    "tier": "Standard"
  },
  "spotExpirationTime": null,
  "status": "Ready",
  "subscription": "aaaa",
  "tags": null,
  "targetWorkerCount": 0,
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
}
````




# Docker で WordPress アプリを作成する

Cloud Shell で [az webapp create コマンド](https://docs.microsoft.com/ja-jp/cli/azure/webapp?view=azure-cli-latest&WT.mc_id=docs-blog-machiy#az-webapp-create) を使って、
先ほど作った `myAppServicePlan` App Service Plan に
コンテナ上で動く Wordpress の Web アプリを作成します。 

````bash
az webapp create \
   --resource-group wordpress-rg \
   --plan myAppServicePlan \
   --name 自分のアプリの名前 \
   --deployment-container-image-name wordpress:latest
````

この「自分のアプリの名前」のところは、デプロイ後の URL の一部になるので、世界中で一意になるものを入れてください。

http://`自分のアプリの名前`.azurewebsites.net/

という URL になります。

## 確認

さて、これで Web App が立ったので、
早速アクセスしてみましょう！

`http://自分のアプリの名前.azurewebsites.net/` に
Web ブラウザでアクセスしてみましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/24451b40-9812-f9c2-c264-22cf7235a1fc.png)

わーい！ 一見すると WordPress のサイトが立った！
と見えますが、
ここで先に進んでみると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/c6bcdc70-d4b6-98ab-59db-220caae7aafd.png)

「データベースが無いよ」というページになってしまいます😒

ということで、これから データベースを準備していきましょう！😁

## 現在の状態を確認

Azure ポータル画面から、
リソースグループ `wordpress-rg` の中を見てみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/573cd8be-3a50-d414-526c-0068c4a0f42a.png)

リソースグループを選んで、その中の `wordpress-rg` を選択すると、
このリソースグループの中にどんなリソースが作られているかが確認できます。

現在、App Service Plan と、その上で動いている App Service の２つだけですね。

![イラスト3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/5c4e84e8-774e-435f-e327-a6b4ae590473.jpeg)


# データベースに接続

リソース操作は今まで Azure CLI でやってきましたが、
このままちょっと画面ポチポチもやってみましょう。

## MySQL サーバを作成

このリソースグループ `wordpress-rg` の画面の左上、「追加」をクリックし、
`Azure Database for MySQL` で検索します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b6257b26-0587-4fbb-bff9-dfa9635778a4.png)

「作成」を押し、設定をポチポチ入力していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/fc984334-f57f-ba4e-e801-2780c584ef4f.png)
サーバ名ですが、これも、URL の一部になるため、一意のものである必要があります。

`サーバ名.database.windows.net`

というような URL になります。

次に、管理者アカウント設定です。
パスワード、かなり強めのものじゃないとはじかれるので、この出ている制約に沿ったものを設定しましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/9cc269c6-503b-2919-c3cc-e36e7ecdd978.png)

全部記入したら作成します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b5e49de5-f7c5-d14f-47b1-97c4a7828c03.png)

## 現在の状況の確認

リソースグループ `wordpress-rg` の中に何が入っているか確認してみましょう

![イラスト5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/bef01104-ee09-8cbb-66ac-70d51eab1a86.png)

３つになりましたね！ MySQL サーバが増えています。


## サーバーのファイアウォールを構成する

また Azure CLI に戻ります。

[az mysql server firewall-rule create](https://docs.microsoft.com/ja-jp/cli/azure/mysql/server/firewall-rule?view=azure-cli-latest&WT.mc_id=docs-blog-machiy#az-mysql-server-firewall-rule-create) コマンドを使用して、MySQL サーバでクライアント接続を許可するためのファイアウォール規則を作成します。 

開始 IP と終了 IP の両方が 0.0.0.0 に設定されている場合、ファイアウォールは他の Azure リソースに対してのみ開かれます。

````bash
az mysql server firewall-rule create \
--name allAzureIPs \
--server 自分のDBの名前 \
--resource-group wordpress-rg \
--start-ip-address 0.0.0.0 \
--end-ip-address 0.0.0.0
````

これを叩きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/d1dda124-7982-4db1-a5d5-8120bad90042.png)

すると、以下のようなアウトプットが出ます。

````json
{
  "endIpAddress": "0.0.0.0",
  "id": "/subscriptions/aaaa/resourceGroups/wordpress-rg/providers/Microsoft.DBforMySQL/servers/db4wordpress/firewallRules/allAzureIPs",
  "name": "allAzureIPs",
  "resourceGroup": "wordpress-rg",
  "startIpAddress": "0.0.0.0",
  "type": "Microsoft.DBforMySQL/servers/firewallRules"
}
````

## WordPress データベースを作成する

WordPress データベースを作成しましょう！
このコマンドを Cloud Shell に打ち込みます。

````bash
az mysql db create \
--resource-group wordpress-rg \
--server-name 自分の MySQL サーバの名前 \
--name wordpress
````

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/bda680cd-887e-4cb9-6d4a-a5e7ca20a686.png)

以下の情報が表示されます


````json
{
  "charset": "latin1",
  "collation": "latin1_swedish_ci",
  "id": "/subscriptions/aaaa/resourceGroups/wordpress-rg/providers/Microsoft.DBforMySQL/servers/db4wordpress/databases/wordpress",
  "name": "wordpress",
  "resourceGroup": "wordpress-rg",
  "type": "Microsoft.DBforMySQL/servers/databases"
}
````

## WordPress でデータベース変数を構成する

いくつかの環境変数を設定し、

WordPress アプリからこの新しい MySQL サーバーに接続できるようにしましょう

````bash
az webapp config appsettings set \
--resource-group wordpress-rg \
--name "自分のアプリの名前" \
--settings \
WORDPRESS_DB_HOST="自分の MySQL サーバの名前.mysql.database.azure.com" \
WORDPRESS_DB_USER="chomado@自分の MySQL サーバの名前" \
WORDPRESS_DB_PASSWORD="任意のパスワード" \
WORDPRESS_DB_NAME="wordpress" \
MYSQL_SSL_CA="BaltimoreCyberTrustroot.crt.pem"
````

![イラスト6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/0ee4d391-33f5-87f1-60c3-fa2865d0958b.png)

````json
[
  {
    "name": "WORDPRESS_DB_HOST",
    "slotSetting": false,
    "value": "自分の MySQL サーバの名前.mysql.database.azure.com"
  },
  {
    "name": "WORDPRESS_DB_USER",
    "slotSetting": false,
    "value": "admin@自分の MySQL サーバの名前"
  },
  {
    "name": "WORDPRESS_DB_PASSWORD",
    "slotSetting": false,
    "value": "設定したパスワード"
  },
  {
    "name": "WORDPRESS_DB_NAME",
    "slotSetting": false,
    "value": "wordpress"
  },
  {
    "name": "MYSQL_SSL_CA",
    "slotSetting": false,
    "value": "BaltimoreCyberTrustroot.crt.pem"
  }
]
````

## 確認しよう

さて、これで Web App が立ったので、
早速アクセスしてみましょう！

`http://自分のアプリの名前.azurewebsites.net/` に
Web ブラウザでアクセスしてみましょう。
（さっきから開いたままの方は、必ず再読み込みをしてください）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/e202bdcf-f828-0141-c78c-94b9bb9e39d8.png)


ここまでは先ほどと同じですね！

先に進んでみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/75a569e5-f6ac-5f87-b1db-f0bb3e27a465.png)

おお！
さっきは「データベースがありません」って言われてたのに
今はちゃんと動いてる！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/67b93cc4-b031-c544-bc43-c32796e966ad.png)

やったー！動いた！

(そしてその WordPress サイトが無事動作しているのを確認したらすぐに消しました)(課金回避)


## データの永続化

データの永続化については [こちら](https://docs.microsoft.com/ja-jp/azure/app-service/containers/tutorial-multi-container-app?WT.mc_id=docs-blog-machiy#add-persistent-storage) を参照


# 課金されないように、リソースのお掃除

！！これをやったら作った WordPress のサイト消えます！！

今回 WordPress のサイトを作ったのは、ただのお勉強目的で、
動いて満足でしたら、
作ったリソースを全部消しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/4a1badd8-16dd-27b1-d4a9-11fdaacfd1ce.png)

````bash
az group delete --name wordpress-rg
`````