このブログで使用しているCSSや画像ファイルの配信には、AWS (Amazon Web Services) S3を使用しています。
ウェブサイトの表示スピードを評価してくれるPageSpeedGTmetrixでテストしてみると、イマイチな結果に。汗
とりあえず現状で出来る事を検討した結果、PageSpeedやGTmetrixでお勧めされたCDN(Contents Delivery Network)を導入することに。
AWSには、 S3と相性の良いCDNのCloudFrontがあります。

Diagram for S3 and CloudFront of AWS.

CloudFrontの良い点を、以下に挙げてみました。
  • CloudFrontはCDNなので、複数のキャッシュサーバーから高速なコンテンツ配信が可能。
  • gzip圧縮の設定が簡単にできる。
  • インターネットへのデータ送信料金が、S3 + CloudFrontでも、S3単独とほとんど同じ。
    ※初年度のAWSの無料枠で比べると、S3のデータ送信は15GBまで、CloudFrontでは50GBまで無料。
    初年度だけで考えると、圧倒的にCloudFrontの方がお得です。
また、これまで気にしていませんでしたが、S3のHTTPヘッダーの設定で、Cache-ControlやExpiresを指定できました。
これらを設定するとブラウザのキャッシュコントロールが可能で、PageSpeedやGTmetrixでの点数アップ。

以下が、AWS S3とRoute53を使って独自ドメインでコンテンツ配信をしている場合の、CloudFrontの導入方法です。

1.
AWSマネジメントコンソールのCloudFrontで、「Create Distribution」で新しいDistributionを作製。
delivery methodでwebを選択した後、初期設定から変更するのは、以下の8つです。
  • Original Domain Name → プルダウンでS3のバケットを選択
  • Restrict Bucket Access → Yes
    ※S3からファイルを直接ダウンロードさせずに、必ずCloudFrontを経由させます。
  • Origin Access Identity → Create a New Identity
    ※S3とCloudFrontを結び付けるIDを発行します。
  • Grant Read Permissions on Bucket → Yes, Update Bucket Policy
    ※S3のバケットポリシーに、CloudFrontのOrigin Access Identity IDからのみGETを許可するポリシーが加わります。
  • Default Root Object → S3に置いているインデックスファイル(index.html)を指定。
  • Compress Objects Automatically → Yes
    ※リクエストヘッダーに Accept-Encoding: gzipがあった場合に、自動的にgzip圧縮したファイルを配信します。
  • Alternate Domain Names (CNAMEs) → 使用する独自ドメインを指定。
    ※Route53でAレコードのAlias targetを指定するプルダウン一覧に追加されます。
  • Enable IPv6 → チェックを外す。
    ※IPv6を使用したい場合には、チェックのままでok。
2.
DistributionのStatusが、「in Progress」から「Deployed」になるまで待機。
意外と時間がかかるので、気長に待ってください。

3.
Route53で、独自ドメインのAレコードに設定にあるAlias Targetのプルダウンで、S3からCloudFrontのAliasに変更。
※DistributionのStatusが「Deployed」になるまで、プルダウンにCloudFrontのAliasは表示されません。

以上で、S3からのコンテンツ配信にCloudFrontを簡単に追加できました。
配信するコンテンツを変更や削除する場合には、キャッシュサーバーのキャッシュを削除する必要があります。
その場合には、CloudFrontのInvalidationを使ってください。