アプリのコンテンツをキャッシュに保存する

Cloud CDN は、ウェブアプリの App Hosting のサポートの重要な部分です。バックエンドへのリクエストはすべて、最初に Cloud CDN を通過します。CDN にすでにキャッシュ保存されているコンテンツは、ウェブアプリのサーバーコードを実行している Cloud Run サービスへのアクセスをスキップして、ユーザーにすぐに返されます。CDN の一般的なメリットについては、web.dev をご覧ください。

基本的な Cloud CDN 構成は App Hosting によって設定され、変更できませんが、キャッシュを最適化してページ読み込み速度を向上させ、課金対象のキャッシュ未保存コンテンツを減らし、Cloud Run へのトラフィックを最小限に抑えるために、さまざまな方法があります。

キャッシュに保存可能なコンテンツ

次の条件がすべて true の場合、Cloud CDN はレスポンスをキャッシュに保存します。

1. リクエストが GET である

2. レスポンスのステータス コードが 200、203、204、206、300、301、302、307、308、404、405、410、421、451、501 のいずれかである。

3. レスポンスには、max-age または s-maxage ディレクティブを含む Cache-Control ヘッダー、あるいは将来のタイムスタンプを含む Expires ヘッダーがあります。

4. レスポンスには、Age ヘッダーまたは明示的な public ディレクティブを含む Cache-Control ヘッダーがあります。

5. レスポンスのサイズが 10 MiB 以下である。

また、次のいずれにも該当しない:

1. レスポンスに Set-Cookie ヘッダーがある

2. レスポンスに、Accept、Accept-Encoding、Access-Control-Request-Headers、Access-Control-Request-Method、Origin、Sec-Fetch-Dest、Sec-Fetch-Mode、Sec-Fetch-Site、X-Goog-Allowed-Resources、X-Origin、RSC、Next-Router-State-Tree、Next-Router-Prefetch、Next-Router-Segment-Prefetch 以外の値が設定された Vary ヘッダーがある。

3. レスポンスには、no-store または private ディレクティブを含む Cache-Control ヘッダーがあります。

4. リクエストに no-store ディレクティブを含む Cache-Control ヘッダーがある。

5. リクエストに Authorization ヘッダーがある。ただし、レスポンスに明示的なキャッシュ制御ディレクティブがある場合を除きます。

キャッシュ制御ディレクティブで動作をカスタマイズする

  /** @type {import('next').NextConfig} */
  const nextConfig = {
      headers: async () => [{
          source: "/YOUR_PRIVATE_PAGE",
          headers: [{
              key: "Cache-Control",
              value: "private"
          }],
      }],
  };

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: '**',
    renderMode: RenderMode.Prerender,
    headers: {
      'Cache-Control': 'public, max-age=3600',
    }
  }
];

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  // ... other routes
  {
    path: 'YOUR_PRIVATE_PAGE',
    renderMode: RenderMode.Server,
    headers: {
      'Cache-Control': 'private',
    }
  }
];

尊重されるディレクティブ

Firebase App Hosting の Cloud CDN インスタンスは、次のキャッシュ制御ディレクティブを尊重します。

キャッシュに保存されたトラフィックとキャッシュに保存されていないトラフィックを測定する

App Hosting コンソールの [使用量] タブの [Cloud CDN - 送信帯域幅] グラフには、キャッシュに保存されたバイト数とキャッシュに保存されていないバイト数が表示され、各ロールアウトのマークが表示されます。このグラフを使用して、キャッシュの最適化の取り組みの効果を測定できます。

ルートベースのモニタリングを使用して、ウェブアプリ内の特定のルートのキャッシュ ヒット率を表示することもできます。