つれづれブログ

ただ思いのままに書き綴る

IT

WordPress と S3の連携でハマった

投稿日:2018年5月25日 更新日:

WordPress サーバーへのアクセス対策をCDNで

運用しているWordPressサーバーへのアクセスが増えてきたので
そろそろ負荷対策を考えなければ!ということでCDNの導入を検討しました。

AWSが提供しているCloudFrontサービスを使うことに。

 

CloudFrontとは?

AWS の公式ページでは

「高度にプログラム可能かつ安全なコンテンツ配信ネットワーク (CDN)」

 

Amazon CloudFront は低レイテンシーの高速転送によりデータ、ビデオ、アプリケーション、API をビューワーに安全に配信するグローバルコンテンツ配信ネットワーク (CDN) サービスです。

と紹介されています。

他にもCDNサービスとしてCloudFlareLimelightが有名ですね。

いずれのサービスも「高速」「大容量」「安全」「安定」をウリにしていますが、CloudFrontサービスはS3と連携することができるので、既にEC2VPCといったAWSサービスを利用してサーバーを構築している場合、これらのサービスと親和性の高いCloudFrontは有効な選択肢となります。

公式ページでは以下のように紹介されていますね。

Amazon S3、Elastic Load Balancing、Amazon Ec2、およびビューワーの近くでカスタムコードを実行する Lambda@Edge などのサービスとシームレスに連携するソフトウェアという意味でも、CloudFront は AWS に統合されています。

 

CloudFrontを使うことのメリット

今回、CloudFrontをCDNとして利用しようと決めたのは

  • CDNを使用するメリットを享受できる(あたりまえ)
  • AWSの他のサービスとシームレスな連携が可能
  • S3をオリジンとする場合、S3を利用するメリットを享受できる
  • WordPress上のメディアファイルをS3上で管理できるプラグインがある

の4つ理由からでした。

対象のサーバーがAWSサービス上に構築されているのでCloudFrontを使えば、全てをAWS上で完結できるので、他のCDNサービスを使うよりもシンプルに運用できそう!

この時はそう思っていたのですが・・・。

 

設定でハマったポイント

CDNの設定なんて画像とかCSSのファイルを配置して、あとはプラグインの設定するくらいで楽勝でしょ?ってタカをくくっていたのですが、いざやって見ると入り色とハマりました。

  • アテにしていたプラグインが見つからない!
  • 403エラーで画像が見えない!
  • アップロードしたファイルが行方不明になる?
  • 画面レイアウト崩れる!

等々、どれもわかってしまえば大したことではないのですが、いろいろ調査と試行錯誤を繰り返して時間がかかってしまったので、備忘を兼ねてハマったポイントを記録しておきますよ。

 

CloudFrontに配置した画像が403エラーで表示できない

 

CloudFront自体の設定については10 分間のチュートリアルで学ぶで解説されている内容に従って進めるだけで問題なく完了できるはずでしたが、ここでひとつハマってしまいました。

解説ページをちゃんと読んできてばよかったのですが、

e. [Set permissions (権限の設定)] タブで画像をパブリックで読み取れるようにする必要があります。 デフォルトでは、S3 オブジェクトはプライベートに設定されます。[Manage public permissions (パブリックの権限管理)] を [Grant public access to objects(s) (オブジェクトへのパブリックアクセスの許可)] に変更します。

の部分を完全に読み飛ばしていました。。。

この設定をしていなかったせいでCloudFontサーバーにリンクを貼っても403エラーが発生。画像が表示されない状態になってしまい、原因調査の時間をロスするハメに。。。

教訓、オリジンとなるS3バケットは公開設定にすること。

 

Amazon S3 and Cloudfront プラグインが見つからない

WordPressとS3を連携させるためのプラグインの情報を収集してこちらの記事を参考にさせていただきました。

AWS CloudFrontを使ってWordPressのメディアファイルだけS3に配置する

WordPressの画像ファイルをS3に保存する

どちらの記事でも紹介されている「Amazon S3 and Cloudfront」プラグインが稼働実績もあり機能的にも良さげだったのでコレを使うことに。

ところが、いざWordPressの管理画面からインストールしようと紹介されていたプラグイン名で検索してもなぜかヒットしません・・・。

実は、このプラグインは「WP Offload S3 Lite」としてオリジナルからフォークしてメンテナンスされているようです。

なのでプラグイン追加画面から「WP Offload S3 Lite」と検索すれば無事にインストールできますよ。

 

アップロードしたファイルが見えない

画像ファイルがS3にアップロードされていることを確認しようと、S3サービスのウェブコンソールからバケットの中身を確認したのですが・・・

あれれ?ファイルがアップロードされていない?

しかし、WordPressの画面上には対象の画像ファイルは表示されており、CLoudFrontへのリンクURLに直接ブラウズしてみても画像は表示されています。

いったい画像ファイルはどこにいってしまったんだ?

ということで色々情報を調べて見ましたが、確かな情報は得られませんでした。

S3fs経由でバケットにアタッチしているサーバーからは、ファイル情報が参照できたことから、IAMロールでアップロードしたファイルはウェブコンソールから見ることができないのか?とちょっとパニックに。

結局のところ、暫く時間が経つとS3のウェブコンソールにも情報が反映されていたので、「S3のファイル情報はウェブコンソールには即時反映されない」と結論づけました。

W3 total cache プラグインを使うとレイアウトが崩れる

WordPressのレスポンス対策としてキャッシュプラグインを導入してたのですが、コレが原因でページのレイアウトが崩れてしまい大変なことに・・・。

ページの崩れ方を見ているとCSSファイルや画像データなどCDNに格納している内容が抜けてしまっている様子。ダイレクトにCloudFrontのURLへアクセスしても問題なく画像は表示されている・・・。

あれこれ思考錯誤した結果、W3 total cache のプラウザキャッシュは無効にしておかないと、CDN側の情報が読み込まれずレイアウトが崩れてしまうことがわかりました。

W3 total cache プラグインの設定画面からブラウザキャッシュの設定を無効化したところレイアウト崩れはなくなりました。

W3 total cache のブラウザキャッシュの設定を有効にした後、ファイルをCDNに再アップロードする必要がありました。

管理画面のプラグインペインにファイルを再度アップロードするようメッセージが表示されていたので、メッセージに従ってCDNにファイルをアップロードしたところレイアウト崩れの症状を無事に回避。

ブラウザキャッシュの設定は「有効」にしておくのが正解なので、レイアウトが崩れる時は、ファイルの再アップロードを要求されていないかプラグインのメッセージを確認しましょうね。

 

-IT
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

AWS EC2とS3を連携させる

EBS上にある静的ファイルをS3に退避したい AWSでEC2インスタンスを運用している場合に、こんなことで困ったことはありませんか? EBS上に置いているファイルを別のインスタンスでも参照したい EC …