Skip to content

Commit 4a7f1d6

Browse files
committed
freshness review
1 parent 4bc2ff1 commit 4a7f1d6

11 files changed

+23
-26
lines changed

articles/cdn/cdn-add-to-web-app.md

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,27 @@
22
title: Tutorial - Add Azure CDN to an Azure App Service web app | Microsoft Docs
33
description: In this tutorial, Azure Content Delivery Network (CDN) is added to an Azure App Service web app to cache and deliver your static files from servers close to your customers around the world.
44
services: cdn
5-
documentationcenter: ''
65
author: duongau
7-
manager: danielgi
8-
editor: ''
9-
6+
manager: kumudd
107
ms.assetid:
118
ms.service: azure-cdn
129
ms.workload: tbd
1310
ms.tgt_pltfrm: na
1411
ms.topic: tutorial
15-
ms.date: 05/14/2018
12+
ms.date: 02/27/2023
1613
ms.author: duau
1714
ms.custom: mvc
18-
1915
---
16+
2017
# Tutorial: Add Azure CDN to an Azure App Service web app
2118

22-
This tutorial shows how to add [Azure Content Delivery Network (CDN)](cdn-overview.md) to a [web app in Azure App Service](../app-service/overview.md). Web apps is a service for hosting web applications, REST APIs, and mobile back ends.
19+
This tutorial shows how to add [Azure Content Delivery Network (CDN)](cdn-overview.md) to a [web app in Azure App Service](../app-service/overview.md). Web apps are services for hosting web applications, REST APIs, and mobile back ends.
2320

24-
Here's the home page of the sample static HTML site that you'll work with:
21+
Here's the home page of the sample static HTML site that you work with:
2522

2623
![Sample app home page](media/cdn-add-to-web-app/sample-app-home-page.png)
2724

28-
What you'll learn:
25+
What you learn:
2926

3027
> [!div class="checklist"]
3128
> * Create a CDN endpoint.
@@ -44,29 +41,29 @@ To complete this tutorial:
4441

4542
## Create the web app
4643

47-
To create the web app that you'll work with, follow the [static HTML quickstart](../app-service/quickstart-html.md) through the **Browse to the app** step.
44+
To create the web app that you work with, follow the [static HTML quickstart](../app-service/quickstart-html.md) through the **Browse to the app** step.
4845

49-
## Log in to the Azure portal
46+
## Sign in to the Azure portal
5047

5148
Open a browser and navigate to the [Azure portal](https://portal.azure.com).
5249

5350
### Dynamic site acceleration optimization
5451
If you want to optimize your CDN endpoint for dynamic site acceleration (DSA), you should use the [CDN portal](cdn-create-new-endpoint.md) to create your profile and endpoint. With [DSA optimization](cdn-dynamic-site-acceleration.md), the performance of web pages with dynamic content is measurably improved. 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](cdn-dynamic-site-acceleration.md#cdn-endpoint-configuration-to-accelerate-delivery-of-dynamic-files).
55-
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. Note that for **Azure CDN from Verizon** profiles, you cannot change the optimization of a CDN endpoint after it has been created.
52+
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. For **Azure CDN from Verizon** profiles, you can't change the optimization of a CDN endpoint after it has been created.
5653

5754
## Create a CDN profile and endpoint
5855

5956
In the left navigation, select **App Services**, and then select the app that you created in the [static HTML quickstart](../app-service/quickstart-html.md).
6057

61-
![Select App Service app in the portal](media/cdn-add-to-web-app/portal-select-app-services.png)
58+
:::image type="content" source="./media/cdn-add-to-web-app/portal-select-app-services.png" alt-text="Screenshot of select an App Service app in the portal.":::
6259

63-
In the **App Service** page, in the **Settings** section, select **Networking > Configure Azure CDN for your app**.
60+
In the **App Service** page, in the **Settings** section, select **Networking > Azure CDN**.
6461

65-
![Select CDN in the portal](media/cdn-add-to-web-app/portal-select-cdn.png)
62+
:::image type="content" source="./media/cdn-add-to-web-app/portal-select-cdn.png" alt-text="Screenshot of select Azure CDN from networking setting of an App Service.":::
6663

6764
In the **Azure Content Delivery Network** page, provide the **New endpoint** settings as specified in the table.
6865

69-
![Create profile and endpoint in the portal](media/cdn-add-to-web-app/portal-new-endpoint.png)
66+
:::image type="content" source="./media/cdn-add-to-web-app/portal-new-endpoint.png" alt-text="Screenshot of create Azure CDN profile and endpoint in the portal.":::
7067

7168
| Setting | Suggested value | Description |
7269
| ------- | --------------- | ----------- |
@@ -78,7 +75,7 @@ Select **Create** to create a CDN profile.
7875

7976
Azure creates the profile and endpoint. The new endpoint appears in the **Endpoints** list, and when it's provisioned, the status is **Running**.
8077

81-
![New endpoint in list](media/cdn-add-to-web-app/portal-new-endpoint-in-list.png)
78+
:::image type="content" source="./media/cdn-add-to-web-app/portal-new-endpoint-in-list.png" alt-text="Screenshot of new Azure CDN endpoint in list.":::
8279

8380
### Test the CDN endpoint
8481

@@ -142,7 +139,7 @@ http://<appname>.azurewebsites.net/index.html
142139

143140
![V2 in title in web app](media/cdn-add-to-web-app/v2-in-web-app-title.png)
144141

145-
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.
142+
If you browse to the CDN endpoint URL for the home page, you don't see the changes because the cached version in the CDN hasn't expired yet.
146143

147144
```
148145
http://<endpointname>.azureedge.net/index.html
@@ -156,29 +153,29 @@ To trigger the CDN to update its cached version, purge the CDN.
156153

157154
In the portal left navigation, select **Resource groups**, and then select the resource group that you created for your web app (myResourceGroup).
158155

159-
![Select resource group](media/cdn-add-to-web-app/portal-select-group.png)
156+
:::image type="content" source="./media/cdn-add-to-web-app/portal-select-group.png" alt-text="Screenshot of selecting resource group from left menu pane in the portal.":::
160157

161158
In the list of resources, select your CDN endpoint.
162159

163-
![Select endpoint](media/cdn-add-to-web-app/portal-select-endpoint.png)
160+
:::image type="content" source="./media/cdn-add-to-web-app/portal-select-endpoint.png" alt-text="Screenshot of Azure CDN endpoint from resource group.":::
164161

165162
At the top of the **Endpoint** page, select **Purge**.
166163

167-
![Select Purge](media/cdn-add-to-web-app/portal-select-purge.png)
164+
:::image type="content" source="./media/cdn-add-to-web-app/portal-select-purge.png" alt-text="Screenshot of purge button in an Azure CDN profile.":::
168165

169166
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. Because you changed *index.html*, ensure that is in one of the paths.
170167

171168
At the bottom of the page, select **Purge**.
172169

173-
![Purge page](media/cdn-add-to-web-app/app-service-web-purge-cdn.png)
170+
:::image type="content" source="./media/cdn-add-to-web-app/app-service-web-purge-cdn.png" alt-text="Screenshot of purge page in an Azure CDN profile.":::
174171

175172
### Verify that the CDN is updated
176173

177174
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.
178175

179-
![Purge notification](media/cdn-add-to-web-app/portal-purge-notification.png)
176+
:::image type="content" source="./media/cdn-add-to-web-app/portal-purge-notification.png" alt-text="Screenshot of purge notification for an Azure CDN profile.":::
180177

181-
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.
178+
When you browse to the CDN endpoint URL for *index.html*, you see the *V2* that you added to the title on the home page, which indicates that the CDN cache has been refreshed.
182179

183180
```
184181
http://<endpointname>.azureedge.net/index.html
@@ -196,7 +193,7 @@ Azure CDN offers the following caching behavior options:
196193
* Bypass caching for query strings
197194
* Cache every unique URL
198195

199-
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.
196+
The first option is the default, which means there's only one cached version of an asset regardless of the query string in the URL.
200197

201198
In this section of the tutorial, you change the caching behavior to cache every unique URL.
202199

@@ -208,7 +205,7 @@ Select **Cache every unique URL** from the **Query string caching behavior** dro
208205

209206
Select **Save**.
210207

211-
![Select query string caching behavior](media/cdn-add-to-web-app/portal-select-caching-behavior.png)
208+
:::image type="content" source="./media/cdn-add-to-web-app/portal-select-caching-behavior.png" alt-text="Screenshot of cache rules settings for an Azure CDN profile.":::
212209

213210
### Verify that unique URLs are cached separately
214211

-1.27 KB
Loading
3.16 KB
Loading
-1.58 KB
Loading
13.7 KB
Loading
12.6 KB
Loading
1.86 KB
Loading
39.9 KB
Loading
28.9 KB
Loading
16.1 KB
Loading

0 commit comments

Comments
 (0)