Cloud CDN เป็นส่วนสำคัญของApp Hostingการรองรับเว็บแอปของคุณ คำขอทุกรายการที่ส่งไปยังแบ็กเอนด์จะผ่าน Cloud CDN ก่อน ระบบจะแสดงเนื้อหาที่แคชไว้ใน CDN ให้ผู้ใช้ทันที โดยไม่ต้องไปที่บริการ Cloud Run ที่เรียกใช้โค้ดเซิร์ฟเวอร์ของเว็บแอป ดูข้อมูลเพิ่มเติมเกี่ยวกับ ประโยชน์ทั่วไปของ CDN ได้ที่ web.dev
แม้ว่าการกำหนดค่า Cloud CDN ขั้นพื้นฐานจะตั้งค่าโดย App Hosting และแก้ไขไม่ได้ แต่คุณก็ทำหลายอย่างเพื่อเพิ่มประสิทธิภาพการแคชได้ เพื่อเพิ่มความเร็วในการโหลดหน้าเว็บ ลดเนื้อหาที่ไม่มีการแคชที่เรียกเก็บเงิน และลดการเข้าชม Cloud Run
เนื้อหาที่แคชได้
Cloud CDN จะจัดเก็บการตอบกลับไว้ในแคชหากเงื่อนไขต่อไปนี้ทั้งหมดเป็นจริง
คำขอเป็น GET
การตอบกลับมีรหัสสถานะ
200,203,204,206,300,301,302,307,308,404,405,410,421,451หรือ501การตอบกลับมีส่วนหัว
Cache-Controlที่มีคำสั่งmax-ageหรือs-maxageหรือส่วนหัวExpiresที่มีแสตมป์เวลาในอนาคตการตอบกลับมีส่วนหัว
Ageหรือส่วนหัวCache-Controlที่มี คำสั่งpublicที่ชัดเจนคำตอบมีขนาดไม่เกิน 10 MiB
และไม่มีข้อใดต่อไปนี้เป็นจริง
การตอบกลับมีส่วนหัว
Set-Cookieการตอบกลับมีส่วนหัว
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การตอบกลับมีส่วนหัว
Cache-Controlที่มีคำสั่งno-storeหรือprivateคำขอมีส่วนหัว
Cache-Controlที่มีคําสั่งno-storeคำขอมีส่วนหัว
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 จะแสดงไบต์ที่แคชและไม่ได้แคชที่แสดง และมีเครื่องหมาย สำหรับการเปิดตัวแต่ละครั้ง คุณสามารถใช้กราฟนี้เพื่อวัดประสิทธิภาพของ ความพยายามในการเพิ่มประสิทธิภาพแคช
นอกจากนี้ คุณยังดูอัตราการเข้าชมแคชสำหรับเส้นทางที่เฉพาะเจาะจงในเว็บแอปได้ด้วยการตรวจสอบตามเส้นทาง