教學課程:將 Azure CDN 新增至 Azure App Service Web 應用程式Tutorial: Add Azure CDN to an Azure App Service web app

本教學課程說明如何將 Azure 內容傳遞網路 (CDN) 新增至 Azure App Service 中的 Web 應用程式This tutorial shows how to add Azure Content Delivery Network (CDN) to a web app in Azure App Service. Web 應用程式是用來裝載 Web 應用程式、REST API 和行動後端的服務。Web apps is a service for hosting web applications, REST APIs, and mobile back ends.

以下是您將使用的範例靜態 HTML 網站首頁︰Here's the home page of the sample static HTML site that you'll work with:

範例應用程式首頁

您將學到什麼:What you'll learn:

  • 建立 CDN 端點。Create a CDN endpoint.
  • 重新整理快取的資產。Refresh cached assets.
  • 使用查詢字串來控制快取的版本。Use query strings to control cached versions.

必要條件Prerequisites

若要完成本教學課程:To complete this tutorial:

如果您沒有 Azure 訂用帳戶,請在開始前建立免費帳戶If you don't have an Azure subscription, create a free account before you begin.

建立 Web 應用程式Create the web app

若要建立您將使用的 Web 應用程式,請遵循 靜態 HTML 快速入門瀏覽至應用程式 步驟。To create the web app that you'll work with, follow the static HTML quickstart through the Browse to the app step.

登入 Azure 入口網站Log in to the Azure portal

開啟瀏覽器並瀏覽至 Azure 入口網站Open a browser and navigate to the Azure portal.

動態網站加速最佳化Dynamic site acceleration optimization

如果您想要為 CDN 端點進行動態網站加速 (DSA) 的最佳化,您應使用 CDN 入口網站建立設定檔和端點。If you want to optimize your CDN endpoint for dynamic site acceleration (DSA), you should use the CDN portal to create your profile and endpoint. 執行 DSA 最佳化後,具有動態內容的網頁將可顯著提升效能。With DSA optimization, the performance of web pages with dynamic content is measurably improved. 如需如何從 CDN 入口網站為 CDN 端點進行 DSA 最佳化的相關指示,請參閱用來加速傳遞動態檔案的 CDN 端點組態For instructions about how to optimize a CDN endpoint for DSA from the CDN portal, see CDN endpoint configuration to accelerate delivery of dynamic files. 否則,如果您不想要最佳化新端點,您可以依照下一節中的步驟,使用 Web 應用程式入口網站建立端點。Otherwise, if you don't want to optimize your new endpoint, you can use the web app portal to create it by following the steps in the next section. 請注意,對於 來自 Verizon 的 Azure CDN 設定檔,您無法在 CDN 端點建立之後變更其最佳化。Note that for Azure CDN from Verizon profiles, you cannot change the optimization of a CDN endpoint after it has been created.

建立 CDN 設定檔和端點Create a CDN profile and endpoint

在左側導覽中,選取 [應用程式服務],然後選取您在靜態 HTML 快速入門中建立的應用程式。In the left navigation, select App Services, and then select the app that you created in the static HTML quickstart.

在入口網站中選取 App Service 應用程式

在 [App Service] 頁面的 [設定] 區段中,選取 [網路] > [設定您應用程式的 Azure CDN]。In the App Service page, in the Settings section, select Networking > Configure Azure CDN for your app.

在入口網站中選取 CDN

在 [Azure 內容傳遞網路] 頁面中,提供表格中所指定的 [新端點] 設定。In the Azure Content Delivery Network page, provide the New endpoint settings as specified in the table.

在入口網站中建立設定檔和端點

設定Setting 建議的值Suggested value 描述Description
CDN 設定檔CDN profile myCDNProfilemyCDNProfile CDN 設定檔是定價層相同的 CDN 端點集合。A CDN profile is a collection of CDN endpoints with the same pricing tier.
定價層Pricing tier 標準 AkamaiStandard Akamai 定價層指定提供者和可用的功能。The pricing tier specifies the provider and available features. 本教學課程使用標準 Akamai。This tutorial uses Standard Akamai.
CDN 端點名稱CDN endpoint name azureedge.net 網域中任何唯一的名稱Any name that is unique in the azureedge.net domain 您可以在網域 <endpointname> .azureedge.net 上存取您的快取資源。You access your cached resources at the domain <endpointname>.azureedge.net.

選取 [建立] 以建立 CDN 設定檔。Select Create to create a CDN profile.

Azure 會建立設定檔和端點。Azure creates the profile and endpoint. 新端點會出現在 [端點] 清單中,而且其佈建後的狀態為 [執行中]。The new endpoint appears in the Endpoints list, and when it's provisioned, the status is Running.

清單中的新端點

測試 CDN 端點Test the CDN endpoint

因為需要一段時間才能傳播註冊,所以端點不會立即可供使用:Because it takes time for the registration to propagate, the endpoint isn't immediately available for use:

  • 若為 來自 Microsoft 的標準 Azure CDN 設定檔,通常會在 10 分鐘內完成傳播。For Azure CDN Standard from Microsoft profiles, propagation usually completes in 10 minutes.
  • 若為 來自 Akamai 的標準 Azure CDN 設定檔,通常會在一分鐘內完成傳播。For Azure CDN Standard from Akamai profiles, propagation usually completes within one minute.
  • 若為 來自 Verizon 的標準 Azure CDN來自 Verizon 的進階 Azure CDN 設定檔,通常會在 90 分鐘內完成傳播。For Azure CDN Standard from Verizon and Azure CDN Premium from Verizon profiles, propagation usually completes within 90 minutes.

範例應用程式有 index.html 檔案以及包含其他靜態資產的 cssimgjs 資料夾。The sample app has an index.html file and css, img, and js folders that contain other static assets. 在 CDN 端點上,上述所有檔案的內容路徑都相同。The content paths for all of these files are the same at the CDN endpoint. 例如,下列 URL 可存取 css 資料夾中的 bootstrap.css 檔案︰For example, both of the following URLs access the bootstrap.css file in the css folder:

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

在瀏覽器中瀏覽至下列 URL:Navigate a browser to the following URL:

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

CDN 提供的範例應用程式首頁

您會看到與您稍早在 Azure Web 應用程式中執行的相同分頁。You see the same page that you ran earlier in an Azure web app. Azure CDN 已擷取原始 Web 應用程式的資產,並從 CDN 端點提供這些資產Azure CDN has retrieved the origin web app's assets and is serving them from the CDN endpoint

若要確保此頁面已在 CDN 中快取,請重新整理此頁面。To ensure that this page is cached in the CDN, refresh the page. CDN 有時需要相同資產的兩個要求,才能快取所要求的內容。Two requests for the same asset are sometimes required for the CDN to cache the requested content.

如需建立 Azure CDN 設定檔和端點的詳細資訊,請參閱開始使用 Azure CDNFor more information about creating Azure CDN profiles and endpoints, see Getting started with Azure CDN.

清除 CDNPurge the CDN

CDN 會根據存留時間 (TTL) 組態,從原始 web 應用程式定期重新整理其資源。The CDN periodically refreshes its resources from the origin web app based on the time-to-live (TTL) configuration. 預設 TTL 為 7 天。The default TTL is seven days.

您有時可能須在 TTL 到期日之前重新整理 CDN;例如將更新的內容部署至 Web 應用程式時。At times you might need to refresh the CDN before the TTL expiration; for example, when you deploy updated content to the web app. 若要觸發重新整理,請手動清除 CDN 資源。To trigger a refresh, manually purge the CDN resources.

在本節的教學課程中,您會將變更部署到 Web 應用程式並清除 CDN,進而觸發 CDN 重新整理其快取。In this section of the tutorial, you deploy a change to the web app and purge the CDN to trigger the CDN to refresh its cache.

將變更部署到 Web 應用程式Deploy a change to the web app

開啟 index.html 檔案並將 V2 新增至 H1 標題,如下列範例所示︰Open the index.html file and add - V2 to the H1 heading, as shown in the following example:

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

認可您的變更並將它部署至 Web 應用程式。Commit your change and deploy it to the web app.

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

部署完成後,瀏覽至 Web 應用程式 URL 即可看到變更。Once deployment has completed, browse to the web app URL to see the change.

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

Web 應用程式標題中的 V2

若您瀏覽至首頁的 CDN 端點 URL,則會因為 CDN 中快取的版本尚未到期,所以不會看到變更。If you browse to the CDN endpoint URL for the home page, you won't see the change because the cached version in the CDN hasn't expired yet.

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

CDN 標題中沒有 V2

在入口網站中清除 CDNPurge the CDN in the portal

若要觸發 CDN 更新其快取的版本,請清除 CDN。To trigger the CDN to update its cached version, purge the CDN.

在入口網站的左側導覽中,選取 [資源群組],然後選取您為 Web 應用程式 (myResourceGroup) 建立的資源群組。In the portal left navigation, select Resource groups, and then select the resource group that you created for your web app (myResourceGroup).

選取資源群組

在資源清單中,選取您的 CDN 端點。In the list of resources, select your CDN endpoint.

選取端點

在 [端點] 頁面頂端選取 [清除]。At the top of the Endpoint page, select Purge.

選取清除

輸入您想要清除的內容路徑。Enter the content paths you want to purge. 您可以傳遞完整檔案路徑來清除個別檔案,也可以傳遞路徑區段來清除並重新整理資料夾中的所有內容。You can pass a complete file path to purge an individual file, or a path segment to purge and refresh all content in a folder. 因為您變更了 index.html,所以請確認該項目位在其中一個路徑內。Because you changed index.html, ensure that is in one of the paths.

選取頁面底部的 [清除]。At the bottom of the page, select Purge.

清除頁面

確認 CDN 已更新Verify that the CDN is updated

請等到清除要求處理完成,這通常需要幾分鐘的時間。Wait until the purge request finishes processing, which is typically a couple of minutes. 若要查看目前的狀態,請選取頁面頂端的鈴鐺圖示。To see the current status, select the bell icon at the top of the page.

清除通知

當您瀏覽至 index.html 的 CDN 端點 URL 時,會看見您新增至標題的 V2 出現在首頁上,這表示 CDN 快取已重新整理。When you browse to the CDN endpoint URL for index.html, you'll see the V2 that you added to the title on the home page, which indicates that the CDN cache has been refreshed.

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

CDN 標題中的 V2

如需詳細資訊,請參閱清除 Azure CDN 端點For more information, see Purge an Azure CDN endpoint.

使用查詢字串來控制內容版本Use query strings to version content

Azure CDN 提供下列快取行為選項︰Azure CDN offers the following caching behavior options:

  • 忽略查詢字串Ignore query strings
  • 略過查詢字串的快取Bypass caching for query strings
  • 快取每個唯一的 URLCache every unique URL

第一個選項是預設,這表示不管 URL 中的查詢字串為何,資產都只有一個快取的版本。The first option is the default, which means there is only one cached version of an asset regardless of the query string in the URL.

在本節的教學課程中,您可將快取行為變更為快取每個唯一 URL。In this section of the tutorial, you change the caching behavior to cache every unique URL.

變更快取行為Change the cache behavior

在 Azure 入口網站的 [CDN 端點] 頁面中,選取 [快取]。In the Azure portal CDN Endpoint page, select Cache.

從 [查詢字串快取行為] 下拉式清單中,選取 [快取每個唯一 URL]。Select Cache every unique URL from the Query string caching behavior drop-down list.

選取 [儲存]。Select Save.

選取查詢字串快取行為

確認唯一的 URL 會分開快取Verify that unique URLs are cached separately

在瀏覽器中,瀏覽至 CDN 端點首頁,並包含查詢字串︰In a browser, navigate to the home page at the CDN endpoint, and include a query string:

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

Azure CDN 會傳回目前的 Web 應用程式內容,其標題中包含 V2Azure CDN returns the current web app content, which includes V2 in the heading.

若要確保此頁面已在 CDN 中快取,請重新整理此頁面。To ensure that this page is cached in the CDN, refresh the page.

開啟 index.html 並將 V2 變更為 V3,然後部署變更。Open index.html, change V2 to V3, then deploy the change.

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

在瀏覽器中,移至含有新查詢字串 (例如 q=2) 的 CDN 端點 URL。In a browser, go to the CDN endpoint URL with a new query string, such as q=2. CDN 會取得目前的 index.html 檔案並顯示 V3Azure CDN gets the current index.html file and displays V3. 但是,如果您瀏覽至含有 q=1 查詢字串的 CDN 端點,則會看到 V2However, if you navigate to the CDN endpoint with the q=1 query string, you see V2.

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

CDN 標題中的 V3,查詢字串 2

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

CDN 標題中的 V2,查詢字串 1

此輸出會顯示每個查詢字串是以不同方式處理:This output shows that each query string is treated differently:

  • 以前使用 q=1,因此會傳回快取內容 (V2)。q=1 was used before, so cached contents are returned (V2).
  • q=2 是新的,因此會擷取及傳回最新的 Web 應用程式內容 (V3)。q=2 is new, so the latest web app contents are retrieved and returned (V3).

如需詳細資訊,請參閱使用查詢字串控制 Azure CDN 快取行為For more information, see Control Azure CDN caching behavior with query strings.

清除資源Clean up resources

在前述步驟中,您在資源群組中建立了 Azure 資源。In the preceding steps, you created Azure resources in a resource group. 如果您在未來不需要這些資源,請在 Cloud Shell 中執行下列命令,刪除資源群組:If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myResourceGroup

此命令可能會花一分鐘執行。This command may take a minute to run.

後續步驟Next steps

您已了解如何︰What you learned:

  • 建立 CDN 端點。Create a CDN endpoint.
  • 重新整理快取的資產。Refresh cached assets.
  • 使用查詢字串來控制快取的版本。Use query strings to control cached versions.

在下列文章中了解如何將 CDN 效能最佳化:Learn how to optimize CDN performance in the following articles: