Microsoft Azure App Service 上で、コストパフォーマンス最強にWordpressの構築する (その3)

2020/04/23

App Service Azure SQLite Web Apps WordPress

前ポスト:
Microsoft Azure App Service 上で、コストパフォーマンス最強にWordpressの構築する (その2)

Azure Storageの作成・設定

無料のWeb Appsは、ストレージ容量が1GBと心許ないのと、ウェブサイト全体のパフォーマンスを向上させるため、画像は Azure Storage 保存。WordPressプラグインで画像はStorageに保存されるように設定

手順1(Azure Storageアカウントの作成、および、設定)

  1. Azure Storage アカウントを作成。Storage アカウントは、App Service /Web Appsと同一のリージョンを指定。BLOBさえ使えれば、どんなタイプでも構わない。

  2.  blob のコンテナを作成。コンテナ名が画像が格納されるディレクトリ名になるので、imagesなどがオススメ。Public Access Levelはblobに設定(設定しないと公開出来ない)。

CDNエンドポイント作成

Web App / Storage ともにCDN経由でアクセスする

手順1(CDNプロファイルの作成)

  1. Pricing tierは、Standard Microsoftがおすすめ(30Xレスポンスなどもキャッシュしてくれるので)。適当な名前をつけて作成。

  2. 作成済みのWeb Apps / StorageのCDNエンドポイントを作成

  3. CDNの設定|キャッシュ規則 で「クエリ文字列のキャッシュ動作」を「クエリ文字列に対するキャッシュをバイパス」に設定する

カスタムドメイン・証明書の設定

CDNのエンドポイントを作成した、Web Apps / Storageにカスタムドメインを適用し、更に証明書を導入する(Azure CDNの機能)

手順1(CDNエンドポイントにドメインを適用)

  1. DNSにWeb AppとStorage用のカスタムドメインのCNAMEを作成する
    例 example.comがカスタムドメインで、WordPressを blog.example.comに、
    画像のStorageをimg.example.comのカスタムドメインにする場合:
    blog.example.com hogewebapp.azureedge.net
    img.example.com hogestorage.azureedge.net

  2. (Option cdnveriyを使って証明書を適用する場合 )証明書適用するためのCNAME(cdnverify)を作成
    上記の場合の例:
    cdnverify.blog.example.com cdnverify.hogewebapp.azureedge.net
    cdnverify.img.example.com cdnverify.hogestorage.azureedge.net

    手順は、
    https://docs.microsoft.com/ja-jp/azure/cdn/cdn-custom-ssl?tabs=option-1-default-enable-https-with-a-cdn-managed-certificate#custom-domain-is-not-mapped-to-your-cdn-endpoint
    参照

  3. カスタムドメイン適用後、Azure PortalのCDN設定で[カスタム ドメイン HTTPS]を有効にする。上記、Optionを実施していない場合、上記手順に記載されているとおり管理者アカウントにDigicertからメールがおくられ、承認フォームに誘導されるのでそこで承認

証明書がインストールされるのに、数時間かかるので注意


次ポスト: