แคชเนื้อหาแอป

Cloud CDN เป็นส่วนสำคัญของการสนับสนุน App Hosting สำหรับเว็บแอปของคุณ คำขอทุกรายการที่ส่งไปยังแบ็กเอนด์จะผ่าน Cloud CDN ก่อน ระบบจะแสดงเนื้อหาที่แคชไว้ใน CDN ให้ผู้ใช้ทันที โดยไม่ต้องไปที่บริการ Cloud Run ที่เรียกใช้โค้ดเซิร์ฟเวอร์ของเว็บแอป ดูข้อมูลเพิ่มเติมเกี่ยวกับ ประโยชน์ทั่วไปของ CDN ได้ที่ web.dev

แม้ว่าการกำหนดค่า Cloud CDN ขั้นพื้นฐานจะตั้งค่าโดย App Hosting และแก้ไขไม่ได้ แต่คุณก็ทำหลายอย่างเพื่อเพิ่มประสิทธิภาพการแคชได้เพื่อเพิ่มความเร็วในการโหลดหน้าเว็บ ลดเนื้อหาที่ไม่ได้แคชซึ่งเรียกเก็บเงิน และลดการเข้าชม Cloud Run

เนื้อหาที่แคชได้

Cloud CDN จะจัดเก็บการตอบกลับไว้ในแคชหากเงื่อนไขต่อไปนี้ทั้งหมดเป็นจริง

  1. คำขอเป็น GET

  2. การตอบกลับมีรหัสสถานะเป็น 200, 203, 204, 206, 300, 301, 302, 307, 308, 404, 405, 410, 421, 451 หรือ 501

  3. การตอบกลับมีส่วนหัว Cache-Control ที่มี คำสั่ง max-age หรือ s-maxage หรือส่วนหัว Expires ที่มี การประทับเวลาในอนาคต

  4. การตอบกลับมีส่วนหัว Age หรือส่วนหัว Cache-Control ที่มีคำสั่ง public ที่ชัดเจน

  5. คำตอบมีขนาดไม่เกิน 10 MiB

และไม่มีข้อใดต่อไปนี้เป็นจริง

  1. การตอบกลับมีส่วนหัว Set-Cookie

  2. การตอบกลับมีส่วนหัว Vary ที่มีค่าอื่นที่ไม่ใช่ 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

  3. การตอบกลับมีส่วนหัว Cache-Control ที่มีคำสั่ง no-store หรือ private

  4. คำขอมีส่วนหัว Cache-Control ที่มีคำสั่ง no-store

  5. คำขอมีส่วนหัว Authorization เว้นแต่การตอบกลับจะมีคำสั่งควบคุมแคชที่ชัดเจน

ปรับแต่งลักษณะการทำงานด้วยคำสั่งควบคุมแคช

Next.js

Next.js ตั้งค่าคำสั่งการควบคุมแคชโดยนัยตามปัจจัยหลายอย่าง อย่างไรก็ตาม คุณสามารถ ลบล้างค่าเหล่านี้ได้โดยตั้งค่าส่วนหัวด้วยตนเองในไฟล์ next.config.js เช่น หากต้องการให้มั่นใจว่าระบบจะไม่แคชหน้าเว็บใน Cloud CDN ให้ทำดังนี้

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

Angular

SSR ของ Angular ไม่ได้ตั้งค่าคำสั่ง Cache-Control ที่ชัดเจนตั้งแต่แรก คุณเพิ่มได้โดยระบุส่วนหัว Cache-Control ในเส้นทางเซิร์ฟเวอร์ เช่น หากต้องการอนุญาตให้ Cloud CDN แคชหน้าเว็บทั้งหมดเป็นเวลา 1 ชั่วโมง ให้ทำดังนี้

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',
    }
  }
];

คำสั่งที่ระบบเคารพ

อินสแตนซ์ Cloud CDN ของ Firebase App Hosting จะปฏิบัติตามคำสั่งควบคุมแคชต่อไปนี้

คำสั่ง คำขอ การตอบสนอง
no-store หากมีอยู่ในคำขอ ระบบจะไม่แคชการตอบกลับ ระบบจะไม่แคชคำตอบที่มี no-store
no-cache ระบบจะไม่สนใจคำสั่งขอ no-cache เพื่อป้องกันไม่ให้ไคลเอ็นต์เริ่มหรือบังคับให้ตรวจสอบซ้ำไปยังต้นทาง ระบบจะแคชการตอบกลับที่มี no-cache แต่ต้องตรวจสอบอีกครั้งกับต้นทางก่อนแสดง
public ไม่มี คำสั่งนี้ไม่จำเป็นสำหรับการแคช แต่เป็นแนวทางปฏิบัติแนะนำในการรวมไว้สำหรับเนื้อหาที่ควรแคชโดยพร็อกซี
private ไม่มี Cloud CDN จะไม่แคชการตอบสนองที่มีคำสั่ง private แม้ว่าการตอบสนองนั้นจะถือว่าแคชได้ก็ตาม ไคลเอ็นต์ (เช่น เบราว์เซอร์) อาจยังแคชผลลัพธ์อยู่ ใช้ no-store เพื่อป้องกันไม่ให้แคชการตอบกลับทั้งหมด
max-age=SECONDS ระบบจะไม่สนใจคำสั่งขอ max-age ระบบจะแสดงการตอบกลับที่แคชไว้ราวกับว่าไม่ได้รวมส่วนหัวนี้ไว้ในคำขอ การตอบกลับที่มีคําสั่ง max-age จะได้รับการแคชนานสูงสุดตามจำนวนวินาทีที่กำหนด
s-maxage=SECONDS ไม่มี การตอบกลับที่มีคําสั่ง s-maxage จะได้รับการแคชนานสูงสุดตามจำนวนวินาทีที่กำหนด หากมีทั้ง max-age และ s-maxage Cloud CDN จะใช้ s‑maxage ระบบจะไม่แสดงการตอบกลับที่มีคำสั่งนี้เป็นข้อมูลที่ล้าสมัย s-max-age (ขีดกลาง 2 ขีด) ไม่ถูกต้องสำหรับการแคช
max-stale=SECONDS max-stale คำสั่งคำขอจะกำหนดความเก่าสูงสุด (เป็นวินาที) ที่ไคลเอ็นต์ยินดีที่จะยอมรับ Cloud CDN จะปฏิบัติตามนี้และแสดงผลการตอบสนองที่แคชไว้ซึ่งล้าสมัยก็ต่อเมื่อความล้าสมัยของการตอบสนองน้อยกว่าคำสั่ง max-stale มิเช่นนั้น ระบบจะตรวจสอบอีกครั้งก่อนที่จะแสดงคำขอ ไม่มี
stale-while-revalidate=SECONDS ไม่มี ระบบจะแสดงการตอบกลับที่มี stale-while-revalidate ต่อไคลเอ็นต์เป็นเวลาสูงสุด SECONDS ขณะที่การตรวจสอบซ้ำเกิดขึ้นแบบไม่พร้อมกัน
must-revalidate ไม่มี ระบบจะตรวจสอบการตอบกลับที่มี must-revalidate อีกครั้งกับเซิร์ฟเวอร์ต้นทางหลังจากที่หมดอายุ ระบบจะไม่แสดงการตอบกลับที่มีคำสั่งนี้เป็นข้อมูลที่ล้าสมัย
proxy-revalidate ระบบจะตรวจสอบการตอบกลับที่มี proxy-revalidate อีกครั้งกับเซิร์ฟเวอร์ต้นทางหลังจากที่หมดอายุ ระบบจะไม่แสดงการตอบกลับที่มีคำสั่งนี้เป็นข้อมูลที่ล้าสมัย
no-transform ไม่มี Cloud CDN จะไม่ใช้การเปลี่ยนรูปแบบใดๆ

วัดการเข้าชมที่แคชและไม่ได้แคช

กราฟ "Cloud CDN - แบนด์วิดท์ขาออก" ในแท็บการใช้งานของคอนโซลApp Hosting จะแสดงไบต์ที่แคชและไม่ได้แคชที่แสดง และมีเครื่องหมาย สำหรับการเปิดตัวแต่ละครั้ง คุณสามารถใช้กราฟนี้เพื่อวัดประสิทธิภาพของ ความพยายามในการเพิ่มประสิทธิภาพแคช