カスタムドメインと SSL 対応の WordPress on Azure

カスタムドメインと SSL 対応の WordPress on Azure

その昔、SQL Server をベースにしたパターンを紹介しましたが、Project Nami のデプロイがうまくいかなくなっていたので新たにカスタムドメインと SSL に対応して Google さんにも気に入られるサイトを作れるようにします。

構成

今回は次の Azure サービスでサイトを構成します。SKU にもよりますが、最下位の SKU で運用すれば月額数百円で運用できると思います。プラグインをいくつか導入すると Free SKU の App Service ではパフォーマンスが心もとないので Shared SKU を選択していますが、それでも月額 1,500 円程度です。

  • Azure App Service
  • BLOB Storage
  • Azure CDN
  • Azure DNS

WordPress を動作させるのは Azure の PaaS コンピューティングである App Service です。基本的にはこれだけでも WordPress を運用することは可能なのですが、個人規模での利用については少々気掛かりな点があるので別のサービスを組み合わせます。

  • 画像などのデータを保存するストレージ
  • SSL に対応したエンドポイント

画像などのデータを保存するストレージ

ブログを投稿していくといつの間にか結構な量の画像を保存していく必要があります。App Service の場合、標準でローカルストレージも利用できるのですが、1 GB や 10 GB など一定量を超えると SKU をスケールアップする必要があります。ストレージ量だけ個別にスケールアップすることができないので、BLOB ストレージに外部保存する構成を取ります。

SSL に対応したエンドポイント

Google 検索などの検索エンジンでは SSL に対応しているサイトでないと検索結果の評価が悪くなります。個人サイトなので気にしないという方はいいのですが、やはり多くの人に見てもらうためには対応していきたいところです。ブラウザによっては HTTP のみだと警告が出ることもあるので気をつけたいです。

こちらも対応するために App Service の SKU を上げる必要が出てくるので、Azure CDN を挟んでユーザーが直接アクセスするエンドポイントを Azure CDN で保持することによって課金を回避します。Azure CDN であればカスタムドメインと SSL にも対応しながら、課金は通信量に応じた料金のみに抑えることができます。

作成手順

  1. ドメインの取得
  2. App Service の展開(Wordpress)
  3. ストレージアカウントの展開
  4. BOLB コンテナの作成
  5. Azure CDN の展開
  6. CDN エンドポイントの作成
  7. カスタムドメイン設定
  8. WordPress のセットアップ
  9. BLOB プラグインセットアップ

1. ドメインの取得

自分のサイトでホストするのであればドメインも持っておきたいです。Azure もしくはその他のドメインレジストラーでドメインを取得します。安く手に入れるならどこでもいいですが、.com や .net といったしっかりしたドメインを低額で保持し続けられるので Azure もおすすめです。お名前ドットコムだと信頼が低いドメインでないと安くなかったり、更新料が上がることがあります。

以降の手順では Azure でドメインを取得し、Azure DNS で管理する方法で進めます。

2. App Service の展開(Wordpress)

WordPress サイトをホストする PaaS を作成します。

Azure ポータルにて、[リソースの作成] から「WordPress 」と検索して [作成] をクリックします。

パラメーターとして次のように入力して [作成] をクリックします。

  • [アプリ名]: App Service の ホスト名 (azurestudyhub)
  • [サブスクリプション]: リソースを展開するサブスクリプションを指定
  • [リソース グループ]: リソースを展開するリソースグループを指定
  • [データベース プロバイダー]: [MySQL in App]
  • [App Service プラン]
    • [App Service プラン]: App Service プランの名前を指定 (azurestudyhub-asp)
    • [場所]: [東日本]
    • [価格プラン]: [F1]
  • [Application Insights]
    • [Application Insights]: [有効にする]
    • [リソースの名前]: Application Insights の名前を指定
    • [場所]: [東日本]

App Service リソースが展開されることを確認します。

3. ストレージアカウントの展開

画像やメディアファイルを外部保存するためのストレージを作成します。

Azure ポータルにて、[リソースの作成] から「ストレージ アカウント」と検索して、[作成] をクリックします。[基本] タブで次のように入力して [次] をクリックします。

  • [サブスクリプション]: リソースを展開するサブスクリプションを指定
  • [リソース グループ]: リソースを展開するリソースグループを指定
  • [ストレージ アカウント名]: ストレージアカウントの名前 (azurestudyhubstorage)
  • [場所]: [東日本]
  • [パフォーマンス]: [Standard]
  • [アカウントの種類]: [StorageV2 (汎用 v2) ]
  • [レプリケーション]: [ローカル冗長ストレージ (LRS)]

[基本] タブで次のように入力して [確認および作成]>[作成] をクリックします。

4. BOLB コンテナの作成

メニューから [コンテナー] をクリックし、上部の [コンテナー] をクリックします。

[新しいコンテナー] にて次のように指定して [作成] をクリックします。

  • [名前]: コンテナーの名前を指定 (wp-contents)
  • [パブリック アクセス レベル]: [BLOB]

5. Azure CDN の展開

ウェブページのトラフィックをキャッシュして App Service への負荷を軽減させるほか、カスタムドメインと SSL 対応を行うために CDN を展開します。

Azure ポータルにて、[リソースの作成] から「CDN」と検索して、[作成] をクリックします。

[基本] タブで次のように入力して [確認と作成]>[作成] をクリックします。

  • [サブスクリプション]: リソースを展開するサブスクリプションを指定
  • [リソース グループ]: リソースを展開するリソースグループを指定
  • [名前]: CDN プロファイルの名前 (azurestudyhub-cdn)
  • [価格レベル]: [Standard Verizon]

6. CDN エンドポイントの作成

作成が完了したら、上部メニューから [エンドポイント] をクリックします。

[エンドポイントの追加] にて、次のように入力して [追加] をクリックします。

  • [名前]: エンドポイントとなる FQDN を指定
  • [配信元の種類]: [Web アプリ]
  • [配信元のホスト名]: 配信元となる App Service を指定 (azurestudyhub.azurewebsite.net)
  • [配信元のパス]: 空欄
  • [配信元のホスト ヘッダー]: 配信元となる App Service を指定 (azurestudyhub.azurewebsite.net)
  • [プロトコル]
    • [HTTP]: 無効
    • [HTTPS]: 有効
  • [最適化の対象]: [一般的な Web 配信]

[キャッシュ規則] から次のように入力して保存しておきます。

  • [グローバル キャッシュ ルール]
    • [キャッシュ動作]: [オーバーライド]
    • [キャッシュの有効期限]: 7日程度
    • [クエリ文字列のキャッシュ動作]: [一意の URL をすべてキャッシュ]
  • [カスタム キャッシュ ルール]
    • 1 番目
      • [一致条件]: [パス]
      • [一致する値]: /wp-admin/*
      • [キャッシュ動作]: [キャッシュのバイパス]
      • 日時: すべて 0
    • 2 番目
      • [一致条件]: [パス]
      • [一致する値]: /wp-login.php
      • [キャッシュ動作]: [キャッシュのバイパス]
      • 日時: すべて 0

同様にストレージアカウント用のエンドポイントも追加しておきます。[配信元の種類][ストレージ] を選択し、作成したストレージアカウントを選択します。

7. カスタムドメイン設定

ドメイン取得時に自動的に作成された DNS ゾーンにレコードを追加していきます。上部の [レコード セット] をクリックし、[レコード セットの追加] で Azure CDN のエンドポイントを指定する CNAME レコードとして追加します。

Azure CND に独自の URL でアクセスできるよう設定するため、再び Azure CDN のエンドポイントにもどり、メニューの [カスタム ドメイン] を開きます。上部の [カスタム ドメイン] をクリックします。

[カスタム ドメインの追加] にて、[カスタム ホスト名] に Azure DNS に登録したレコードを指定します。App Service とストレージアカウントのエンドポイントそれぞれで実施します。

しばらくするとカスタムドメインが追加されるので、追加されたホスト名をクリックします。

[カスタム ドメイン HTTPS][オン] にして [証明書の管理の種類][CDN マネージド] を選び、[保存] をクリックします。

これで App Service に HTTPS でアクセスできるようになりました。

8. WordPress セットアップ

通常通り WordPress をセットアップします。

9. BLOB プラグイン

WordPress にアップロードした画像をストレージアカウントに自動でアップロードするプラグインを導入します。WordPress ダッシュボードから [プラグイン]>[新規追加] をクリックします。

検索バーから「Microsoft Azure Storage for WordPress」を検索し、プラグインをインストールします。インストールが完了したらプラグインを有効にします。

プライグインを有効にしたあと、[設定]>[Microsoft Azure] をクリックします。

設定画面で次のように設定し、[Save Changes] をクリックします。

  • [Storage Account Name]: ストレージアカウントの名前を指定
  • [Storage Account Key]: ストレージアカウントのアクセスキーを指定

ストレージアカウントのアクセスキーはストレージアカウントのメニューから確認できます。

アクセス情報が正しければコンテナーの情報などが取得できるので、残りの項目も設定して保存します。