CloudFront + S3 での画像表示

梅雨シーズン到来です。雨の日も、気持ちだけはスカッと晴れやかにいたいですね。

今回は、「Amazon CloudFront」についてです。その名の通りクラウドのフロントエンド（ユーザに最も近い場所）からコンテンツを提供してくれるサービスです。

以前、ある案件で「Amazon S3」に配置されている大量の画像ファイルをWebページで表示する際に、

S3ダイレクトで画像ファイルを取得する
CloudFront経由でS3の画像ファイルを取得する

どちらの方がいいか悩んだことがありました。

実際にパフォーマンス検証もしてみて、2のCloudFront経由の方が速かったのと、静的Webサイト配信等の事例もあったので、2を採用したのですが、具体的にどのようなメリットがあるのか、改めて振り返ってみます。

1. パフォーマンス

CloudFrontは、コンテンツ配信ネットワーク（CDN）であり、ユーザーに近い場所にあるエッジロケーションにコンテンツをキャッシュします。

特徴 - Amazon CloudFront | AWS

上記の記事によると、エッジロケーションは、東京（ap-northeast-1）リージョンに「20」もあるとのこと。すごいですね。

これによって、ユーザーから物理的に近い場所からコンテンツが提供されるので、画像ファイルの読み取り速度が向上します。つまり、ユーザーはWebページの画像を早く見ることができます。（S3から直接コンテンツを提供する場合は、ユーザーがS3バケットから遠い場所にいると、画像ファイルの読み取り速度が低下します）

CloudFrontは初回アクセス時やキャッシュ失効時にオリジンからコンテンツを取得します。
S3に格納されている画像ファイル（約4MB）について、CloudFrontに「キャッシュなし」の場合、「キャッシュあり」の場合のダウンロード時間を確認してみました。

キャッシュなしの場合：373 ミリ秒

キャッシュありの場合：27 ミリ秒

14倍近く速いですね！

2. セキュリティ

CloudFrontはOAC（Origin Access Control）を利用してS3コンテンツへのアクセス制限が可能で、S3バケットへのアクセスをCloudFrontからのみに限定することができます。これにより、オリジンのS3を保護することができます。

また、AWS WAFをCloudFrontに導入することで、不正なトラフィックやウェブ攻撃から保護するための設定や、リファラーによるアクセス制限等が可能になります。また、CloudFrontはデフォルトでSSL/TLS 証明書を使用することができ、ユーザーとサーバー間の通信が保護され、データが傍受されるリスクが減少します。