Azure Web App で WordPress 環境構築 (できる限りリーズナブルな方法で) ～ 2019年7月版

最近 Azure App Service Web App で WordPress 環境を構築することになりました。幾通りかの方法がありますが、検討過程とそのうちの一つを一例としてご紹介します。

サービス構成と必要な作業、考慮点

サーバー+DB の構成、および WordPress のインストール

今回は、Web サーバーとしてのコントロールのしやすさを考慮しつつ、ひとまずテスト稼働させることを目的としました。

自分で Virtual Machine を作成して全ての環境構築を行う方法もありますが、Azure の強みである Managed Service を利用する場合は、以下のような選択肢になるかと思います。

Web サーバー
- Azure Marketplace の WordPress イメージから作成する
- Azure Web App ＋ DB を用意して、WordPress をインストール
  - OS は Windows または Linux を選択
DB
- MySQL in-app : Azure Web App に付属する検証用ストレージ
- SQLite
- Azure Database for MySQL

OS に Windows を選択した場合の方法を検証したく、ひとまず Azure Web App (Windows) + MySQL in-app に WordPress インストールする方法を取ることにしました。

追加設定

ブログとして暫く運用するために、以下の追加設定を検討、実施します

画像・動画用ストレージとして Azure Blob Storage を利用
MySQL in App の設定を動的に取得
直接 Azure Web App に独自ドメインを設定 : 後日追記
独自ドメイン設定および SSL 対応として Azure CDN を利用 : 後日追記
MySQL in-app から Azure Database for MySQL に移行 *1
- *1) こちらは “リーズナブル” かどうかはケースバイケースですので、後日実際に移行した場合に追記していきます

Azure Web App をベースとした WordPress ブログサイトの作成

Azure Web App の作成

Azure Portal から Azure Web App を作成します。

2019 年 7 月現在、WordPress の最新バージョンは 5.2.x、PHP の推進バージョンは 7.3 なので、OS が Windows/ Linux いずれにしても対応するバージョンに設定します。

Azure Web App の使用言語として PHP を選択すると、デフォルトで OS が Linux に設定されます。OS を Windows にしたい場合は、一旦 .NET などを指定して作成します。

作成後に Azure Web App の設定で PHP 7.x を有効にします。

Azure Web App が作成できたら、設定から MySQL in App を有効にします。

Azure Web App のコンソールを開き、d:\home\data\mysql にアクセスします。このディレクトリに MYSQLCONNSTR__localdb.txt というファイルが生成されているか確認します。(MySQL を有効化してから txt ファイルができるまで暫く時間が掛かりますので、WordPress ソースコードのダウンロードなどの次の作業を一部やっておくと良いですね。)

作成されていたら、cat コマンドで内容を表示すると、このように MySQL にアクセスするための情報が表示されますので、これらをローカルに保存しておきます。

d:\home\data\mysql>cat MYSQLCONNSTR_localdb.txt
Database=localdb;Data Source=127.0.0.1:YOUR_PORT;User Id=azure;Password=YOUR_PWD

一旦ここで Web App のURL (YOUR_APPNAME.azurewebsites.net といったURLになっていると思います) Azure Web App が正常に作成されているのを確認しておきます。

WordPress のインストール

インストールする WordPress のソースをダウンロードしておきます。WordPress ソースコードのアップロードと展開はAzure Web App の標準機能である App Service Editor を使用します。

WordPress を展開したいディレクトリに移動し、zip ファイルのままドラック&ドロップします。zip ファイルを右クリックして Extract All を行い、展開されたら準備完了です。

ブラウザーから Web App の URL/wordpress (※wwwroot に wordpress-x.x.zip をドロップして展開した場合) にアクセスします。ここから通常の WordPress インストールを行います。

MySQL の設定は、先程ローカルに保存しておいた DB 設定を使用してください。

WordPress のインストールが完了し、WordPress の管理ページや WordPress デフォルトテーマのトップページが表示できたら、最低限の作業は終了です。

Azure Web App × WordPress を使ったブログサイトでやっておきたい設定

画像・動画用ストレージとして Azure Blob Storage を利用

ブログに掲載する画像や動画はデフォルトでは Azure Web App 内に保管されるため、Web App の容量を気にせずに利用できるよう、画像&動画用ストレージを Azure Blob Storage に (別に) 設定します。

といっても、そんなに難しい設定は必要なく、Microsoft Azure Storage for WordPress というプラグインがあります。Azure Blob Storage を作成して、画像&動画を格納するコンテナーを作成、WordPress 管理画面からプラグインの設定画面で Storage アカウント名、接続文字列およびコンテナー名を設定するだけです。

MySQL in App の設定を動的に取得

MySQL in App の制限事項として、複数の Web App で MySQL を共有しているために、Web App の停止時間や再起動があった場合、別のポートが割り振られる場合があります。

ポートは常に MYSQLCONNSTR__localdb.txt にアップデートされますので、動的に取得するようにソースコード (WordPress インストールディレクトリ\wp-config.php) を、例えば以下のように編集します。

wp-config.php – 編集前

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
//define( 'DB_NAME', 'localdb' );

/** MySQL database username */
//define( 'DB_USER', 'azure' );

/** MySQL database password */
//define( 'DB_PASSWORD', 'YOUR_PWD' );

/** MySQL hostname */
//define( 'DB_HOST', '127.0.0.1:YOUR_PORT' );

wp-config.php – 編集後

foreach ($_SERVER as $key => $value) {
if (strpos($key, "MYSQLCONNSTR_localdb") !== 0) {
continue;
}

$connectstr_dbhost = preg_replace("/^.*Data Source=(.+?);.*$/", "\\1", $value);
$connectstr_dbname = preg_replace("/^.*Database=(.+?);.*$/", "\\1", $value);
$connectstr_dbusername = preg_replace("/^.*User Id=(.+?);.*$/", "\\1", $value);
$connectstr_dbpassword = preg_replace("/^.*Password=(.+?)$/", "\\1", $value);
}

/** The name of the database for WordPress */
define('DB_NAME', $connectstr_dbname);
/** MySQL database username */
define('DB_USER', $connectstr_dbusername);
/** MySQL database password */
define('DB_PASSWORD', $connectstr_dbpassword);
/** MySQL hostname */
define('DB_HOST', $connectstr_dbhost);

直接 Azure Web App に独自ドメインを設定

ひとまず Azure Web App に独自ドメインを設定する場合は、D1 以上のプランを利用し、CNAME および A Record を構成します。[後日詳細を追記]

独自ドメイン設定および SSL 対応として Azure CDN を利用

Azure Web App で独自ドメインを利用するには D1 以上、SSL に対応するには S1 以上のプランを利用する必要があります。そこで、それらを手軽に&リーズナブルに利用するのに Azure CDN を利用します。[後日詳細を追記]