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

HTTP キャッシュ動作の構成

Jeff Posnick

この Codelab では、API によって返される HTTP キャッシュヘッダーを Express サービングを実行する Node.js ベースのウェブサーバー説明します。また、想定しているキャッシュ動作が動作していることを確認する方法も紹介します。実際に適用されています。Chrome の DevTools の [Network] パネルを使用します。

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

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

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 を追加してください。さらに次の 2 つの追加のレスポンスヘッダーのいずれかを設定することをおすすめします。 Last-Modified または ETag。「 index.html はこのカテゴリに分類されます。これは 2 つのステップに分けることができます。

まず、Last-Modified ヘッダーと ETag ヘッダーは、 etag および lastModified 構成オプションが含まれます。実際には、どちらのオプションもデフォルトで true に設定されます。ため、現在の設定では HTTP レスポンスを受け取るためのオプトインは不要です。確認します。いずれにしても、構成で明示的に指定することは可能です。

次に、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 のリクエストに対応する場合: 「fingerprint」またはバージョニング情報、およびその内容が変更されることを想定さないものについては、 Cache-Control: max-age=31536000。app.15261a07.js と style.391484cf.css はこのカテゴリに分類されます。

Google Cloud の setHeaders function 使用した場合は、ロジックを追加して、指定した条件がバージョニングされた URL に対するリクエストであり、その場合は Cache-Control: max-age=31536000 ヘッダーを追加します。

これを行う最も確実な方法は、正規表現リクエストしたアセットが、リクエストした特定のパターンに一致するかどうかを確認できます理解できますこのサンプルプロジェクトの場合は、常に 8 個です。数字の 0 ～ 9 と小文字の a ～ f（例: 16 進数）。ハッシュは必ず両側に . 文字で区切られます。

正規表現でルールと 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 Network] パネルを開いた状態でライブアプリをプレビューして、正しいヘッダーが設定されていることを確認します。

サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 。
表示される列をカスタマイズ情報を選択してパネル内を右クリックして、次の列ヘッダーを追加します。

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

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

DevTools で [ネットワーク] パネルを開き、ページを更新します。

ページの読み込みが完了すると、[Network] パネルに、次のようになります。

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

最初の行は、先ほど開いた HTML ドキュメント用です。これは適切な Cache-Control: no-cache とともに提供されます。そのリクエストの HTTP レスポンスステータス 304 である。このキャッシュされた HTML をブラウザがすぐに使用せず、 Last-Modified と ETag を使用してウェブサーバーに HTTP リクエストを行った既存の HTML への更新の有無を確認します。キャッシュに保存します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 の手順を終えたので、 Express を使用して Node.js ベースのウェブサーバーで HTTP レスポンスヘッダーを構成する HTTP キャッシュを最適に使用する方法について説明します確認が必要な手順もあります想定されるキャッシュ動作が使用されていることを、Google Cloud の Chrome の DevTools。