AWSのサービスの一つに、Amazon CloudFront(クラウドフロント)というサービスがある。クラウドフロントを活用することでWEBページの表示速度を大幅に改善することができる。
なぜ速度改善につながるのか?を理解するには、キャッシュについて理解する必要がある。
そんな、ブラウザとサーバーのキャッシュの違いも踏まえて、クラウドフロントのメリットと使い方をわかりやすく解説。
【追記】
私は元々Lolipop(ロリポップ)で運用していたのですが、数年間運用することでLolipopの重大な問題が発覚したために、いろいろと調べて、Xserver(エックスサーバー)に移管することにしました。
Xserverは国内最速と公言しているだけあって、Lolipopやさくらのレンタルサーバーとは比較にならないぐらい表示速度が速いです。
実際、Page Speed Insightで、スマホの表示速度が移管前は40程度だったのが、Xserverに移管したことで90前後に爆上がりしました。
移管に至った経緯や、XserverとConoha Wing(コノハウイング)の比較などについては下記をご参考ください。Xserverの料金が1万円引きになるリンクも紹介しています。
クラウドフロント(CloudFront)とは?
端的に言うと、AWSが提供する、CDN(コンテンツデリバリーネットワーク)サーバー。
CDNとは技術の名称で、WEBページや画像、音楽、動画などのコンテンツ(Contents)を配信(Delivery)するための、ネットワーク(Network)のこと。CDNサーバーを提供している企業やサービスはたくさんあり、AWSはそのうちの一つ。
ユーザーがWEBページなどの情報をリクエストしたときに、大元のサーバーが応答するのではなく、CDNサーバーが応答する。
AWSはサーバーとして、EC2やS3などを提供しているが、そのEC2やS3と直接データをやり取りするのではなく、Cloud Frontを使ってデータをやり取りする。
なお、CloudFrontを利用している場合は、レスポンスヘッダーの「x-cache」や「via」に「cloud front」が表示される。
![](https://prograshi.com/wp-content/uploads/2021/06/image-334-1024x668.png)
X-Cacheは状況により「Hit from cloudfront」や「Miss from cloudfront」とも表示される。
ブラウザとサーバーのキャッシュの違い
CDNサーバーに保存されたある時点での情報を「キャッシュ」と呼ぶ。
キャッシュというと、ブラウザのキャッシュもよく耳にするが、CDN(サーバー側)のキャッシュとブラウザのキャッシュは異なる。
例えば、CDNを使っていない場合でも、WEBページを変更して本番環境に反映した場合に、ブラウザで確認しても昔のままになっていることがある。
これはブラウザが過去にアクセスしたページをキャッシュとして保存し、それを表示しているためである。いちいち大元のサーバーにアクセスしていない。
ブラウザのキャッシュをクリアすれば、変更後のページが表示される。
本番環境のサーバー ⇄ ブラウザ(キャッシュ) ⇄ ユーザー
一方、CDNを使っている場合は、変更を本番環境に反映し、ブラウザのキャッシュをクリアしても変更後のページが表示されない。
これは、CDNに保存した情報、すなわちキャッシュがあるためである。変更をWEBページで表示するためには、CDNのキャッシュもクリアする必要がある。
本番環境のサーバー ⇄ CDNサーバー(キャッシュ) ⇄ ブラウザ(キャッシュ) ⇄ ユーザー
「キャッシュ」が2回登場しているが、それぞれは異なっている。
クラウドフロント(CloudFront)を使うメリットと原理
クラウドフロントを使うメリットは大幅な速度改善および、大元のサーバーの負荷を抑えること。
本来、ユーザーがWEBページなどをリクエストすると、サーバーがそのリクエストに応じてページの元となる情報を生成してユーザーに返す。
ユーザーからリクエストがあるたびに情報を生成する処理が発生する。
クラウドフロント(CDN)は、ある状態のページやデータを、その状態のまま記憶しておき、世界各地にあるAWSのCDNサーバーにコンテンツを配置する。
こうすることで、ユーザーからリクエストがあったら、その近くのCDNサーバーが記憶している情報をレスポンスとして返す。
ページをいちいち生成すると言う処理が発生しない。それどころか、大元のサーバーにリクエストが届いてすらいない。
このため、サーバーの負荷は下がるし、レスポンスの速度も大幅改善される。
以下は、クラウドフロントが利用している、CDN用のサーバーが配置されているエリア。Amazonではエッジロケーションと呼んでいる。
![](https://prograshi.com/wp-content/uploads/2021/06/image-330.png)
世界47カ国に、225 以上のネットワークを保持している世界規模の強力なCDN。
AWSの他のサービスとも連携させやすく、一つのコントロールパネルで操作できるのもメリットの一つ。
クラウドフロント(CloudFront)のデメリット
クラウドフロント(CloudFront)は素晴らしサービスであるが、その特性上デメリットもある。
- リアルタイムのページが表示されない。
- 更新に時間がかかる。
- コストがかかる。
リアルタイムのページが表示されない
CDNは、ある時点での情報を記憶しておき、その情報を返すため、もし、大元のサーバーでページやデータの修正を行なっても、それがWEB上にリアルタイムに反映されない。
CDNがサーバーにデータを更新に行く頻度は自由に設定できる。1日程度にしておくのが一般的。
もし、ページに致命的なミスがあり即座に修正内容を反映したい場合などは、そのページのCDNサービスを更新する必要がある。
更新に時間がかかる
CDNサービスを停止したり情報を更新するには、とても時間がかかる。
世界47カ国に、225 以上のネットワークがあるので、その情報を置き換えなければならないためである。
例えば、1ページだけ更新する場合でも数分間はかかってしまう。ページ数が増えれば増えるほど完了までの時間は増加する。
コストがかかる
料金体系はかなり安めに設定されている方ではあるが、最少転送データ量が10TBとなっているので、小規模サイトにはコスパが悪い。
トラフィックの多い大規模サイトであれば、S3やEC2を使うよりも格安になる。
![](https://prograshi.com/wp-content/uploads/2021/06/image-331-1024x430.png)
![](https://prograshi.com/wp-content/uploads/2021/06/image-332-1024x238.png)
その他、httpやhttpsでのリクエストなど追加料金がかかる項目がいくつかある。
▼実際の料金の例(1月)
実際に発生する料金は比較的大規模な複数サイトでも$30程度に収まる。
![](https://prograshi.com/wp-content/uploads/2021/06/image-333-1024x584.png)
詳細は、AWS Cloud Frontの料金ページにて。
クラウドフロント(CloudFront)の専門用語
クラウドフロント(というかAWS)には専門用語が多く存在する。ここではよく使うものをご紹介。
Distribution(ディストリビューション)
設計するCDNサービスの名称。複数形のDistributionsというタブをクリックすると、作成済みのサービス一覧が表示される。
Origin(オリジン)
大元のサーバー。Cloud Frontがデータを取ってくる大元。EC2、S3、ELBなどが該当する。複数登録することができる(マルチオリジンと呼ぶ)
Behavior(ビヘイビア)
リクエストされたURIに対して、どのように対応するかの設定。URIを正規表現で指定して、キャッシュ元のオリジンを指定したり、動的コンテンツはCDNを介さずにオリジンに直接飛ばす(あるいはキャッシュの時間を短くする)といった設定ができる。
Invalidation(インバリデーション)
CDNサーバーに保存されたキャッシュをクリアする。設定したキャッシュ更新期間よりも早く更新したい場合に使用する。
パスパターンを指定して、「Invalidate」をクリックすると処理が始まる。1ページでも数分かかる。
![](https://prograshi.com/wp-content/uploads/2021/06/image-335.png)