CloudFrontを使用することになったので、使い方や設定項目についてを調べ、とりあえずS3の静的ファイルへCloudFrontを導入してみます。
CloudFrontとは
概要
CloudFrontはCDN(Content Delivery Network)を作成するサービスです。
CDNは、世界中にあるCDNのサーバでCDNネットワークを構築しています。ユーザが画像ファイル等をリクエストした際に、このネットワークからユーザから最もネットワーク的に近い場所を選択して、そこにキャッシュしている画像ファイル等を返答します。
これにより、以下のようなメリットを得ることができます。
- ダウンロードが高速になる(近いネットワークからのダウンロードの方が早い)
- サーバの負荷が下がる(キャッシュから返答するので、オリジンサーバが処理する必要がない)
CloudFrontの料金
料金は以下のAWSのページにまとまっています。
CloudFrontを実際に使用する
作成開始
サービスからCloudFrontを選択します。
グループ表示だと「ネットワーキング & コンテンツ配信」にあります。
「Create Distribution」で作成します。
WebまたはRTMPを選択
作成を開始すると、まずはWebまたはRTMPを選択します。
通常のサイトであればWebで問題ありません。
RTMPは、Adobe Flashプレーヤーとサーバ間の通信でのやりとりをするプロトコルなので、それを使用する場合はRTMPを選択します。
今回は、Webを選択します。
設定
設定項目について
設定項目が多いのでそれぞれについて調べました。
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は変更したい場合は変更します。
Behaviorの設定は、HTTPだった場合はHTTPSにリダイレクトさせてみます。
それ以外はS3を選んだときに設定されるデフォルト値のままでいきます。
今回はcloudfront.netへ直接アクセスするのでCloudFrontのデフォルトのSSL証明書を使用します。
それ以外は、デフォルト値のままいきます。
「Create Distribution」で作成します。
作成が完了するとStatusが「Deployed」になります。
※作成に少し時間かかります(約15分)
動作確認
S3に上げているHTMLは画像とCSSを一つずつ読み込ませています。
一回目のアクセスではCloudFrontにヒットしない、二回目のアクセス以降はヒットするようになるはずです。
実際に見てみます。
まずはS3へ直接見た場合
CloudFront経由 1回目
index.html他のx-cacheが「Miss from cloudfront」となっていてヒットしていません。
CloudFront経由 2回目
x-cacheが「Hit from cloudfront」になり、ヒットしていることがわかります。
とりあえず、まずはS3の静的ファイルへCloudFrontを導入することができました。