4. キャッシュを設定する

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

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

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

ワークフローにおけるキャッシュとパージの動作

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

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

コンテンツを修正・削除する場合については明白です。1つのレシピを修正した場合には、ページの 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 ブラウザにはオブジェクトを一切キャッシュしないように伝えることができます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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/

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

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

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