AWS CloudFrontを使ったWordPressの高速化

CDNというのは聞きなれない方も多いと思いますが、Webコンテンツを最適/効率的に配信するためのネットワークの総称です。なお本記事は難易度が高いものの、パフォーマンスに与える効果は絶大です。つまりSEO対策にもバッチリ効果がある内容になっています。熱量を込めすぎて文章量も多くなってしまいましたが、それだけ効果も高いのでぜひ読んでみてください。

CDNとは？

CDNを使うメリット

主にCDNで我々が利用する機能は二つです。まず画像や動画などのリソースファイルをコンテンツをキャッシュする機能、そして地理的に離れた地域のレイテンシを削減するエッジサーバ機能です。

一つずつ紹介していきます。まずリソースファイルとは画像や動画などのことです。HTML、CSS、JavaScript、画像などが該当します。ブラウザで実際に読者が閲覧することになるコンテンツですね。WordPressではサーバにコンテンツを配置してそれをブラウザに配布しているというわけです。CDNはこれをキャッシュしてくれます。

次にエッジサーバ機能ですが、端末に最も近いサーバを自動で選択して接続する機能です。日本のサーバにアメリカからアクセスしたら遅くなることはなんとなく想像つきますよね。この問題の解決策の一つとして日本と同じ内容のサーバをアメリカにも置いてしまえ！という手法があります。そうすればアメリカからのアクセスはアメリカ内で処理されます。この物理的な距離によるネットワークの遅延をレイテンシと呼んだりしますが、CDNはそのレイテンシを最適化するサービスです。

海外対応しているサイトは特にエッジサーバ機能がおすすめです。この記事を読んでいる方々は自分でサーバを借りていることがほとんどだと思いますが、多くの場合は日本にサーバがあるので、海外から日本のサーバにアクセスすると、レイテンシが高い状態になります。CDNはこの問題を回避してくれます。CDNを利用すれば勝手にリソースファイルを海外に配置してもらえるので、海外のユーザはそのサーバにアクセスしにいくというわけです。

注意: 日本以外にリソースファイルを配置することで個人情報保護法や海外の法律に抵触するケースが考えられます。個人情報を含むリソースファイルの取り扱いには注意しましょう。

CDNを利用するとどうなる？

さてもう少し踏み込んで使われ方を説明しましょう。CDNを設定しない場合、リソースファイルはブラウザ→WordPress（Webサーバ）へのアクセスになります。一方でCDNを導入することでリソースファイルはブラウザ→CloudFrontへのアクセスになります。なんとWordPressへのアクセス自体が発生しなくなります。え、じゃあどこからファイルを持ってきているのかというと、キャッシュが存在しない場合にかぎって、CloundFrontがWordPressのサーバにアクセスをしてリソースファイルを取得しキャッシュする、という挙動になります。すこしややこしくて難しいかもしれませんね。決して自分のサイトへのアクセス数が減るわけではないです。あくまでも取得するリソースファイルを最適化するサービスになります。おかげで、WordPressサーバへのリクエストのアクセスが退避され、サーバーの負荷が軽くなるという負荷分散のメリットもあります。

機密性の高いリソースもキャッシュされてしまうので、その場合はまずWebサイトに機密性の高い画像を公開することを控えてください。非公開でかつ必要であればキャッシュ除外を設定しておきましょう。

さらにレイテンシの箇所で説明したとおり、ほとんどのCDNは信じられないくらい早いです。人によってはそれはもう一つサーバー借りてるだけじゃない？と思われるかもしれません。厳密にいえばたしかにその通りです。しかし、CDNは画像や動画などのリソース特化しており、エッジサーバ機能により別サーバを用意するのに比較して、導入する価値は非常に高いです。他の対策に比べて効果も感じやすいと思います。

AWS CloudFront について

CDNサービスは世の中には数多く存在します。Fastly、Akamaiなど多数のサービスありますが、今回は筆者が利用するAWS CloudFrontについて設定方法を紹介します。AWSはAmazonのクラウドサービスで、誰しも一度は聞いたことのあるほど有名で安心できるブランドです。もちろん他のCDNでも対応が可能です。

前提としてほとんどのCDNは有料サービスですが、 AWS CloudFrontには無料利用枠が多いため、よほどのアクセス量がない限りは問題ありません。アクセス量が多い場合はその量に応じた課金が発生します。大体のコスト感というのはサイトによって大きく異なるので本当に何ともいえないのです。詳しくはAWSのサイトを参考にしてください。

https://aws.amazon.com/jp/cloudfront/pricing/?loc=ft#AWS_Free_Usage_Tier

それでもコストが不安という気持ちは分かります。対策としてはアラートを設定しておくと予定の予算をオーバーしたときにメール通知させるなどして検知できます。例えばCloudFrontにて「1000円消費したときにメールで通知」するなどの設定ができます。詳細な内容はAWSを参考にしてください。

https://docs.aws.amazon.com/ja_jp/cost-management/latest/userguide/budgets-create.html

課金問題については個人のサービスの責任の範疇です。必要に応じてAWS社のサポートを活用してください。

CloudFrontの設定方法

IAMの設定

それでは設定方法に行ってみましょう。AWSアカウントは作成しておいてください。アカウントは作るだけなので割愛です。AWSについては面倒でも２要素認証までしておくことをおすすめします。まずはCloudFrontにアクセスするためのユーザ(権限)を作成しておきましょう。AWS IAMというサービスで作成を行う必要があるので以下のリンクよりアクセスしましょう。IAMには料金は発生しません。

https://us-east-1.console.aws.amazon.com/iamv2/home

IAMのホーム画面より左サイドバーのユーザーをクリックします。

ユーザー名とアクセス種別を入力します。ユーザー名は任意で好きな名前で良いです。ドメイン名などを設定しておくと後々分かりやすいでしょう。またAWS 認証情報タイプを選択ではアクセスキー - プログラムによるアクセスを選択します。

次にユーザの権限画面に遷移し、既存のポリシーをアタッチを選択。検索バーがあるのでcloudfrontと入力し、CloudFront Full Accessという名前のポリシーをチェックします。このユーザーからCloudFrontへのアクセス権限を与えるという意味になります。

既存のポリシーを新規アタッチ > CloudFrontFullAccessを選択

次にタグの入力画面に遷移しますが、何もしなくてOKです。

ユーザーの確認画面。問題なければ作成へ。

そうすると成功画面に遷移します。ここで作成されるアクセスキーIDとシークレットアクセスキーを後で使うので控えておいてください。特にシークレットアクセスはこのタイミングでのみ表示されます。注意しましょう。控え忘れた場合はユーザを作り直す必要があります。

注意: 設定するアクセスキーやシークレットは秘匿情報であなたのパスワードと同じ扱いです。絶対にサイトに公開しないように注意しましょう。

CDNの設定

本当に長くなりましたが、今度こそCDNを構築しましょう。CloudFrontにAWSコンソールからアクセスを行います。

CloudFront (amazon.com)

最初にディストリビューションを作成します。ディストリビューションとはCDNを構築するためのネットワークのようなものです。新規作成するためにはディストリビューションを作成をクリックします。

ディストリビューションの設定ですが、ここで入力する項目は２項目です。こだわりたい方はその他の設定も入力してください。

オリジンドメインはあなたのサイトのドメイン名（自分ならばkaizen-seo.net）、名前は任意です。お好きにどうぞ。ディストリビューションが作成ができたら結果が一覧に表示されます。これでCDNの作成は完了です。

W3 Total Cache による設定

次にW3 Total Cacheで設定を行います。W3 Total Cache をインストールできていない方は、この記事よりどうぞ。まずWordPressの管理画面に移動し、パフォーマンスタブの一般設定をクリックします。

そしてCDNという設定があるため、CDNを有効化にしてCDNタイプをCloudFrontに設定します。

有効化したら設定画面が表示されるので以下のように入力します。AWSのアクセスキーIDとシークレットキーに控えておいたものを入力しましょう。

また設定したディストリビューションのドメイン名はディストリビューションの一覧から確認できます。

https://assets.st-note.com/img/1662533334636-gEZ73IVjLj.png — 設定したディストリビューションのドメイン名はCloudFrontより取得

これで完了です。W3 Total Cacheより接続テストができるので試しましょう。アクセスに成功すれば無事にCDNの設定の完了です。

成功するとボタンの右隣にテスト合格の文字列が出ます。これで設定は完了です！

とにかく重要なので何度もお伝えしますが、AWSアクセスキーとシークレットは秘匿情報です。公開しないようにしましょう

詳しい方向けにコンソールのネットワークタブをクリックし、リクエストにディストリビューションの文字が含まれていればよいです。これまでドメイン名になっていたURLが意味不明な文字列になって怖い！ドメイン名が気持ち悪い！という方はCloudFrontに対して代替ドメインを設定できるので、設定してあげてもよいです。cdn.example.com のように自由に設定できます。このあたりはお好みでどうぞ。

CDNについては以上です。いかがでしょうか。多くのサイトではパフォーマンスの大きな向上が見込めると思います。