W3-total-CacheでAWSのCloudFrontを使う(WordPress高速化)

いろいろプラグインを入れたがやはりどうもWordPressが遅い.

画像のlazyload等もやったがやはり負荷が高すぎるみたいだ…

なのでAWSのCloudFrontを入れた CDNを構築して対応することとした.

今回の全体の流れとか

W3-Total-CacheプラグインはWordPressのキャッシュ関連による高速化で使われるメジャープラグインの一つ. 他にもWordPress Fast Cacheなどもあるが、今回はこのプレミアムなしでも対応範囲が広いプラグインを使用.

特にそのプラグインのCDNの設定が今回のメイントピック.

全体像

CloudFrontが画像やほとんど変わらないリソースを持っていてくれて、
ユーザに最も近いところからデータを送ってくれます.

通常のWordPressでは自分が持っている画像やリソースを自分から送っていますが、これをW3-Total-CacheプラグインでCloudFrontから送ってもらうように変更します.

この作業が終わった後には、ページを開いたときに出ている画像がCloudFrontの画像をさしている状態になります.

作業全体像

  1. W3-Total-Cacheプラグインをインストール
  2. W3-Total-CacheでCDNを「Amazon CloudFront」に設定
  3. Amazon IAMでCloudFrontの設定を触れるユーザを準備
  4. Amazon IAMで準備できたユーザをW3-Total-Cacheに設定
    1. W3-Total-CacheがCloudFrontの設定してくれます
  5. 開始!

という感じ.

W3-Total-Cacheプラグインの設定とか

W3-Total-Cacheプラグインをインストールすると、「Performance」タブが追加されます.「Performance」> 「General Setting」を開き、そこで、CDNのゾーンがあるので下記設定を行います.

  • CDN を Enabled
  • CDN TypeをAmazon CloudFront
  • 他は特に設定不要(てかできない)

そしたら、次はIAMの設定

IAMでCloudFrontをいじれるユーザを作る

CloudFrontの設定をW3-Total-Cacheに設定してもらえるようにするため、CloudFrontの設定を変更できるユーザを作り、そのユーザ情報をW3-Total-Cacheに設定します.

このユーザはCloudFrontの設定しかできないようにしておきます.(念の為)

IAMでは、
「CloudFrontFullAccess」のポリシーを持ったグループを作成して、
新しく作ったユーザをそのグループに割り付けてください.

IAMのページにてユーザを追加します.
適当なユーザ名を設定して、「プログラムによるアクセス」のチェックをつけて、次に進みます.

ここでCloudFrontFullAcessのポリシーを持ったグループを割り当てます.
もしそのグループがない場合は、「グループの作成」からポリシーを当てて、ユーザに結びつけてください.

ユーザ作成の完了画面で、
Access KeyとSecret Keyが作られます.

どこかにそれらをコピーしてなくさないようにしてください.
CSVファイルも念の為ダウンロードしておきます.

IAMのユーザ情報をW3-Total-Cacheに設定する

ユーザの情報でアクセスキーとシークレットキーを上記の箇所に入力してます. そしたらCreate Distributionを押します.

勝手にW3-Total-Cacheで必要なCloudFrontの設定してくれるので、
あとはそのCloudFrontが立ち上がるのを待ちます.(50分くらい時間がかかる時もあるみたいです)

AWSのCloudFrontの設定を確認していればタイミングがわかるので、
確認しに行きましょう. 状態がInProgressならまだ.

InProgressのままでももうDeployedになっていたとしても上の画像の「Test CloudFront distribution」でいつでもCloudFrontが通るかどうかを確認できます.ダメだった場合は上記のようにエラー文が表示されます.

testがパスしてしまえば、あとは設定を保存して、対応完了です.

確認する

自分のサイトのページを開いて、画像のアドレスをみてみてください.
おそらくドメイン名がCloudFrontのものに差し代わっているかと思います.

About the author

コメントを残す