AWS

CloudFrontの使い方

更新日:

CloudFrontを使用することになったので、使い方や設定項目についてを調べ、とりあえずS3の静的ファイルへCloudFrontを導入してみます。

CloudFrontとは

概要

CloudFrontはCDN(Content Delivery Network)を作成するサービスです。
CDNは、世界中にあるCDNのサーバでCDNネットワークを構築しています。ユーザが画像ファイル等をリクエストした際に、このネットワークからユーザから最もネットワーク的に近い場所を選択して、そこにキャッシュしている画像ファイル等を返答します。
これにより、以下のようなメリットを得ることができます。

  • ダウンロードが高速になる(近いネットワークからのダウンロードの方が早い)
  • サーバの負荷が下がる(キャッシュから返答するので、オリジンサーバが処理する必要がない)

CloudFrontの料金

料金は以下のAWSのページにまとまっています。

Amazon CloudFront 料金表

CloudFrontを実際に使用する

作成開始

サービスからCloudFrontを選択します。
グループ表示だと「ネットワーキング & コンテンツ配信」にあります。
aws-cloudfront-service

「Create Distribution」で作成します。
aws-cloudfront-create

WebまたはRTMPを選択

作成を開始すると、まずはWebまたはRTMPを選択します。
通常のサイトであればWebで問題ありません。
RTMPは、Adobe Flashプレーヤーとサーバ間の通信でのやりとりをするプロトコルなので、それを使用する場合はRTMPを選択します。

今回は、Webを選択します。
aws-cloudfront-web-or-rtmp

設定

設定項目について

設定項目が多いのでそれぞれについて調べました。

Origin Settings
Origin Domain Name オリジンサーバ(S3やELB等)のDNS名を指定します。
Origin Path 転送先パスを指定したい場合は記述します。
Origin ID このオリジン設定を識別するためのIDになります。
Origin Custom Headers このオリジン設定経由でアクセスした際にHTTPヘッダーに値を付与したい場合は記述します。
Default Cache Behavior Settings
Path Pattern キャッシュするものをパターン(*.jpg等)で指定します。(指定する場合は、作成後に指定します)
Viewer Protocol Policy CloudFrontへアクセスするプロトコルを指定します。
Allowed HTTP Methods CloudFrontへアクセスするHTTPのメソッドを指定します。
Field-level Encryption Config 特定のフィールドを暗号化したい場合に設定します。
Cached HTTP Methods キャッシュするHTTPメソッドを指定します。
Cache Based on Selected Request Headers キャッシュするHeader情報を設定します。
Object Caching キャッシュ時間の設定です。
転送先のサーバからのCache-Control headerで指定するか、CloudFrontで設定するかを指定します。
Forward Cookies 転送するクッキー情報を設定します。ここを設定しないとCookieがオリジンサーバへ届きません。
Query String Forwarding and Caching クエリ文字列の転送とキャッシュを設定します。
Smooth Streaming Smooth Streamingを使用してオンデマンドビデオ配信をしたい場合は「Yes」を指定します。
Restrict Viewer Access
(Use Signed URLs or
Signed Cookies)
アクセスを制限したい場合は「Yes」を指定します。
Compress Objects Automatically コンテンツをCloudFrontで圧縮したい場合は「Yes」を指定します。
Lambda Function Associations アクセスがあった等のイベント時にLambdaを動かしたい場合は設定します。
Distribution Settings
Price Class 価格クラス(料金表参照)を指定します。
ロケーションを制限することで、転送安く抑えることができますが、アクセスが遅くなる可能性があります(価格クラス100の場合、日本→米国へのアクセスとなり、日本→日本より遅いが、日本→米国のほうが価格が安い。)。
AWS WAF Web ACL WAFを使用して、条件によりアクセス許可、ブロックをする場合は指定します。
Alternate Domain Names (CNAMEs) カスタムドメインを使用する場合には医術します。
SSL Certificate HTTPSでアクセスする際のSSL証明書の指定です。CloudFrontに直接アクセス(*.cloudfront.net)するのであれば「Default CloudFront Certificate」、独自ドメインなどでアクセスする場合は「Custom SSL Certificate」を指定します。
Supported HTTP Versions 受け入れるHTTPのバージョンを指定します。
Default Root Object デフォルトルート(例 https://XXX.ccoudfront.net/)を指定された場合に返すオブジェクトを設定します。
Logging ログを残した場合は、「On」に設定します。
Enable IPv6 IPv6の許可を指定します。
Comment 作成したCloudFrontにコメントを残しておくことができます。
Distribution State 作成後、起動するかしないかを指定します。

設定

今回は、S3においてあるHTMLを対象に導入していきます。
※S3およびHMTLファイルはすでに作成済みとします。

Origin Domain Nameを設定します。
クリックをすると同じアカウントであれば、S3やELBの候補が出てくるのでそれを選択します。
EC2等はDNS名を入力すれば問題なしです。
Origin IDは変更したい場合は変更します。

aws-cloudfront-origin-settings

Behaviorの設定は、HTTPだった場合はHTTPSにリダイレクトさせてみます。
それ以外はS3を選んだときに設定されるデフォルト値のままでいきます。

今回はcloudfront.netへ直接アクセスするのでCloudFrontのデフォルトのSSL証明書を使用します。
それ以外は、デフォルト値のままいきます。
「Create Distribution」で作成します。

aws-cloudfront-distribution -settings

作成が完了するとStatusが「Deployed」になります。
※作成に少し時間かかります(約15分)

aws-cloudfront-create-finished

動作確認

S3に上げているHTMLは画像とCSSを一つずつ読み込ませています。
一回目のアクセスではCloudFrontにヒットしない、二回目のアクセス以降はヒットするようになるはずです。
実際に見てみます。

まずはS3へ直接見た場合
aws-cloudfront-test-1

CloudFront経由 1回目
aws-cloudfront-test-2

index.html他のx-cacheが「Miss from cloudfront」となっていてヒットしていません。

CloudFront経由 2回目
aws-cloudfront-test-3

x-cacheが「Hit from cloudfront」になり、ヒットしていることがわかります。
とりあえず、まずはS3の静的ファイルへCloudFrontを導入することができました。

-AWS
-

Copyright© freamap ブログ , 2020 All Rights Reserved.