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 จะแสดงไบต์ที่แคชและไม่ได้แคชที่แสดง และมีเครื่องหมาย สำหรับการเปิดตัวแต่ละครั้ง คุณสามารถใช้กราฟนี้เพื่อวัดประสิทธิภาพของ ความพยายามในการเพิ่มประสิทธิภาพแคช