CDN 類型以及如何設置（Vue、React）
什麼是 CDN？ Cloudflare 在這裡有一個很好的解釋：https://www.cloudflare.com/learning/cdn/what-is-a-cdn/
簡而言之：
你們中的許多人都通過使用各種 3rd 方資源來了解 CDN，例如字體、css、某些 javascript 庫（例如用於安全支付的 Stripe 庫）。
在本文中，我們將快速了解幾種 CDN 類型以及您在自己設置 CDN 時可能遇到的潛在優缺點。
Cloudflare 是目前最好的 CDN 之一，我將它用於各種登錄頁面。它也是一個很棒的 DNS 配置服務，提供了豐富的 API。但是，最好了解還有哪些其他類型的 CDN 以及哪種最適合您。
CDN 類型
所有 CDN 都有不同的優缺點，所有解決方案都試圖實現相同的目標：更快地加載內容。
帶緩存的反向代理
你會在野外遇到的一些 CDN 類型：
- Cloudflare 類型的代理將所有傳入流量轉發到您的源服務器並儘可能多地進行緩存。優點：
- 易於使用。您的應用程序不必知道 CDN 本身。如果您使用 Cloudflare 作為 DNS 提供商，您只需單擊該按鈕，他們的服務器就會開始攔截所有流量並將其緩存。最重要的是，他們提供了許多其他有用的服務，例如防火牆、可以重定向的“頁面規則” 缺點：
- 可能緩存過多（推送後看不到更新，因為 index.html 也被緩存了）。
- 由於它們正在終止連接，如果它們與您的 DNS 控制一起出現故障，恢復將變得更加困難。
- 您缺乏控制權以及允許第 3 方為您終止 TLS 的潛在安全隱患。
推送CDN
推送CDN 是您將資產上傳到服務器（或一組服務器）的設置。此類 CDN 的一個示例是 Google Cloud CDN。在此設置中，您必須創建一個負載均衡器和一個存儲桶，並將您的內容資產上傳為構建前端應用程序的 CI/CD 管道的一部分。在此設置中，您需要創建一個新域，例如 cdn.example.com 指向您的 CDN 存儲位置。
優點：
- 您仍然可以控制 TLS 終止，並更好地了解何時呈現的內容。如果您的前端應用對靜態資產使用唯一 ID，例如
/js/chunk-2d22502a.0844b32d.js. - 主文件index.html 由您的服務器提供服務，因此它始終可以指向最新的 js/css 文件。
- 您可以準確了解推送到 CDN 的內容。
缺點：
- 您的 CI/CD 管道中的新步驟可能會失敗。如果您的前端已部署但資產未能同步，您的用戶可能會遇到很多錯誤。您還需要確保不會簡單地覆蓋 CDN 靜態文件（因為您可能會在舊的前端應用仍在使用以前的文件時覆蓋它們）。
沒有 CDN
沒有 CDN，只需在您的 Web 服務器上緩存控制標頭。此選項可能適用於許多情況，但是，如果用戶遠離您的服務器位置並且您有很多靜態資產，則第一次加載可能會很痛苦。
結合優化的資產大小、PWA 工作者和正確的緩存標頭，這仍然是一個有效的選項。
拉取CDN
像 BunnyCDN（附屬鏈接，優質服務）這樣的 CDN 從您的源服務器中提取，但不要嘗試代理您的所有流量。在這種情況下，您提供 index.html 然後通過 CDN 域而不是您自己的域加載資產。同樣，與“推送 CDN”類型一樣，您必須從 cdn.example.com 提供資產 ，或者如果你有一個花哨的全局負載均衡器，你可以配置某些路徑直接從 CDN 服務器加載文件。
優點：
- 易於使用。從“設置”的角度來看，感覺就像 Cloudflare。您只需向其提供您的 Web 服務器的地址，然後可以選擇配置您的域。它將提取資產並顯示不錯的統計數據。
- 定價。在提供優質服務的同時，它似乎比其他 CDN 便宜很多。他們的定價頁面上有一些比較信息：https://bunnycdn.com/pricing，但是您需要自己測試它，因為它很可能取決於您的內容。
缺點：
- 需要確保您的資產在文件名中包含唯一的構建 ID，這樣您就不會提供過時的內容。幸運的是，大多數現代 javascript 轉譯器默認執行此操作，因此在我使用 Vue.js 的情況下，我不必在這方面做任何事情。
- 如果 CDN 出現故障，即使您的 index.html 已加載，您的資產也會失敗。但是，在這種情況下，您仍然可以快速將資產域更改為您的主 Web 服務器。
在 SPA 中設置 BunnyCDN（拉式 CDN）
我無法立即發現文檔，但如果您不是第一次這樣做，那很簡單：
- 創建一個“拉區”。您將獲得作為原始 Web 服務器的反向代理的拉區域：
- （可選但推薦）從您的域創建一個 CNAME 到分配的拉區域（在我們的例子中是 cdn.webhookrelay.com -> webhookrelay.b-cdn.net ）。這使您能夠從您的域名加載資產。
- 更新您的 webpack 配置以添加資產文件前綴。 vue.config.js 的示例是：
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? 'https://cdn.your-domain-here.com/' : '/',
}
就是這樣，生成的資產都將具有通過 CDN 加載的前綴。如果您使用 Nginx 為您的應用程序提供服務，請確保您為 js 和 css 文件提供正確的標頭。例如：
location ~* \.(?:css|js)$ {
expires 1y;
add_header Cache-Control "public";
access_log off;
}
我希望您在決定為您的網站添加 CDN 時會發現這很有用！
最初發佈在 Webhook Relay 博客上：https://webhookrelay.com/blog/2020/08/27/cdn-types-and-setup/
