教學課程：將 Azure 內容傳遞網路 新增至 Azure App 服務 Web 應用程式

本教學課程示範如何在 Azure App 服務 中將 Azure 內容傳遞網路 新增至 Web 應用程式。 Web 應用程式是裝載 Web 應用程式、REST API 和行動後端的服務。

以下是您使用的範例靜態 HTML 網站的首頁：

您學到的內容：

• 建立內容傳遞網路端點。
• 重新整理快取的資產。
• 使用查詢字串來控制快取的版本。

必要條件

完成本教學課程：

• 安裝 Git
• 安裝 Azure CLI

如果您沒有 Azure 訂閱，請在開始之前，先建立 Azure 免費帳戶。

建立 Web 應用程式

若要建立您使用的 Web 應用程式，請透過瀏覽至應用程式步驟，遵循靜態 HTML 快速入門。

登入 Azure 入口網站

開啟瀏覽器並登入 Azure 入口網站。

動態網站加速優化

如果您想要優化動態網站加速的內容傳遞網路端點 （DSA），您應該使用 內容傳遞網路入口 網站來建立設定檔和端點。 透過 DSA 優化，可測量動態內容的網頁效能。 如需如何從內容傳遞網路入口網站優化 DSA 的內容傳遞網路端點的指示，請參閱 內容傳遞網路端點組態，以加速動態檔案的傳遞。 否則，如果您不想優化新的端點，您可以使用 Web 應用程式入口網站來建立它，方法是遵循下一節中的步驟。 針對 來自 Edgio 配置檔的 Azure CDN，您無法在建立內容傳遞網路端點之後變更其優化。

建立內容傳遞網路配置檔和端點

在左側導覽中，選取 [應用程式服務]，然後選取您在靜態 HTML 快速入門中建立的應用程式。

在 [App Service] 頁面的 [設定] 區段中，選取 [網络 > Azure CDN]。

在 [Azure 內容傳遞網路] 頁面中，提供數據表中所指定的新端點設定。

設定	建議的值	描述
內容傳遞網路配置檔	myCDNProfile	內容傳遞網路配置檔是具有相同定價層的內容傳遞網路端點集合。
定價層	Microsoft 內容傳遞網路 （傳統）	定價 層 會指定提供者和可用的功能。
內容傳遞網路端點名稱	azureedge.net 網域中唯一的名稱	您可以在網域 <endpointname.azureedge.net> 存取快取的資源。

選取 [建立 ] 以建立內容傳遞網路配置檔。

Azure 會建立配置檔和端點。 新的端點會出現在 [端點 ] 清單中，並在布建時，狀態為 [正在執行]。

測試內容傳遞網路端點

因為註冊需要時間才能傳播，所以端點無法立即可供使用：

• 針對 來自 Microsoft （傳統） 配置檔的 Azure CDN 標準，傳播通常會在 10 分鐘內完成。
• 針對來自 Edgio 的 Azure CDN 標準版和來自 Edgio 配置檔的 Azure CDN 進階版，傳播通常會在 90 分鐘內完成。

範例應用程式具有包含 其他靜態資產的 index.html 檔案 和 css、 img 和 js 資料夾。 所有這些檔案的內容路徑在內容傳遞網路端點上都相同。 例如，下列兩個 URL 都會存取 css 資料夾中的bootstrap.css檔案：

http://<appname>.azurewebsites.net/css/bootstrap.css

http://<endpointname>.azureedge.net/css/bootstrap.css

瀏覽瀏覽器至下列 URL：

http://<endpointname>.azureedge.net/index.html

您會看到先前在 Azure Web 應用程式中執行的相同頁面。 Azure 內容傳遞網路 已擷取來源 Web 應用程式的資產，並從內容傳遞網路端點提供服務

若要確保此頁面會在內容傳遞網路中快取，請重新整理頁面。 有時候需要有兩個相同資產的要求，內容傳遞網路才能快取要求的內容。

如需建立 Azure 內容傳遞網路 設定檔和端點的詳細資訊，請參閱開始使用 Azure 內容傳遞網路。

清除內容傳遞網路

內容傳遞網路會根據存留時間 （TTL） 組態，定期從來源 Web 應用程式重新整理其資源。 預設的 TTL 為七天。

有時您可能需要在TTL到期前重新整理內容傳遞網路;例如，當您將更新的內容部署至 Web 應用程式時。 若要觸發重新整理，請手動清除內容傳遞網路資源。

在本教學課程的本節中，您會將變更部署至 Web 應用程式，並清除內容傳遞網路以觸發內容傳遞網路以重新整理其快取。

將變更部署至 Web 應用程式

開啟 index.html 檔案並將 - V2 新增至 H1 標題，如下列範例所示：

<h1>Azure App Service - Sample Static HTML Site - V2</h1>

認可您的變更，並將其部署至 Web 應用程式。

git commit -am "version 2"
git push azure main

部署完成後，流覽至 Web 應用程式 URL 以查看變更。

http://<appname>.azurewebsites.net/index.html

如果您流覽至首頁的內容傳遞網路端點 URL，則不會看到變更，因為內容傳遞網路中快取的版本尚未過期。

http://<endpointname>.azureedge.net/index.html

清除入口網站中的內容傳遞網路

若要觸發內容傳遞網路以更新其快取版本，請清除內容傳遞網路。

在入口網站左側導覽中，選取 [資源群組]，然後選取您為 Web 應用程式建立的資源群組 （myResourceGroup）。

在資源清單中，選取您的內容傳遞網路端點。

在 [端點] 頁面頂端，選取 [清除]。

輸入您想要清除的內容路徑。 您可以傳遞完整的檔案路徑來清除個別檔案，或是清除和重新整理資料夾中所有內容的路徑區段。 因為您已變更 index.html，因此請確定位於其中一個路徑中。

在頁面底部，選取 [ 清除]。

確認內容傳遞網路已更新

等候清除要求完成處理，這通常是幾分鐘。 若要查看目前的狀態，請選取頁面頂端的鈴鐺圖示。

當您流覽至index.html的內容傳遞網路端點 URL 時，您會看到您在首頁上新增至標題的 V2，這表示內容傳遞網路快取已重新整理。

http://<endpointname>.azureedge.net/index.html

如需詳細資訊，請參閱清除 Azure 內容傳遞網路 端點。

使用查詢字串來設定內容版本

Azure 內容傳遞網路 提供下列快取行為選項：

• 忽略查詢字串
• 略過查詢字串的快取
• 快取每個唯一 URL

第一個選項是預設值，這表示不論 URL 中的查詢字串為何，資產只有一個快取版本。

在本教學課程的本節中，您會變更快取行為來快取每個唯一 URL。

變更快取行為

在 [Azure 入口網站 CDN 端點] 頁面中，選取 [快取]。

從 [查詢字串快取行為] 下拉式清單中選取 [快取每個唯一 URL]。

選取 [儲存]。

確認已個別快取唯一 URL

在瀏覽器中，瀏覽至內容傳遞網路端點的首頁，並包含查詢字串：

http://<endpointname>.azureedge.net/index.html?q=1

Azure 內容傳遞網路 會傳回目前的 Web 應用程式內容，其中包含標題中的 V2。

若要確保此頁面會在內容傳遞網路中快取，請重新整理頁面。

開啟index.html，將 V2 變更為 V3，然後部署變更。

git commit -am "version 3"
git push azure main

在瀏覽器中，移至具有新查詢字串的內容傳遞網路端點 URL，例如 q=2。 Azure 內容傳遞網路 取得目前的index.html檔案，並顯示 V3。 不過，如果您使用查詢字串瀏覽至內容傳遞網路端點 q=1 ，您會看到 V2。

http://<endpointname>.azureedge.net/index.html?q=2

http://<endpointname>.azureedge.net/index.html?q=1

此輸出顯示每個查詢字串的處理方式不同：

• q=1 之前已使用，因此會傳回快取的內容 （V2）。
• q=2 是新的，因此會擷取並傳回最新的 Web 應用程式內容（V3）。

如需詳細資訊，請參閱使用查詢字串控制 Azure 內容傳遞網路 快取行為。

清除資源

在上述步驟中，您已建立資源群組中的 Azure 資源。 如果您在未來不需要這些資源，請在 Cloud Shell 中執行下列命令，刪除資源群組：

az group delete --name myResourceGroup

此命令可能會花一分鐘執行。

下一步

您學到的內容：

• 建立內容傳遞網路端點。
• 重新整理快取的資產。
• 使用查詢字串來控制快取的版本。

瞭解如何在下列文章中優化內容傳遞網路效能：

教學課程：針對內容傳遞類型優化 Azure 內容傳遞網路。