您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn.

教程:向 Azure 应用服务 Web 应用添加 Azure CDNTutorial: Add Azure CDN to an Azure App Service web app

本教程介绍如何向 Azure 应用服务中的 Web 应用添加 Azure 内容分发网络 (CDN)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

如果想要针对动态站点加速 (DSA) 优化 CDN 终结点,则应使用 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 门户针对 DSA 优化 CDN 终结点的说明,请参阅用于加速传送动态文件的 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.

在门户中选择应用服务应用

在“应用服务”页的“设置”部分,选择“网络”>“为应用配置 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 文件,此外还有 css、img 和 js 文件夹,其中包含其他静态资产 。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 CDN 入门For 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.

“清除”页

验证是否已更新 CDNVerify 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 应用内容,其在标题中包含“V2”。Azure 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. Azure CDN 获取当前的 index.html 文件并显示“V3” 。Azure CDN gets the current index.html file and displays V3. 但是,如果使用 q=1 查询字符串导航到 CDN 终结点,则会显示“V2”。However, 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: