Azure CDN 為靜態網站建立內容分發網路

Grant_Allen發表於2021-04-25

一,引言

     最近剛剛接觸 Edi.Wang 的 Moonglade 部落格系統,正好這套系統中有使用到 Azure CND (內容分發網路),那就學習學習。那麼今天就嘗試利用 Azure CDN 來發布靜態網站。當然了,我們可以選擇Azure Storage Account 作為我們演示的靜態網站的載體。

什麼是 Azure CDN?

Azure CDN(內容分發網路):CDN 是伺服器的分散式網路,可以有效的將Web內容傳遞給我們,同時CDN 可以將快取的內容儲存在記錄我們比較近的POP(入網點位置)位置的邊緣伺服器,以便最大成都降低網路延遲。Azure 內容分發網路 (CDN) 可幫助減少延遲並提升高頻寬內容的效能。

二,正文

1,部署靜態網站

登陸到 Azure Portal 上,點選 “create a resource”,搜尋 “Storage”,並且建立

Azure CDN 為靜態網站建立內容分發網路

輸入相關引數

Resource group:“Web_Test_CDN_RG”(建立新的資源組)

Storage account name:“cdnstaticwebstorage”

Region:“East Asia”

performance:Standard

Redundancy:“Locally-redundant storage(LRS)”

點選 “Next:Advanced>”

Azure CDN 為靜態網站建立內容分發網路

其他選項卡頁直接選擇預設就可以了,等待驗證完成後,點選 “Create”

Azure CDN 為靜態網站建立內容分發網路

建立完成後,點選 “Go to resource” 跳轉到該資源

Azure CDN 為靜態網站建立內容分發網路

回到我們建立的Storage Account 頁面後,選擇 “Settings=》Static website”,開啟靜態站點

Azure CDN 為靜態網站建立內容分發網路

接下來,我們需要輸入靜態站點的相關引數

Index document name(靜態站點的首頁):“index.html”

Error document name(靜態站點的錯誤頁面):“404.html”

檢查完輸入的引數後,點選 “Save” 進行儲存

Azure CDN 為靜態網站建立內容分發網路

建立完成後,我們可以看到 Azure 已經建立了我們靜態站點寄存的 容器 “$web”

Azure CDN 為靜態網站建立內容分發網路

轉到 “Blob service=》Containers”,Azure 已經自動為我們建立了兩個容器 “$logs”,“$web”

Azure CDN 為靜態網站建立內容分發網路

選擇 “Settings=》Properties” 找到靜態站點的url 複製出來

Azure CDN 為靜態網站建立內容分發網路

我們嘗試通過 web url 訪問我們靜態站點:https://cdnstaticwebstorage.z7.web.core.windows.net/

可以看到當前是沒有任何請求的內容,那是因我們的靜態站點是沒有任何內容的

Azure CDN 為靜態網站建立內容分發網路

上傳我們的演示靜態頁面

Azure CDN 為靜態網站建立內容分發網路

重新訪問靜態網站的 url

Azure CDN 為靜態網站建立內容分發網路

ok,靜態網站部署完成

2,配置 Azure CDN 加速

繼續在 Azure Portal 首頁,搜尋 “CDN”,並且建立

Azure CDN 為靜態網站建立內容分發網路

輸入相關引數

Resource group:“Web_Test_CDN_RG”

Name:“cnbateblogweb-staticwebsite-cdn”

Region:“Global”

Pricing tier:“Standard Microsoft”

點選 “Review + create”

Azure CDN 為靜態網站建立內容分發網路

等待校驗完成後,點選 “Create” 進行建立

Azure CDN 為靜態網站建立內容分發網路

建立完成後,跳轉到 "cnbateblogweb-staticwebsite-cdn" 頁面,點選 “+ Endpoint” 建立 CDN 的終結點

Azure CDN 為靜態網站建立內容分發網路

輸入 Endpoint 的相關資訊

Name:“cnbateblogweb-staticwebsite”

Orign type 選擇:“Storage static website”

***這裡注意一下,Origin type 是支援多種的,我們也可以選擇 “Custom orgin”,然後把 Storage static website 的 URL 貼到 Origin hostname 和 Origin host header 這個位置上

點選 “Add” 新增操作

Azure CDN 為靜態網站建立內容分發網路

Azure CDN 為靜態網站建立內容分發網路

注意,終結點的設定可能需要差不多10分鐘才會生效,當生效之後,我們複製當前CDN 終結點 URL在瀏覽器中嘗試訪問

Azure CDN 為靜態網站建立內容分發網路

訪問後展示的效果

Azure CDN 為靜態網站建立內容分發網路

Bingo!!!成功?????????

三,結尾

     今天介紹的內容,大家可以參考 MS Learn 上的課程進行學習。下一篇我們繼續講解 Azure CDN 的其他功能,包括 動態站點加速、地理篩選、結合.NET Core Web 應用程式來分發內容網路。

參考連結: Azure 上的內容分發網路使用 Azure CDN 和 Blob 服務為網站建立內容分發網路

文章來自博主本人自己的部落格:https://allenmasters.com/post/2021/4/25/azure-cdn

歡迎大家關注博主的部落格:https://allenmasters.com/

作者:Allen 

版權:轉載請在文章明顯位置註明作者及出處。如發現錯誤,歡迎批評指正。

相關文章