AWS S3からのコンテンツ配信にCloudFrontを追加

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



CloudFrontの良い点を、以下に挙げてみました。

• CloudFrontはCDNなので、複数のキャッシュサーバーから高速なコンテンツ配信が可能。
• gzip圧縮の設定が簡単にできる。
• インターネットへのデータ送信料金が、S3 + CloudFrontでも、S3単独とほとんど同じ。
  ※初年度のAWSの無料枠で比べると、S3のデータ送信は15GBまで、CloudFrontでは50GBまで無料。
  初年度だけで考えると、圧倒的にCloudFrontの方がお得です。
• ACMの証明書を利用して、無料でhttpsの配信が出来る。
※httpからhttpsへのリダイレクトも、設定でチェックを入れるだけです。

また、これまで気にしていませんでしたが、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
  ※CSSファイルなどを、自動的にgzip圧縮して配信します。
• Alternate Domain Names (CNAMEs) → 使用する独自ドメインを指定。
  ※Route53で、Aレコード（IPv4用）とAAAAレコード（IPv6用）のAlias targetを指定するプルダウン一覧に追加されます。
• Enable IPv6 → チェックを入れる。

2.
DistributionのStatusが、「in Progress」から「Deployed」になるまで待機。
意外と時間がかかるので、気長に待ってください。

3.
Route53のCreate Record setで、2つ（Type A-IPv4-addressとType AAAA-IPv6-address）設定を追加します。
Valueは、Alias Targetで、それぞれプルダウンで選択。
※DistributionのStatusが「Deployed」になるまで、プルダウンにCloudFrontのAliasは表示されません。

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

おまけ.
https化したい場合には、AWSマネジメントコンソールのCertificate Manager（ACM）で、「独自ドメイン」のSSL証明書を発行。
CloudFrontに以下の設定を追加してください。

• Viewer Protocol Policy → Redirect HTTP to HTTPS
• SSL Certificate → Custom SSL Certificateで、プルダウンから作成した証明書を選択。
• Custom SSL Client Support → Only Clients that Support Server Name Indication (SNI)
• Security Policy → TLSv1.1_2016 (recommended)

ACMの証明書は無料なので、設定して損はありませんね。