wordpress（EC2）の前にCloudFront（CDN）を導入してサイトを低リソースで爆速表示
この記事を読むのに必要な時間は約 4 分です。
Webサイトの高速化はSEOやユーザビリティだけではなく非常に多岐にわたった効果があります。
このサイトの表示速度は開設からずっと早いとは言えず、いつか改善はしたいと思っていた課題でした。
そこにEC2のサーバリソース不足も露呈してしまったので、高速化と合わせて必要リソースの削減もかねて一連の設定をしました。
その1つがAmazon Cloud Front の導入です。
Amazon Cloud Front
まずこのCloudfrontですが、これはCDN(Content Delivery Network)と言われるシステムのAWS上でのサービスです。
これをEC2インスタンスなどのサーバ（Cloudfrontではオリジンと呼ぶ）から配信するサービスの一部または全部を全世界にあるCloudfrontサーバ（Cloudfrontではエッジサーバと呼ぶ）にキャッシュして、一番ユーザに近いサーバから配信するものです。
そのため、Cloudfrontでリクエストを受け、すべて処理できてしまえばオリジンは何もしなくても配信できますし、処理できない物があってもそれに対応すればよいだけとなりサーバリソースの節約とサイトの高速表示が同時に達成できるといった一石二鳥な効果が期待できます。
さらに、Cloudfrontの料金はEC2インスタンスからのWebへの配信とほぼ同額なので導入しない手はないです。
技術的に解決できるならね・・・
設定でハマる
上記のように有効なCloudfrontですが、設定で大ハマりしました。
どうやってオリジンの前にCloudfrontを置いて、そちらにまずアクセスを向けるか、その方法がなかなか調べても出てこなかったからです。
なので、ここで僕がCloudfrontをオリジンの前に設置した方法をメモしておきます。
プラグイン「W3 Total Cache」で解決！
結論から書くと「W3 Total Cache」で難しい設定なくすべてできました。
AWSコンソールでCloudfrontのディストリビューションを作って、Route53でエイリアスを作って・・・といったこともしなくて良いです。
必要なことはW3 Total CacheにCloudfrontへのアクセス権を与えて、設定をさせるといった流れになります。
でもまあまずはバックアップでも取ってからにしましょうか。
Cloudfrontへのアクセス権取得
アクセス権の取得はAWSのIAMというサービスから行います。
IAMのユーザータブを選択し、ユーザーを追加をクリック
適当なユーザー名を付けます。
また、「プログラムによるアクセス」にチェックをつけて次のステップへ
「既存のポリシーを直接アタッチ」を選択し、ポリシーのフィルターで「cloudflont」を検索すると表示の2つが出ます。
「CloudFrontFullAccess」をチェックして最後のステップまで行きましょう。
このページで表示される「アクセスキーID」と「シークレットアクセスキー」をメモります。
これを取得することで、プラグインからCloudflontの設定が可能になります。
W3 Total Cache
これらの設定が終われば、やっとプラグイン側での設定となります。
このあとAWSコンソールに触るのはほんの少しで、ほぼこのプラグインの設定になります。
まずはW3 Total Cacheをインストールしてください。
インストールして有効化すると「Performance」の項目が作成されますので、「General Setting」の項目からCDNの設定をします。
CDNをEnableにして、CDN TypeはAmazon CloudFrontに設定します。
これで次に進めます。
「CDN」の項目ですべてを設定してしまいます。
先ほど作成した「アクセスキーID」と「シークレットアクセスキー」をまず入力します。
その後、②の接続テストを実施します。
ボタンを押して緑色の接続OKといった
OKならば③を押すだけ！
これでAWS上でCloudfrontディストリビューションの作成が始まります。
この後に④の設定を取りに行って接続完了になります。
Cloudfrontと接続
上記を済ませてすぐにCloudfrontを使うことはできません。
まずはCloudfrontのAWSコンソールに行きましょう。
するとIn Progressとなっている項目が作成されていると思います。
この状態では準備中なのですが、W3 Total Cacheの最後の設定はできます。
「Distribution Setting」をクリックして詳細情報を見ましょう。
始めのページにこのような表示が出ます。
ここで必要となるのは「Domain Name」で.cloudfront.netで終わるURLが作成されています。
これの.cloudfront.net以前のランダムな英数文字列がW3 Total Cacheに入力するべき④のデータです。
④を入力して、ディストリビューションがIn ProgressからDeployedになるのを待ちましょう。
Deployedになったら「Domain Name」をURLの形にしてブラウザからアクセスしてみましょう。
自分のサイトが表示されれば完了です。
ここまで確認ができたらW3 Total Cacheの設定をセーブしてください。
ブラウザのデバックツールなどで確認するとcloudfront経由で送信されてきていることが確認できるかと思います。
これにてcloudfrontをオリジンの前に置く設定が完了です。
