WP Offload MediaプラグインでWordPressサイトをS3バケットにオフロードするベストプラクティス設定

こんにちは、SCSKの木澤です。
今年3月に公開しましたCloudFrontに関する記事は多数のアクセスをいただき、ありがとうございます。

Amazon CloudFrontとキャッシュ制御の基礎
CDNおよびAmazon CloudFrontの概要と、Webサイトにおけるキャッシュ制御の考え方、CloudFrontの設定方法まで解説をします。 Webサイトにおける基本的なCloudFront適用の考え方を一通り網羅しているかと思います。

本記事の冒頭でで軽く触れている、WordPressサイトにおいてS3バケットにメディアファイルをオフロードする構成・設定について、より深く掘り下げて解説したいと思います。

概要

現在では1ページへのWebアクセスで多数のファイルを取得しています。前回の記事で解説したように、極力(動作に影響しない範囲で)コンテンツをユーザのブラウザやCDNにキャッシュさせ、サーバ側から配信しないようにするのがサーバ負荷軽減と高速化のセオリーとなります。

またコンテンツ配信元(サーバ)としてAWSを利用する場合は、Amazon S3を活用することができます。

  • Amazon S3に静的なコンテンツを配信するWebサーバ機能を持たせる
  • CloudFrontと組み合わせてS3のコンテンツをCloudFrontから配信する

構成を採用することで、以下のAmazon S3のメリットを享受することができます。

  • 容量無制限でスケールの心配がいらないこと
  • 高耐久であること
  • 廉価であること

動画・画像ファイルやダウンロードコンテンツの配信元としてAmazon S3を利用するようにすれば、Webサーバへのアクセスを減らし動的コンテンツの生成に注力させることができるというメリットが享受できるというわけです。
この構成、CMSとしてWordPressを用いたWebサイトでは、WP Offload Mediaプラグインを用いて実現することができます。

WP Offload Media Lite for Amazon S3, DigitalOcean Spaces, and Google Cloud Storage
Copies files to Amazon S3, DigitalOcean Spaces or Google Cloud Storage as they are uploaded to the Media Library. Optionally configure Amazon CloudFro …

このプラグインでは、

  • メディアライブラリにアップロードされたコンテンツをAmazon S3のバケットにコピー
  • 当該コンテンツを配信する際に、Amazon S3から配信されるURLに自動的に変換

以上の処理を行い実現していると思われます。
なお有償版と無償版(Lite)がありますが、主な機能の違いは 既にアップロードされているコンテンツをAmazon S3へ移行するかどうか、になります。新規サイトや、既存コンテンツを対象としないのであればLiteでも問題なさそうです。

設定方法

さてここから、CloudFrontの裏にS3バケットを置く構成での 設定方法について解説します。
なお、本設定に関してはベストプラクティスに則っていない記事も散見されます。今回は私の理解をもとに推奨設定を解説します。

WP Offload Mediaプラグインでは、CloudFront等のCDNをフロントには置かない構成(S3バケットを直接公開し、WordPressサーバと並列に設置する構成)も採ることができます。

S3バケットの作成

まず、コンテンツ格納用のS3バケットを作成します。

その際、バケット設定のブロックパブリックアクセスは有効にして問題ありません

ブロックパブリックアクセス設定を無効化することが推奨されているという記載も散見されますが、これはS3を直接公開する場合やCloudFront以外のCDNと組み合わせる場合に行う必要があります。CloudFrontと組み合わせる場合は、後述するOAC設定に基づく権限を基にS3バケットにアクセスできるため、パブリックアクセスの設定は不要となります。

詳細はこちらのページに記載されています。(英文)

また、オブジェクトの暗号化設定も有効化して問題ありません。通常は Amazon S3マネージドキー暗号化(SSE-S3)で問題ないものと思います。暗号化方式の違いは、本ブログでの根岸さんの記事も参考にしてください。

Amazon S3バケットの暗号化 (SSE-S3とSSE-KMSとSSE-Cの比較)
Amazon Simple Storage service (Amazon S3) はAWSのサービスの中でも比較的よく利用されるサービスかと思います。データを保管するという点で暗号化は気になるところになりますが、S3バケットに保管するオブジェクト(データ)の暗号化方法にはいくつか種類があり、違いが分かりにくいところもあるので今回まとめてみました。

CloudFrontにS3 Originを追加(OAC設定)

続いてCloudFrontのオリジン設定にて、S3バケットとの接続設定を追加します。

なおS3バケットへのアクセス方法については2022年8月より、従来からあった オリジンアクセスアイデンティティ(OAI)に替わり、オリジンアクセスコントロール (OAC)の利用が推奨されています
OAI/OACともS3 オリジンへのアクセスを CloudFront のみに限定し保護することができる機能となりますが、OACではSSE-KMSにて暗号化されたオブジェクトへのアクセスやAWS Signature Version 4(SigV4)を必要とする AWS リージョンへの対応等がされています。

本件の詳細はAWS公式ブログにも解説されていますので参考にして下さい。

Amazon CloudFront オリジンアクセスコントロール(OAC)のご紹介 | Amazon Web Services
本記事は、「Amazon CloudFront introduces Origin Access Contro

OAC設定は非常に簡単です。
CloudFrontのオリジン設定のS3バケットアクセスのセクションにてOACを選択後「コントロール設定を作成」ボタンを押します。

ダイアログにて、コントロール設定の名前等を指定できますが、通常はデフォルトで問題ありません。

作成後、ポリシーをコピーし、S3バケットアクセス許可に移動します。

S3バケット設定(アクセス許可)に移動しますので、バケットポリシー設定の編集をクリックします。

コピーしたバケットポリシーをペーストし、反映します。
以下のような内容になるはずです。

最後に、遷移前の画面でCloudFrontオリジン設定の保存を忘れずに

IAM設定(ポリシー・ロール・ユーザー)の追加

ここまでで、CloudFrontの後ろにS3を設置してコンテンツ配信する仕組みができました。
続いてWP Offload MediaプラグインがS3バケットにメディアファイルを書き込むためのIAM設定を作成します。

こちらのページに記載があるのですが、

We strongly recommend using the AmazonS3FullAccess policy

AmazonS3FullAccessポリシーはちょっと強すぎる権限だなぁ、と思いますよね。
その際は(同じページに記載がありますが)以下のポリシーが動作にあたり必要な最低権限となります。

対象のバケットも制限しており、安心感はだいぶ違うかと思います。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "ObjectLevel",
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:GetObject",
        "s3:DeleteObject"
      ],
      "Resource": "arn:aws:s3:::(mybucketname)/*"
    },
    {
      "Sid": "BucketLevel",
      "Effect": "Allow",
      "Action": [
        "s3:GetBucketPublicAccessBlock",
        "s3:ListBucket",
        "s3:GetBucketLocation"
      ],
      "Resource": "arn:aws:s3:::(mybucketname)"
    }
  ]
}
(mybucketname)の箇所に作成したバケット名を入力してください。

なお、作成したポリシーの割り当て方法は2通りあります

1. IAMユーザーを作成し、wp-config.phpに設定を埋め込む

こちらはWordPressのサーバがAWS外にある場合にも利用可能です。

作成したポリシーを適用したIAMユーザーを作成し、アクセスキー/シークレットアクセスキーを取得します。
そして以下のような形式でwp-config.phpに埋め込みます。

/** WP Offload Media Lite AWS Access Key **/
define( 'AS3CF_SETTINGS', serialize( array(
    'provider' => 'aws',
    'access-key-id' => 'XXXXXXXXXXXXXXXX',
    'secret-access-key' => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
) ) );
2. IAMロールを作成し、EC2インスタンスに割り当てる

WordPressサーバをEC2インスタンスとして起動している場合に利用できます。
作成したポリシーを適用したIAMロールを作成するか、既存で割り当てられているIAMロールに作成したポリシーを追加します。

wp-config.phpに埋め込む必要が無くなるため、こちらの方がよりセキュアな設定となります。

WP Offload Mediaプラグインのインストール・設定

WP Offload Media(Lite)のプラグインをインストールし有効化します。

こちらのページにも(今まで説明した点を含め)説明がありますが、以下解説します。

1. ストレージプロバイダの設定

初回設定時にストレージプロバイダとアクセスキーの設定情報を聞かれますので、Amazon S3とアクセスキーの設定場所(wp-config.php あるいは EC2 IAMロール)を選びます。

2. バケット名の設定

バケットの所属するリージョンとバケット名の設定をします。
なお「Browse existing buckets」のメニューがありますが、上述のポリシーを設定した場合はバケット一覧の取得権限を付与していないため利用できません。手入力しましょう。

3. ストレージ設定

設定画面に推移しますので、各種設定を行います。上半分はS3への保存に関する設定です。

S3バケットをブロックパブリックアクセス設定有効で作成したため、警告が表示されていますが問題ありません。
記載の通り、CloudFrontを配信方法として指定した場合は本警告は無視できます。

その他設定項目は下記の通りです。

  • Copy Files to Bucket
    ONにして、メディアファイルがアップロードされた際に自動的にS3バケットにコピーするようにします。
  • Path
    S3バケット内でメディアファイルが保存されるルートパスとなります。サイト構成に合わせて設定します。
  • Year/Month
    アップロードされた年月に合わせてディレクトリを自動生成します。
    WordPressメディアライブラリに合わせて有効化することが良いと思います。
  • Object Versioning
    有効化するとオブジェクトのバージョニングのため、日時を示す数字7桁のディレクトリが追加されます。
    当方ではバージョニングは不要のため無効化しました。
4. 配信方法の設定

下半分は配信方法の設定です。
まず「DELIVERY」項目にてProviderとしてCloudFrontを指定します。

詳細設定では以下のように設定します。

  • Rewrite Media URLs
    S3にコピーされたメディアファイルから配信するよう、メディアファイルのURLを書き換えます。
    有効にします。
  • Custom Domain(CNAME)
    CloudFrontで設定しているサイトのFQDNを指定します。
    (デフォルトはS3バケットのFQDNとなります)
  • Force HTTPS
    HTTPS利用を強制できます。
    当方では有効化せずともデフォルトでHTTPSが利用できているため、有効化していません。
  • Remove Files From Server
    本設定を有効化すると、S3バケットにコピーした後にサーバ上のメディアファイルが削除されます。
    サーバ上のディスク容量削減に繋がりますが、他のプラグインの動作に支障が発生する可能性があるため、設定・動作確認は慎重にした方が良いと思われます。

ここまでで設定は完了です。
メディアファイルをアップロード後、詳細を確認することでS3に保存されたかどうか確認できます。

なお参考まで、CloudFrontと組み合わせた設定についての公式の解説URLも添付しておきます。

まとめ

CloudFrontのS3オリジン設定にてオリジンアクセスコントロール (OAC)の利用が推奨になったことをきっかけに、一通りの設定を見直して記事化いたしました。

このサイトにおいても、本設定を有効化してWordPressサーバの負荷軽減、高速化など各種メリットを享受できています。
このあたり、日本語の解説ページは多くないと思いますので、ご参考にして頂ければ幸いです。

著者について
木澤 朋隆

SCSKにてクラウドのアーキテクトやプロモーション、社内の開発者支援を担当しています。
資格:AWS認定11冠・情報処理安全確保支援士・テクニカルスペシャリスト(NW)等
2021-2022 AWS Partner Ambassador / APN AWS Top Engineer / APN ALL AWS Certifications Engineer

木澤 朋隆をフォローする
クラウドに強いによるエンジニアブログです。
SCSKは専門性と豊富な実績を活かしたクラウドサービス USiZE(ユーサイズ)を提供しています。
USiZEサービスサイトでは、お客様のDX推進をワンストップで支援するサービスの詳細や導入事例を紹介しています。
AWS
TechHarmony
タイトルとURLをコピーしました