概要

最近、色んなプロジェクトで面白い仕組みのback-end、front-endを触れるようになりました。
面白かった仕組みの中で一つがCDNでした。
また、AWSのCloudFrontサービスでCDN仕組みを簡単に構築できました。
ということで、自分のリマインダーと初心者の方に伝えるために記事を書いておきます。

CDNとは

CDN(Contents Delivery Network)とはウェブコンテンツを配信することに最新化されたネットワークという意味です。

基本的には、ウェブサイトにある画像や動画などの静的なコンテンツをウェブサーバとは別のサーバにキャッシュして静的データを提供する仕組です。例えば、Googleのサーバはドコにあるのでしょうか。具体的な場所は公開されていませんが、Google目く「世界中にある」そうです。そのユーザーの一番近いエッシサーバからデータを提供する仕組になっています。その仕組をCDNといいます。

CloudFrontとは

そうすると、AWSの**CloudFront**サービスは何でしょう。
以下の通り🔗ドキュメントによく説明されています。

CloudFront は、静的および動的なウェブコンテンツ（.html、.css、.php、イメージファイルなど）をエンドユーザーに高速に配信するウェブサービスです。CloudFront は、エッジロケーションというデータセンターの世界的ネットワークを経由してコンテンツを配信します。CloudFront を使用して提供されているコンテンツをユーザーがリクエストすると、そのユーザーはエッジロケーションにルーティングされます。エッジロケーションでは最も低いレイテンシー（遅延時間）が提供されるので、コンテンツは可能な最高のパフォーマンスで配信されます。コンテンツがエッジロケーション内に最も低いレイテンシーですでに存在している場合、CloudFront はそのコンテンツを即時に配信します。コンテンツがこのエッジロケーションに現在存在しない場合、CloudFront は、コンテンツの最終バージョンのソースとして識別されている Amazon S3 バケットまたは HTTP サーバー（ウェブサーバーなど）からコンテンツを取り込みます。

CDNは**オリジンサーバーが重要です。
オリジンサーバーはそれぞれのクライアントに静的データを配布するサービスです。
オリジンサーバーはS3やEC2**を主に利用しています。

実習

さて、一番基本的なS3をオリジンサーバーとして利用するCloudFront配布を生成して見ましょう。

① S3にBucketを生成して配布するhtmlファイルをアップロードします。

すみませんが、こちらの詳しい説明は他の記事をご覧ください。

sample.html

<html>
<head>
    <title>Example CloudFront Distribution</title>
</head>
<body>
	<br><br><br>
    <MARQUEE behavior="alternate" scrollDelay="50">Hello CloudFront - S3</MARQUEE>
    <br><br><br>
</body>
</html>

② CloudFrontサービス開始

AmazonのコンソールCloudFrontに移動して、新しい配布を作ります。

③コンテンツ配布方法選択

コンテンツを配布する方法を選択します。
今回は静的なコンテンツ、WEBを選択します。
動画のリアルタイミングプロトコル、RTMPも適用しています。

④生成する配布の設定

・Origin Domain Name
オリジンのドメイン名を設定します。
入力エリアをクリックすると、現在利用できるS3バケットとELBのリストが表示されます。
上で生成したS3バケットを選択します。

・Origin ID
オリジン区分するIDです。
特に気にする部分ではありませんし、Origin Domain NameでS3バケットを選択すると自動に設定されます。

・Restrict Buket Access
S3バケットにCloudFrontしかアクセス出来ないように設定する項目です。
Yesを選択してください。

・Origin Access Identity
オリジンにアクセスする識別子でございます。
新たに生成することもできますし、もうあるものも利用できます。
今回はCreate a New Identityを選択しましょう。

・Comment
新たに生成する識別子です。
デフォールトそのまま使いましょう。

・Grant Read Permissions on Bucket
CloudFrontがS3でファイルを読める権限をバケットのBucket Policyに設定します。
Yesに設定すると、他のアクセスは制限され、CloudFrontしかアクセス出来るようにバケットにBucket Policyが設定されます。
Yes, Update Bucket Policyを選択しましょう。

・Path Pattern
CloudFrontでファイルを取り込む規則です。
デフォルトは「*」に設定されているので、全てのファイルを取り込むことになります。
この部分は生成した後、追加するのができます。

・Viewer Protocol Policy
CloudFrontのプロトコル政策です。
デフォルトのそのまま利用しましょう。

HTTP and HTTPS : HTTPとHTTPS全部利用します。
Redirect HTTP to HTTPS : 全てのHTTPアクセスをHTTPSにリダイレクトします。
HTTPS Only : HTTPSのみ利用します。

・Allowed HTTP Methods
許可するHTTPメソッドの種類です。
デフォルトのそのまま利用します。

GET, HEAD : ファイルを読むときだけ選択します。
GET, HEAD, PUT, POST, PATCH, DELETE, OPTIONS : 動的なコンテンツを送信するとき選択します。

続いてこ細かい設定でございます。

・Object Caching
ファイルのキャッシュの維持時間を設定します。
維持時間が過ぎたらCloudFrontにあるファイルが削除されます。
デフォルトそのまま利用します。

Use Origin Cache Headers : オリジンHTTPヘッダーのキャッシュ設定を従います。それぞれのファイルあたりに設定するのが出来るメリットがあります。キャッシュ設定が無かったらデフォルトキャッシュ維持時間は24時間です。
Customize : デフォルトキャッシュ維持時間を設定します。
Minimum TTL : 最初のキャッシュの維持時間です。秒単位で設定して、このMinimum TTL設定時間とオリジンHTTPヘッダーのキャッシュ設定(Cache-Control)時間中、長い時間が適用されます。

・Forward Cookies
オリジンのクッキーをCloudFrontを経てクライアントに伝えるかを設定します。
デフォルトそのまま利用しましょう。

None : クッキーを伝えません。キャッシュの性能がもっと向上されます。
Whitelist : クッキーを選別して伝えます。
Whitelist Cookies : 伝えるクッキーの名前を設定します。それぞれのクッキーは行別に区分されます。

・Query String Forwarding and Caching
CloudFrontにオリジンでクエリー文字列を伝えます。
オリジンでクエリー文字列を区分して見せるためには設定します。
設定しないとキャッシュの性能が向上されます。
デフォルトそのまま利用しましょう。

・Smooth Streaming
リアルタイムストリーミングプロトコル、Microsoft Smooth Streamingを利用する時設定します。
デフォルトそのまま利用しましょう。

・Restrict Viewer Access
Signed URLでCloudFrontの利用を制限したい場合設定します。
デフォルトそのまま利用しましょう。

・Price Class
料金のレベルです。
エッジロケーション利用範囲を設定するとき、実際サービスにはそんなに必要じゃない地域を除外する場合設定します。
デフォルトそのまま利用しましょう。

・Alternate Domain Names
Route 53でドメインを連携する場合、こちらを設定するべきです。
色んなドメインでしたら、行別に区分して最大10個まで設定するのができます。
今回は使いません。

続いてこ細かい設定でございます。

・SSL Certificate
HTTPSプロトコルを利用するための認証書の設定です。
デフォルトそのまま利用しましょう。
− Default CloudFront Certificate : CloudFrontの認証書を利用します。
− Custom SSL Certificate : 利用者が購入したドメインと認証書を利用する場合設定します。認証書の保存はIAMで可能です。
− Custom SSL Client Support ：カスタムSSLクライアント設定です。先にCustom SSL Certificateを設定するべきです。
− All Clients : 専用IP利用者指定SSL設定です。詳しい内容は🔗ドキュメントを参考してください。

Amazon CloudFront には、ウェブサイト全体を高速化しつつ、CloudFront のどのエッジロケーションからでも HTTPS 経由でコンテンツを安全に配信する 3 つのオプションがあります。エッジロケーションからの安全な配信に加えて、オリジンフェッチ用に HTTPS 接続を使用するよう、CloudFront を設定することもできます。これにより、お客様のオリジンサーバーとエンドユーザーのエンドツーエンド間でデータが暗号化されます。

・Supported HTTP Versions
サポートするHTTPバージョンを設定します。
デフォルトそのまま利用しましょう。

・Default Root Object
CloudFront配布のドメインの最上位にアクセスしたとき見せるファイルの名前です。
今回はsample.htmlにしました。

・Logging
CloudFrontアクセスログ設定です。
デフォルトそのまま利用しましょう。

− Bucket for Logs : CloudFrontログを保存するS3バケットを設定します。

− Log Prefix : S3バケットにログを保存する場合、ディレクトリー名を設定します。

・Enable IPv6
IPv6からのアクセスも反映するかを設定します。
今回はチェックしなかったです。

・Comment
メモです。追加で説明とか記録する場合、利用します。

・Distribution State
配布を生成した後、配布状態を設定します。
− Enabled : すぐ利用出来る状態になります。
− Disabled : 配布生成のみ非活性化します。

成功的にCloudFront配布が生成しました。
気になる部分及びもっと詳しい設定内容は🔗ドキュメントを参考してください。

Statusを見るとInProgressに表示されインジケーターがぐるぐるしています。
配布が全てのエッジロケーションに電波されるまでは約15~20分かかるためです。

⑤結果確認

全てのエッジロケーション電波が完了されたら、StatusがDeployedに変わります。
また、Domain NameにCloudFront配布のドメインが表示されます。

では、ウェブでCloudFrontに接続してみましょう。
sample.html内容がちゃんと出ています。
CloudFront配布ドメイン形はd39embebg71el9.cloudfront.netで、前のd39embebg71el9は生成した配布を区分しています。

これで、Webサーバの地域に関わらず全世界どこでも早くデータを配布するのができます。👏👏👏

⑥ChromeからHTTPヘッダーを確認

Web Browser、Chromeの開発ツールにはHTTPヘッダーを確認するのができます。
NetworkタブのResponse HeadersのX-Cache項目を見るとHit from cloudfrontだと表示されます。
これは、CloudFrontにキャッシュされたファイルを取り込んだという意味です。

キャッシュの維持時間が過ぎてCloudFrontがオリジンにアクセスしてファイルを取り込んだときは、
Miss from cloudfrontだと表示されます。

⑦CloudFront配布削除する

CloudFront配布を削除するためには、配布リストから配布を選択してDisable設定をします。
非活性状態になったらまた全てのエッジに電波されるまで約15~20分かかります。
その後、StatusがDeployedになったら削除可能になります。