【Web技術】353- CDN 科普

點擊上方「前端自習課」關注，學習起來~

1、概述

1.1 含義

CDN 的全稱是 Content Delivery Network，即內容分發網絡。CDN 是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，經過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，下降網絡擁塞，提升用戶訪問響應速度和命中率。CDN 的關鍵技術主要有內容存儲和分發技術。—— 摘自《百度百科》

名詞解釋：

• Origin Server：源站，源服務器

• User：訪問者

• Edge Server：CDN 的服務器

1.2 核心技術點

• 內容存儲技術

• 內容分發技術

• 負載均衡技術

1.3 CDN 優點

• 加速：基於 CDN 各節點，就近獲取內容

• 下降負載：基於 CDN 緩存，減小源站的訪問

• 成本低：費用成本、部署成本

• 可擴展性強：基於邊緣計算

2、原理

2.1 流程圖

簡化版流程圖

圖片來源 AWS

相對「完整版」流程圖

圖片來源 阿里雲

2.2 緩存原理

看個 PHP 緩存的例子：

<?php
$result = Cache::remember('url', 100, function () {
    return 'Hello world...';
});

大多數的緩存原理如上面例子，基於 URL 的維度進行 Hash 運算後生成惟一的字符，基於該字符進行緩存的獲取與存儲。

當涉及靜態資源的更新操做的時候，更多的除了使用 URL 維度外，還會依靠附加參數的形式，進行 CDN 緩存的「更新」。但這個「更新」實際是靜態資源生成新的 CDN 緩存。

總結

在實際的應用中，HTTP 請求的任何參數都可做爲 CDN 緩存的維度，用來組合 Hash 生成惟一字符。

這些維度包括 URL、參數、Header等。但維度的增長也一樣意味着 CDN 緩存命中率的下降。

咱們來看個例子：

1. https://docs.flc.io/favicon.ico

2. https://docs.flc.io/favicon.ico?v=1

3. https://docs.flc.io/favicon.ico?v=1&b=2

4. https://docs.flc.io/favicon.ico?b=2&v=1

以上 4 種狀況，如首次訪問，即便資源相同，但由於參數的緣由， CDN 緩存均未命中。

基於第 三、4 點，有些 CDN 服務商還額外支持參數排序後在 Hash，目的就是爲了提升命中率。

2.3 Response Headers

大多數 CDN 服務商會在資源請求的 Response Headers 中輸出一些涉及緩存命中、CDN 節點、Hash字符、過時時間等信息。

如圖：

2.4 刷新預熱

刷新（即：清理 CDN 緩存）

經過提供文件 URL 或目錄的方式，強制CDN節點回源拉取最新的文件。

預熱

將指定的內容主動預熱到 CDN 的節點上，用戶首次訪問便可直接命中緩存，下降源站壓力。

通常大規模遷移的時候，會使用到

2.5 CDN 常見功能

1. 自定義緩存過時時間規則：支持配置自定義資源的緩存過時時間規則, 支持指定路徑或者文件名後綴方式, 支持 Header 輸出緩存過時時間

2. 自定義 header 頭：如 Access-Control-Allow-Origin: * 以實現跨域

3. 自定義頁面：支持設置40四、40三、50三、504等頁面

4. 頁面優化：去除HTML頁面頁面冗餘內容如註釋以及重複的空白符

5. 智能壓縮：對靜態文件類型進行壓縮, 有效減小用戶傳輸內容大小

6. 訪問控制：Refer防盜鏈、IP 黑/白名單等

7. HTTPS 支持

8. 統計分析、日誌管理

9. 人工智能服務：識圖、鑑黃等

腦回路時間

依靠第以上幾點，能實現哪些應用？

3、實例說明

3.1 靜態資源加速

這個你們都懂，就不細說

3.2 後端加速（緩存）—— 自定義緩存時間

• http://cdn.flccent.com/

含 CDN 但未命中：

<?php
echo 'Hello World!!!!!~';

設置 10s 的 CDN 緩存：

<?php
header('expires: '.date('D, d M Y H:i:s e', time() + 10));
echo 'Hello World!!!!!~';

以上例子爲阿里雲 CDN，具體設置緩存過時時間，請參照 CDN 服務商文檔進行設置。

對於動態文件（eg：php | jsp | asp），建議設置緩存時間爲 0s，即不緩存；若動態文件例如 php 文件內容更新頻率較低，推薦設置較短緩存時間

—— 摘自《阿里雲說明文檔》

參考文檔：

• 服務器端設置過時時間：https://help.aliyun.com/knowledge_detail/40080.html?spm=a2c4g.11186623.2.12.33ad45e56FKahB

4、邊緣計算

4.1 什麼是邊緣計算

圖片來源 AWS

邊緣計算是指在靠近物或數據源頭的一側，採用網絡、計算、存儲、應用核心能力爲一體的開放平臺，就近提供最近端服務。其應用程序在邊緣側發起，產生更快的網絡服務響應，知足行業在實時業務、應用智能、安全與隱私保護等方面的基本需求。邊緣計算處於物理實體和工業鏈接之間，或處於物理實體的頂端。而云端計算，仍然能夠訪問邊緣計算的歷史數據。

4.2 實例說明：圖片 WEBP 原理

關鍵詞

• Request Headers: Accept:image/webp

• 函數計算（阿里雲）、Lambda（AWS）等

• 內容存儲：OSS（阿里雲），S3（AWS）等 —— 可選

大體原理

• 開啓 CDN Header - Accept 回源

• 獲取 Request Headers 中 Accept 中包含 image/webp（即爲支持webp）

• 經過邊緣計算方式，經過源站獲取對應素材轉換爲 webp 格式，並存儲至對應 CDN 節點

• 用戶經過 CDN 輸出對應格式

圖片大多數源站均爲 OSS、S3 等內容存儲服務，而非具體服務器

服務說明

• HTTP Headers Accept

  Accept 請求頭用來告知客戶端能夠處理的內容類型，這種內容類型用 MIME 類型來表示。藉助內容協商機制, 服務器能夠從諸多備選項中選擇一項進行應用，並使用 Content-Type 應答頭通知客戶端它的選擇。瀏覽器會基於請求的上下文來爲這個請求頭設置合適的值，好比獲取一個CSS層疊樣式表時值與獲取圖片、視頻或腳本文件時的值是不一樣的。

• Lambda

  經過 AWS Lambda，無需預置或管理服務器便可運行代碼。您只需按使用的計算時間付費 – 代碼未運行時不產生費用。

  藉助 Lambda，您幾乎能夠爲任何類型的應用程序或後端服務運行代碼，並且徹底無需管理。只需上傳您的代碼，Lambda 會處理運行和擴展高可用性代碼所需的一切工做。您能夠將您的代碼設置爲自動從其餘 AWS 產品觸發，或者直接從任何 Web 或移動應用程序調用。

  支持語言：Node.js/Python/Java/Go/C#/PowerShell/Ruby

5、相關文檔

• 名詞解釋：https://help.aliyun.com/document_detail/27102.html?spm=a2c4g.11186623.6.547.49af777dDujQhC

• HTTP / 1.1頭字段的語法和語義：https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html

via：https://docs.flc.io/devops/cdn/

▼

原創系列推薦

▼

4. 

5. 

6. 

7. 

點這，與你們一塊兒分享本文吧