4. キャッシュの設定

4 of 7

このページは、Fastly の CDN の説明の一部であり、Fastly の CDN の使用方法および Web サイトの例とドメイン名を示して段階的に説明するチュートリアルです。このチュートリアルでは、静的サイト生成ツールの Jekyll、Amazon AWS、Fastly CDN を使用して静的Webサイトをキャッシュ・配信する手順をご紹介します。詳細については、こちらをご覧ください。

Web サイトや Web アプリケーションコンテンツのキャッシュに関して Fastly は、さまざまなオプションを提供します。Fastly は、デフォルトで大部分のコンテンツをキャッシュしますが、ユーザーのほとんどはキャッシュ設定をカスタマイズしています。Fastly では、キャッシュされるコンテンツと、コンテンツがキャッシュされる期間を完全にコントロールできます。

各ユーザーのニーズはそれぞれ異なるため、すべてのケースにおいて最適なキャッシュ方法はありません。実際のシナリオでは、キャッシュの要件は、さまざまな要因によって異なります。例えば、Django 使用して、Web アプリケーションを構築した場合、静的コンテンツと動的コンテンツに対して別々のキャッシュルールを作成する必要があるかもしれません。

Taco Labs は静的 Web サイトであるため、キャッシュに対するニーズは比較的シンプルなものです。当社のレシピ Web サイトには、主に HTML と画像が含まれています。目標は、長時間にわたってすべてをキャッシュすることです。そして、変更を加えたときには、影響を受ける URL をパージするか、purge all を実行します。

ヒント

ご存知の通り、パージはこのチュートリアルではすべてをカバーしきれない大きなトピックです。キャッシュの詳細については、キャッシュドキュメントをご覧ください。

ワークフローでのキャッシュとパージの仕組み

キャッシュからコンテンツをパージする必要が生じる理由とタイミングについて考えてみましょう。3 つのシナリオが考えられます。

  • 新しいコンテンツの追加
  • コンテンツの修正
  • コンテンツの削除

コンテンツを修正・削除する場合は明らかです。単一のレシピを修正した場合、ページの URL と関連する画像のパージをソフトパージすることができます。コンテンツを削除する場合は、少し複雑です。削除したページと、関連する画像の URL をパージする必要があります。それに加えて、削除したページにリンクされているすべてのインデックページもパージする必要があります。

もちろん、新しいコンテンツはキャッシュされません。しかし、新しいコンテンツを追加するという作業も簡単ではありません。新しいレシピは、カテゴリーインデックページに表示されます。これらのページはキャッシュされているため、新しいコンテンツを追加する際、パージする必要があります。

プロセスをシンプルにするため、次のセクションで GitHub アクションを更新し、Fastly API を使用して、Web サイトを構築し、Amazon S3 にデプロイした後に、自動的にすべてのコンテンツがパージされるようにします。「Purge all (すべてをパージする)」は、コンテンツをパージする最も効率的な方法ではありません。たとえば、1日に何百万人もの訪問者が訪れるようなコンテンツ管理システム (CMS) を管理する場合などには使用しないほうがよいでしょう。しかし、今回は静的サイトであるため、このセットアップで複雑さを軽減して、チームメンバーのデプロイをより簡単にすることができます。

キャッシュヘッダーの設定

Fastly のサーバーとエンドユーザーの Web ブラウザの両方にキャッシュをコントロールする HTTP ヘッダーを設定することができます。いくつかの関連するヘッダーがあります。完全なリストについては、キャッシュのフレッシュネスに関するドキュメントをご覧ください。Taco Labs に、Surrogate-ControlおよびCache-Controlヘッダーを使用します:

Surrogate-Control: max-age=31557600
Cache-Control: no-store, max-age=0

Surrogate-Control ヘッダーは、Fastly に独自のものです。ここでは、Fastly に最大 31557600 秒 (1年) のオブジェクトをキャッシュするように伝えています。ヘッダーは、Taco Labsに既存のコンテンツを更新する必要がなく、数週間または数か月かかることがあります。このヘッダーでは、コンテンツが、Fastlyのキャッシュサーバーに長時間滞在するようになります。

その一方で、エンドユーザーの Web ブラウザにあるキャッシュについては考慮していません。実際、Fastly はエンドユーザーの Web ブラウザのキャッシュを無効化することができないため、その方がいいのです。パージリクエストは、Fastly のキャッシュをクリアしますが、Web ブラウザには触れません。そこには、Cache-Controlヘッダーが入ります。このヘッダーを使用して、ユーザーの Web ブラウザにオブジェクトをキャッシュしないように伝えることができます。

これらのヘッダーを併用することで、Fastly のサーバーには1年間オブジェクトをキャッシュするように伝え、エンドユーザーの Web ブラウザにはオブジェクトを一切キャッシュしないように伝えることができます。

注意

この例で Web ブラウザのキャッシュを使用したければ、Cache-Control ヘッダーを max-age=86400 などと設定することも可能です。そうすることで、エンドユーザーのWeb ブラウザは、最大1日間オブジェクトをキャッシュします。

ヘッダーは Fastly コントロールパネルで設定することができます。では、Surrogate-Control ヘッダーから始めましょう。Edit configuration をクリックしてサービスを複製し、新しいドラフトバージョンを作成します。次に、Content ページで Create a header をクリックします。以下のように、フォームフィールドに入力します。

Fastly コントロールパネルでサロゲートコントロールヘッダーを作成する

Create をクリックしてヘッダーを保存しましょう。次に、Create a header をクリックして、 Cache-Controlヘッダーを作成します。以下のように、フォームフィールドに入力します。

Fastly コントロールパネルでキャッシュコントロールヘッダーを作成する

Create をクリックしてヘッダーを保存し、次に Activate をクリックしてサービス設定を有効化します。

もう一度 purge all を実行すると (前のセクションの指示に従ってください)、新しいヘッダーが有効になります。curl コマンドを使用して確認することができます:

$ curl -svo /dev/null -H "Fastly-Debug:1" https://tacolabs.global.ssl.fastly.net

出力には、以下が含まれます:

< HTTP/2 200
< x-amz-id-2: i0l9PThu7fvjt4FVKxtZYOVHEKAJIPh/rp9bjojQI+WXPFUKPW6WJZ7a4V0Pq3pyaR0VAvE/g5E=
< x-amz-request-id: 2XK0VGXYP9TWDW3J
< last-modified: Fri, 23 Jul 2021 21:54:38 GMT
< etag: "dcf9e4efa41b023a4280c8305070a1cf"
< content-type: text/html
< server: AmazonS3
< via: 1.1 varnish, 1.1 varnish
< cache-control: no-store, max-age=0
< accept-ranges: bytes
< date: Tue, 26 Oct 2021 21:21:11 GMT
< age: 85457
< x-served-by: cache-mdw17340-MDW, cache-phx12433-PHX
< x-cache: HIT, MISS
< x-cache-hits: 2, 0
< x-timer: S1635283271.482635,VS0,VE46
< vary: Accept-Encoding
< content-length: 4469

出力でCache-Controlヘッダーを確認することができます。うまく行きました!注意: Fastly は、レスポンスがエンドユーザーに送信される前に、このヘッダーを削除するため、出力にSurrogate-Controlヘッダーは表示されません。

失効済みの配信を有効にする

Fastlyは、オリジンサーバーに問題がある場合や、オリジンサーバーから新しいコンテンツを取得するのに時間がかかっている場合、失効済みコンテンツを提供することができます。例えば、Amazon S3 にサービスの中断が発生しているような場合でも、Fastly は Taco Labs からキャッシュされたコンテンツを提供することができます。これにより、オリジンサーバーの停止を軽減することができます。ただし、オリジンサーバーが停止する前に、この機能を有効にしなければなりません。

Edit configuration ボタンをクリックして、サーバーを複製し、新しいドラフトバージョンを作成しましょう。次に、Settings ページで、下記のように、Serve stale content on origin failure (オリジンサーバーの障害に関する失効済みコンテンツを提供する) の横にある ON スイッチをクリックします。

Fastly コントロールパネルで、Serve stale content on origin failure を有効にする

これで、Activate をクリックして、サービス設定を有効にすることができます。すべて設定できました!これで、Amazon S3 がオフラインになっている場合でも、Fastly は、訪問者に Taco Labs を提供し続けることができます。

この機能の設定をカスタマイズしたい場合は、失効済みコンテンツドキュメントの提供をよく読んでください。さらに多くのことができるようになります。

ページをキャッシュしない

デフォルトでは、Fastlyは、Taco Lab Web サイトのすべてのオブジェクトをキャッシュしますが、条件ボタンを作成しても、特定のオブジェクトをキャッシュしないようにできます。この設定が有益となる状況があります。例えば、コンテンツ管理システムの画像が常に更新され、キャッシュされません。または、リアルタイムインタラクティブな要素を単一のページに追加することなどができます。どのような場合でも、サービス設定を更新して、キャッシュされないようにすることを知っておくのは良いことです。

ヒント

条件は、リクエストがどのように処理されるかを論理的にコントロールします。これは非常に強力です!条件についての詳細を読むことをお勧めします。

この例では、レシピインデックスページ (http://www.tacolabs.com/tacos/) の内の1ページがキャッシュされないようにします。2 つのウィジェット形式でこのページにリアルタイム情報を追加するとしましょう: 1 つは、タコスのレシピが表示された回数を示します。もう 1 つは、アルバカーキの、あるレストランでタコスが何個売れたかを示しています。条件付きで、ページがキャッシュされないようにすることで、訪問者が常に最新の情報を見ることができるようになります。

これをコントロールパネルできます。まず、新しいキャッシュ設定を作成して、Fastlyにどのページをキャッシュしないかを伝えます。次に、新しい条件を作成して、Fastly にいつこのキャッシュ設定を使用するのかを伝えます。

Edit configuration ボタンをクリックして、サーバーを複製し、新しいドラフトバージョンを作成しましょう。次に、Settings ページで Create cache setting をクリックします。以下のように、フィールドにすべて入力します。必ず ActionPass に設定してください。

Fastly コントロールパネルでキャッシュ設定を作成する

Create をクリックしてキャッシュ設定を作成し、その後 Attach a condition をクリックします。以下のように、フィールドにすべて入力します。この条件は、req.url と呼ばれる VCL 変数を確認することで機能します。変数が、タコスレシピインデックページのパスに設定されている場合、この条件がキャッシュ設定を適用し、キャッシュしないでリクエストをパスします。

ヒント

最初の VCL 変数を使用することになります。大きなステップです。しかし、VCL とは何でしょうか、また、変数とは何でしょうか?調べてみましょう!Fastly CDN は、オープンソースの Varnish ソフトウェアをベースにしています。Fastly サービスが実行することにはすべて、Varnish Configuration Language (VCL) の Fastly によって変更されたバージョンが使用されています。実は、このチュートリアル全体を通して、私たちは Fastly コントロールパネルを使用して Fastly サービスの VCL コードを修正しているんです。コントロールパネルによってその複雑さは隠れていますが、背後では設定が取り込まれ、それを使ってカスタム VCL コードが生成されており、サービス設定を有効にするたびにこのコードが使用されているのです。VCLコードは、Web サイトのオブジェクトをいつ、どのようにキャッシュするかを Fastly に伝えています。チュートリアルでは、サービス設定に高度なロジックを実装するため、カスタム VCL コードを記述しなければならない段階に入っています。VCL の詳細についてはドキュメント確認し、Fastly Fiddle を使用して試すことができます。

Fastly コントロールパネルでキャッシュ条件を作成する

Save and apply to Non-cacheable content をクリックします。次に、Activate をクリックして、サービス設定を有効化します。もう一度 purge all を実行すると (前のセクションの指示に従ってください)、新しいキャッシュ設定と条件が有効になります。curl コマンドを使用して確認することができます:

$ curl -svo /dev/null -H "Fastly-Debug:1" https://tacolabs.global.ssl.fastly.net/tacos/

出力は、以下のようになります:

< HTTP/2 200
< x-amz-id-2: lSWEBpWjnJqWvUpaCYRGHcJcnau/qMIlnu1ranRqgRgGB+O6Tj+EPURc6mx6Uxf7/n1YFt7bNJc=
< x-amz-request-id: F46TZ9RP94DM9SFW
< last-modified: Fri, 23 Jul 2021 21:54:38 GMT
< etag: "9f61cab2ab8c1347259ac814ff3068c9"
< content-type: text/html
< server: AmazonS3
< accept-ranges: bytes
< via: 1.1 varnish, 1.1 varnish
< cache-control: no-store, max-age=0
< date: Fri, 29 Oct 2021 20:54:33 GMT
< x-served-by: cache-mdw17349-MDW, cache-bur17526-BUR
< x-cache: MISS, MISS
< x-cache-hits: 0, 0
< x-timer: S1635540873.002019,VS0,VE154
< vary: Accept-Encoding
< strict-transport-security: max-age=300
< content-length: 2807

前の出力と同じですね。しかし、x-cachex-cache-hitsヘッダーを確認してください。これらは、curl コマンドの繰り返しの実行時には変更されません。ページがキャッシュされていれば、x-cache ヘッダーに HIT と表示されます。


翻訳についての注意事項
このガイドは役に立ちましたか?

このフォームを使用して機密性の高い情報を送信しないでください。サポートが必要な場合は、サポートチームまでご連絡ください。このフォームは reCAPTCHA によって保護されており、Google のプライバシーポリシー利用規約が適用されます。