4. キャッシュの設定

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

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

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

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

どのように、いつ、キャッシュからコンテンツをパージする必要があるかを考えてみましょう。考え得る 3 つのシナリオがあります:

  • 新しいコンテンツの追加
  • コンテンツの改良
  • コンテンツの削除

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

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

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

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

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

1
2
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 ブラウザgaのオブジェクトをキャッシュするように伝えることができます。

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

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

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< 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 がサービスを中断している場合、FastlFastly は、Taco Labs からキャッシュされたコンテンツを提供することができます。これにより、オリジンサーバーの停止を軽減することができます。ただし、オリジンサーバーが停止する前に、この機能を有効にしなければなりません。

Edit configuration ボタンをクリックして、サーバーをクローンし、新しいドラフトバージョンを作成しましょう。次に、「設定」ページで、下記のように、オリジンサーバーの障害に関する失効済みコンテンツを提供するの横にあるオンスイッチをクリックします。

Fastly コントロールパネルでのオリジンサーバーの障害に関する失効済みコンテンツを有効にする

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

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

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

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

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

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

Edit configuration ボタンをクリックして、サーバーをクローンし、新しいドラフトバージョンを作成しましょう。では、「設定」ページで、キャッシュ設定を作成するボタンをクリックします。以下のように、フィールドにすべて入力します。必ず ActionPass に設定してください。

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< 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が表示されます。



Back to Top