この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
WordPressの静的ファイルをCDNを使って配信したい時ってありますよね。
WebサーバーのCPUパワーを静的ファイルの配信に使うのはコストパフォーマンスが悪いですし、サイトの表示速度を考えるとCDNを使って外だしするのがベストです。
実現する方法としていくつかのプラグインやCDNサービスが選択肢にあがります。
今回、その1つの方法としてCDN「Amazon CloudFront」をWordpress上で使う設定手順を紹介したいと思います。
翻訳内容や解説は伝わりやすいよう改変していますが、分かり難いところがあればコメントいただけると助かります。
1，今回利用するツール＆サービス
この記事に興味を持った方は、WordPressについてすでに知っている方が多いと思うので割愛します。
- WordPress
- W3 Total Cache
- AWS（Amazon Web Services）
- AWS Identity and Access Management（IAM）
- Amazon S3
- Amazon CloudFront
その他のツールについて、簡単に触れておきます。
1.1，W3 Total Cacheとは？
Easy Web Performance Optimization (WPO) using caching: browser, page, object, database, minify and content delivery network support.
簡単に解説すると、総合的なキャッシュ機能（ブラウザの機能を使ったキャッシュ、ページ単位の静的キャッシュ、オブジェクトキャッシュ、データベースキャッシュ）、CSSやJS,HTMLなどの圧縮、CDNとの連携をトータルで提供する超高機能なプラグインです。
1.2，AWS（Amazon Web Services）とは？
アマゾン ウェブ サービスのインフラとアプリケーションサービスを利用すると、エンタープライズアプリケーションやビッグデータのプロジェクトから、ソーシャルゲームやモバイルアプリに至るまで、ほぼあらゆるものをクラウドで実行できます。
AWS
クラウドコンピューティングの主なメリットの 1 つは、先行投資となるインフラコストを、お客様のビジネス拡大にあわせた低額の変動費に移行できることです。
1.3，AWS Identity and Access Management（IAM）とは？
AWS Identity and Access Management (IAM) により、お客様のユーザーの AWS サービスおよびリソースへのアクセスを安全にコントロールすることができます。IAM を使用すると、AWS のユーザーとグループを作成および管理し、権限を使用して AWS リソースへのアクセスを許可および拒否できます。
AWS Identity and Access Management
1.4，Amazon Simple Storage Service（Amazon S3）とは？
Amazon S3 ならシンプルなウェブサービス・インターフェイスをご提供できます。いつでも、ウェブ上のどこからでも容量に関係なくデータを格納・取得できるのです。これによって、開発者は拡張可能で信頼性が高く、安全で、高速でありながら安価なインフラストラクチャを利用することが可能になります。このシステムは、Amazon が使用しているウェブサイトのグローバルネットワークと同じものです。このサービスの目的は規模のメリットを最大化で開発者に提供することです。
Amazon Simple Storage Service
1.5，Amazon CloudFrontとは？
Amazon CloudFront は、エッジロケーションのグローバルなネットワークを利用して、静的コンテンツやストリーミングコンテンツを含め、ウェブサイト全体を配信できます。コンテンツリクエストは、自動的に最寄りのエッジロケーションにルーティングされるため、可能な限り高パフォーマンスでコンテンツが配信されます。
Amazon CloudFront
2，W3 Total Cacheの機能
この記事ではW3 Total CacheのCDN連携について具体的に解説いたします。
その他の機能も簡単には紹介しておきますが具体的な設定方法は省略します。主な機能は大きく6つに分かれます。
- ページキャッシュ（Page Cache）
- データベースキャッシュ（Database Cache）
- オブジェクトキャッシュ（Object Cache）
- ブラウザーキャッシュ（Browser Cache）
- 圧縮（Minify）
- コンテンツ・デリバリー・ネットワーク（CDN）
これらの機能をもう少し詳しく見ていきましょう。
2.1，ページキャッシュ（Page Cache）
ページキャッシュはPHPで処理された後のHTMLやRSSをキャッシュします。
この機能をオンにすることで大きなパフォーマンス改善が期待できます。
以下が主なキャッシュ対象のページと設定項目です。
- 静的生成されるすべてのページ
- すべてのRSS
- SSLリクエストされたページ
- 検索結果などの動的ページ
- 404エラーページ
- リファラーによる制御
- ログインしているユーザーに対するキャッシュ制御
- ユーザーロールに対するキャッシュ制御
キャッシュのリロード時間は設定とキャッシュパージポリシーの設定により制御できます。
特に理由がない場合はデフォルトの設定で十分でしょう。
また、より細かなアドバンスド設定によりクッキーやUA、ファイル単位のキャッシュ制御ができます。サービスの用途に応じて細かく制御できます。
2.2，データベースキャッシュ（Database Cache）
DBクエリをキャッシュします。
テーマ内で行われている動的処理によってはキャッシュを回避するためにアドバンスドセッティングによる調整が必要です。
オブジェクトキャッシュ（Object Cache）
PHPで処理されるオブジェクトをメモリまたはディスクにキャッシュします。
こちらもテーマ内で行われている動的処理によってはキャッシュを回避するためにアドバンスドセッティングによる調整が必要となります。
2.3，ブラウザーキャッシュ（Browser Cache）
ブラウザ側のキャッシュを有効活用するための機能です。
以下のような機能が用意されています。
- Last-Modified headerの付加
- Expires headerの付加
- Cache control header の付加
- ETag headerの付加
- W3 Total Cache headerの付加
- gzipの利用
これらの指定はHTML&XML,CSS,JS、その他メディア毎に制御することができます。
ただし、Apacheの設定からも制御できるためパフォーマンスを考えると、できればhttpd.conf側で制御することが望ましいです。
2.4，圧縮（Minify）
テーマ側で一々CSSやJSの圧縮せずにWordpressに任せ自動化できます。
主な機能は以下の通りです。
- HTML、XMLのMinify
- 小さなJSをHTMLにインラインで埋め込む
- 小さなCSSをHTMLにインラインで埋め込む
- 改行の削除
- JSのMinifyとCombine、改行・コメントの削除
- CSSのMinifyとCombine、改行・コメントの削除
これらの機能はできればテーマ側で事前にチューニングしておくことがベストです。
コンテンツ・デリバリー・ネットワーク（CDN）
これが本記事で解説する機能です。この機能を使うことで静的ファイルをCDNから配信できるようになります。
主にこれらの機能が用意されています。
- テーマのJSやCSS、画像などの静的ファイルをS3→CloudFront経由で配信
- wp-include内のJSやCSS、画像などの静的ファイルをS3→CloudFront経由で配信
- 画像などのアップロードファイルをS3→CloudFront経由で配信
この機能を使いCloudFront+S3と連携する場合、AWSの"Access key"と "Secret key"が必要になります。
AWSのアカウント登録にはクレジットカードの登録と、従量課金制となるのでご注意ください。
2.5，W3 Total Cacheの注意点
これだけ高機能で自動化できるということは、サーバー側にも大きな負担がかかります。
HTTPサーバーがApacheの場合、メモリが512MBと少ない場合ではおそらく厳しいでしょう。最低1GB以上が好ましいと思います。（利用する機能を制限したり、事前のパフォーマンスチューニングによっては可能な場合もあります）。
また、過去にセキュリティ的な問題があったこともあるので、できるだけ最新版を使い、W3 Total Cacheのセキュリティ関連情報は常にチェックしておきましょう。
3，Amazon CloudFront+S3の利用について
まずはAmazon CloudFrontを使うためにAWS（Amazon Web Services）のアカウントが必要です。
少し古いですが、こちらの記事「Amazon Web Servicesのアカウント作成」を参考にアカウントを作りましょう。
3.1，アクセスキーとシークレットキーの取得
アカウントの作成が完了したら、アクセスキーとシークレットキーを発行しましょう。
まずはAWSにログインし、次のページアカウント・アクティビティ（Account Activity）にアクセスしてください。
アカウント・アクティビティのメニューにあるセキュリティ証明書のページにアクセスします。
管理画面のアップデートに伴い、AWS Identity and Access Management (IAM)によるセキュリティ証明書の管理が推薦されています。
今回はIAMを使ったセキュリティ証明書の発行について解説します。
過去にアカウントを作成し、セキュリティ証明書を発行している場合は過去のものを利用できますが、セキュリティ的にIAMに移行するのが良いでしょう。
3.2，IAM Userの作成
はずは、IAMにアクセスしましょう。
続いてUserページに移動します。
Create New Userをクリックしてユーザーを作りましょう。
ウィンドウが表示されるので作成するアカウント名を入力します。入力が完了したらCreateボタンを押します。
ユーザーの作成が完了しました。
Show User Security Credentialsでアクセスキーとシークレットキーの確認、Download CredentialsでCSVファイルをダウンロードすることができます。ダウンロードしておかないと再発行する羽目になるのでしっかりとダウンロードしておきましょう。
Show User Security Credentialsを押下するとこのように表示されます。
Close Windowで閉じます。これでユーザーの作成は完了です。
3.3，ポリシーの設定
一覧に作成したユーザーが表示されていると思います。
でも、これではユーザーを作成しただけなので権限は与えられていません。このユーザーに対してポリシーを付与しましょう。
アカウントを選択し、Permissionタブを開きます。そこにあるAttach User Policyのボタンを押します。
ボタンを押下するとウィンドウが表示され、以下の2つのSelect Policy Templateを選択します。
- CloudFront Full Access
- Amazon S3 Full Access
特に変更せず、Apply Policyをクリックします。
ポリシーの登録が完了しました。もう一つも同様に追加しましょう、
２つのポリシーが登録されました。これで、AWS側の準備は完了です。
4，W3 Total Cacheの設定
続いて、W3 Total Cacheプラグインの設定を行います。
Wordpress上からでも、FTPやSFTPで接続し、プラグインをインストールしてください。
インストールが完了するとメニューにPerformanceという項目が追加されます。
4.1，アクセスキーとシークレットキーをW3 Total Cacheに登録する
まず、PerformanceのメニューにあるGeneral Settingのページにアクセスし、CDNの項にあるCDN TypeのOrigin Pull「Amazon CloudFront」を選択して有効化します。
GeneralのPreview mode:が有効になっている場合は無効にしてください。
有効化後に、CDNの設定ページに移動します。
少しスクロールして、Generalの下にあるConfigurationにアクセスキー、シークレットキーを入力し、テスト接続を試みます。
ボタンの横に緑でTest Passesと表示されれば無事接続できたことになります。
最後にCreate Distributionボタンを押しましょう。
Distributionの処理が完了するとCloudFrontのHostNameが自動入力されるので、最後に設定の保存ボタンを押して終了です。
これでCDNの設定が完了しました。
4.2，配信テスト
最後にファイルをアップロードしてCDNからの配信を確認してみましょう。
CloudFrontのHostNameになっていれば成功です。
しっかりとCloudFrontから配信されています。
これでアップロードした静的ファイルがCDNを経由して配信することができました。
また、テーマファイルやwp-include、プラグインの中に含まれる静的ファイルをCDNから配信することもできます。
必要に応じてCDNのGeneral Settingを変更しましょう。
4.3，Amazon CloudFrontとS3の利用料金目安
利用料金は「AWS SIMPLE MONTHLY CALCULATOR」を使って目安額を知ることができます。しっかりとパフォーマンスチューニングしているサイトであれば10ドル超えることもそうそうないでしょう（アクセスの規模によります）。
まとめ
この記事では設定方法のみを解説しているのでCDNから配信することでどのような効果があるかは紹介していません。
もし興味があればパフォーマンスチューニングに関する連載「Webサイト高速化テクニックシリーズ」をご覧ください。
28
