このページは Cloud Translation API によって翻訳されました。

HTTP キャッシュ動作の構成

Jeff Posnick

この Codelab では、Express サービングフレームワークを実行する Node.js ベースのウェブサーバーから返される HTTP キャッシュヘッダーを変更する方法について説明します。また、Chrome の DevTools の [ネットワーク] パネルを使用して、期待するキャッシュ動作が実際に適用されていることを確認する方法についても説明します。

サンプルプロジェクトに慣れる

サンプルプロジェクトで使用する主なファイルは次のとおりです。

server.js には、ウェブアプリのコンテンツを提供する Node.js コードが含まれています。Express を使用して HTTP リクエストとレスポンスを処理します。特に、express.static() は公開ディレクトリ内のすべてのローカルファイルを提供するために使用されるため、serve-static のドキュメントが役に立ちます。
public/index.html はウェブアプリの HTML です。ほとんどの HTML ファイルと同様に、URL の一部としてバージョニング情報は含まれません。
public/app.15261a07.js と public/style.391484cf.css は、ウェブアプリの JavaScript アセットと CSS アセットです。これらのファイルには、それぞれ内容に対応するハッシュが URL に含まれています。index.html は、読み込む特定のバージョニングされた URL を追跡します。

HTML のキャッシュヘッダーを設定する

バージョニング情報を含まない URL のリクエストに応答する場合は、レスポンスメッセージに Cache-Control: no-cache を追加してください。また、Last-Modified または ETag の 2 つのレスポンスヘッダーのいずれかを設定することをおすすめします。index.html はこのカテゴリに該当します。この作業は 2 つのステップに分けることができます。

まず、Last-Modified ヘッダーと ETag ヘッダーは、etag 構成オプションと lastModified 構成オプションによって制御されます。実際には、どちらのオプションもすべての HTTP レスポンスで true にデフォルトで設定されるため、現在の設定では、この動作を有効にする必要はありません。いずれにしても、構成で明示的に指定することは可能です。

次に、Cache-Control: no-cache ヘッダーを追加する必要がありますが、HTML ドキュメント（この場合は index.html）にのみ追加する必要があります。このヘッダーを条件付きで設定する最も簡単な方法は、カスタム setHeaders function を作成し、その中で受信したリクエストが HTML ドキュメントかどうかを確認することです。

[Remix to Edit] をクリックして、プロジェクトを編集可能にします。

server.js の静的サービング構成は、次のように開始されます。

app.use(express.static('public'));

上記の変更を行うと、次のような内容になります。

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

バージョニングされた URL のキャッシュヘッダーを構成する

「フィンガープリント」またはバージョニング情報が含まれ、コンテンツが変更されることがない URL のリクエストに応答する場合は、レスポンスに Cache-Control: max-age=31536000 を追加します。app.15261a07.js と style.391484cf.css はこのカテゴリに該当します。

前回のステップで使用した setHeaders function を基に、追加のロジックを追加して、特定のリクエストがバージョニングされた URL かどうかを確認し、バージョニングされている場合は Cache-Control: max-age=31536000 ヘッダーを追加できます。

最も堅牢な方法は、正規表現を使用して、リクエストされたアセットがハッシュが該当する特定のパターンと一致するかどうかを確認することです。このサンプルプロジェクトでは、0 ～ 9 の数字と小文字の a ～ f（16 進数）から常に 8 文字になります。ハッシュは常に両側が . 文字で区切られています。

これらの一般的なルールに一致する正規表現は new RegExp('\\.[0-9a-f]{8}\\.') で表すことができます。

注: 将来の問題を防ぐために、これらのルールを考えるときはできるだけ具体的にしておくと役立ちます。.js または .css のファイル拡張子のチェックなど、より一般的な一致条件を使用すると、バージョン管理されていない JavaScript アセットや CSS アセットをプロジェクトに追加する際に問題が発生する可能性があります。

setHeaders 関数を次のように変更します。

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

DevTools を使用して新しい動作を確認する

静的ファイルサーバーを変更したら、DevTools の [ネットワーク] パネルを開いてライブアプリをプレビューし、正しいヘッダーが設定されていることを確認します。

サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] を押します。
列見出しを右クリックして、ネットワークパネルに表示される列をカスタマイズし、最も関連性の高い情報を含めます。

DevTools の [ネットワーク] パネルの構成。

ここで注目すべき列は、Name、Status、Cache-Control、ETag、Last-Modified です。

DevTools の [Network] パネルを開いた状態で、ページを更新します。

ページが読み込まれると、[Network] パネルに次のようなエントリが表示されます。

ネットワークパネルの列。

最初の行は、移動した HTML ドキュメント用です。これは Cache-Control: no-cache で適切に提供されます。そのリクエストの HTTP レスポンスステータスは 304 です。これは、ブラウザがキャッシュに保存されている HTML をすぐに使用しないことを認識し、代わりに Last-Modified と ETag の情報を使用して、キャッシュにすでに保存されている HTML が更新されていないかどうかを確認するために、ウェブサーバーに HTTP リクエストを送信したことを意味します。HTTP 304 レスポンスは、HTML が更新されていないことを示します。

注: Cache-Control: no-cache は「キャッシュに保存されたコピーが使用されていない」ことを意味しません。これは、「常にサーバーを最初に確認し、HTTP 304 レスポンスがある場合はキャッシュに保存されたコピーを使用する」ことを意味します。

次の 2 行は、バージョニングされた JavaScript アセットと CSS アセット用です。Cache-Control: max-age=31536000 で提供され、各 HTTP ステータスが 200 になっているはずです。使用されている構成により、Node.js サーバーに実際のリクエストは送信されません。エントリをクリックすると、「（ディスクキャッシュから）」などのレスポンスの詳細が表示されます。

ネットワークレスポンスステータスが 200 の場合。

ETag 列と Last-Modified 列の実際の値はそれほど重要ではありません。重要なのは、設定されていることを確認することです。

まとめ

この Codelab の手順を完了すると、HTTP キャッシュを最適に使用するために、Express を使用して Node.js ベースのウェブサーバーで HTTP レスポンスヘッダーを構成する方法について理解しているはずです。また、Chrome の DevTools の [Network] パネルを使用して、想定どおりのキャッシュ動作が使用されていることを確認する手順もあります。