HTTP キャッシュ動作の構成

この 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.jspublic/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=31536000app.15261a07.jsstyle.391484cf.css はこのカテゴリに分類されます。

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

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

正規表現で ルールと new RegExp('\\.[0-9a-f]{8}\\.') と表現できます。

  • 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 の構成ネットワーク パネル。

ここで注目すべき列は、NameStatusCache-Control です。 ETagLast-Modified

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

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

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

最初の行は、先ほど開いた HTML ドキュメント用です。これは適切な Cache-Control: no-cache とともに提供されます。そのリクエストの HTTP レスポンス ステータス 304 である。この キャッシュされた HTML をブラウザがすぐに使用せず、 Last-ModifiedETag を使用してウェブサーバーに HTTP リクエストを行った 既存の HTML への更新の有無を確認します。 キャッシュに保存しますHTTP 304 レスポンスは、更新された HTML がないことを示しています。

次の 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。