プラグインAWS for WordPressを使ってWordPressをCloudFrontで配信してみる

「WordpressをCloudFrontで配信したいけど、CloudFront何もわからん。楽して設定したい。」

色々選択肢あると思いますが、プラグイン「AWS for WordPress」を使うと楽かもしれません。

少し事前準備はありますが、このプラグインを使うとほぼ自動でWordpressを配信に必要なCloudFront設定ができます。

やってみた

LightsailでWordpressを用意

検証用にLightsailでWordpressサーバを用意しました。

Accelerating WordPress with CloudFront using the AWS for WordPress Plugin | Networking & Content Delivery

AWS側の設定は上記の手順と同様でできるのですが、Wordpress 6系だとwp-config.phpの場所が異なるので注意が必要です。(上記リンクの手順では、5系)

# WordPress 5(上記手順)
sudo vim ./apps/wordpress/htdocs/wp-config.php
# WordPress 6
sudo vim /bitnami/wordpress/wp-config.php

IAMユーザーの準備

LightsailではIAMロールを付けることができないためIAMユーザーを作成します。

以下のポリシーをインラインポリシーとしてアタッチします。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "acm:DeleteCertificate",
            "Resource": "*",
            "Condition": {
                "StringEquals": {
                    "aws:RequestedRegion": "us-east-1"
                }
            }
        }
    ]
}

また、以下のマネージドポリシーもアタッチします。 (以下のポリシーがないと、プラグインからCloudFrontの設定ができません。)

• AWSForWordPressPluginPolicy

プラグイン AWS for WordPressの設定

AWS for WordPressを有効化します。

上記で作成したIAMユーザーのアクセスキーとシークレットキーを設定します。

その後、「CloudFront」を選択しドメインを設定します。 ドメイン名を入力して「Initiate Setup」を押すと、設定が開始されます。

今回は以下の値を設定しました。

• Origin Domain Name:
  • wp-test.satomasaki.classmethod.info
• CloudFront Alternate Domain Name:
  • www.wp-test.satomasaki.classmethod.info

ここで実行されることは主に3つです。

• ACM 証明書発行、検証
• CloudFront ディストリビューションの作成
• CloudFrontとの関連づけ

ACM 証明書発行、検証

まずは、ACM 証明書が発行されます。

ドメイン名の入力の部分で私は、「Cloudfront Alternate Domain Name(CloudFront AlCloudFront 代替ドメイン名)」に「www.wp-test.satomasaki.classmethod.info」を設定していました。

マネジメントコンソールから確認すると、該当のACM 証明書が作成されています。

この時点では、検証ができていないため以下で表示されるレコードを手動で登録する必要があります。(上記は、検証後スクショしたため発行済みになっています)

ACM 証明書が準備できたら、「Check status of SSL/TLS certificate」を押して次のステップに進みます。

CloudFront ディストリビューションの作成

CloudFront ディストリビューションが作成されます。 このステップには5~10分程度かかります。

作成完了すると以下のようにチェックがつきます。

コンソールからもCloudFrontが作成されたことが分かります。

ビヘイビアには、「wp-admin/」等をキャッシュしないための設定が入っています。

CloudFront用のレコードを登録

最後にCloudFrontをDNSレコードに登録して、「www.wp-test.satomasaki.classmethod.info」でCloudFrontにアクセスできるようにします。

最後に「Activate Site Acceleation」にチェックをつけます。

疎通確認

Google Chrome デベロッパーツールで「x-cache: Hit from cloudfront」になっていることを確認できました。 CloudFrontに疎通できているようです。

おわりに

プラグイン「Wordpress for AWS」を使用することで、簡単にCloudFrontの設定ができます。

しかし、細かい設定には対応していないためカスタマイズしたい場合は、直接CloudFrontの設定を変更する必要があります。 (例えば、特定のパスだけCloudFrontで配信したい・画像だけCloudFront + S3で配信したいといったことはこのプラグインではできません)

Amazon PollyやAlexaと連携した機能もあるようです。 機会があったら試してみたいと思います。

以上、AWS事業本部の佐藤(@chari7311)でした。

参考

• AWS for WordPress プラグインの開始方法 - Amazon CloudFront
• Accelerating WordPress with CloudFront using the AWS for WordPress Plugin | Networking & Content Delivery
• Static content configuration - Best Practices for WordPress on AWS
• AWS for WordPress plugin - Best Practices for WordPress on AWS