You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/cdn/cdn-add-to-web-app.md
+23-26Lines changed: 23 additions & 26 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,30 +2,27 @@
2
2
title: Tutorial - Add Azure CDN to an Azure App Service web app | Microsoft Docs
3
3
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.
4
4
services: cdn
5
-
documentationcenter: ''
6
5
author: duongau
7
-
manager: danielgi
8
-
editor: ''
9
-
6
+
manager: kumudd
10
7
ms.assetid:
11
8
ms.service: azure-cdn
12
9
ms.workload: tbd
13
10
ms.tgt_pltfrm: na
14
11
ms.topic: tutorial
15
-
ms.date: 05/14/2018
12
+
ms.date: 02/27/2023
16
13
ms.author: duau
17
14
ms.custom: mvc
18
-
19
15
---
16
+
20
17
# Tutorial: Add Azure CDN to an Azure App Service web app
21
18
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.
23
20
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:
25
22
26
23

27
24
28
-
What you'll learn:
25
+
What you learn:
29
26
30
27
> [!div class="checklist"]
31
28
> * Create a CDN endpoint.
@@ -44,29 +41,29 @@ To complete this tutorial:
44
41
45
42
## Create the web app
46
43
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.
48
45
49
-
## Log in to the Azure portal
46
+
## Sign in to the Azure portal
50
47
51
48
Open a browser and navigate to the [Azure portal](https://portal.azure.com).
52
49
53
50
### Dynamic site acceleration optimization
54
51
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.
56
53
57
54
## Create a CDN profile and endpoint
58
55
59
56
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).
60
57
61
-

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.":::
62
59
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**.
64
61
65
-

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.":::
66
63
67
64
In the **Azure Content Delivery Network** page, provide the **New endpoint** settings as specified in the table.
68
65
69
-

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.":::
70
67
71
68
| Setting | Suggested value | Description |
72
69
| ------- | --------------- | ----------- |
@@ -78,7 +75,7 @@ Select **Create** to create a CDN profile.
78
75
79
76
Azure creates the profile and endpoint. The new endpoint appears in the **Endpoints** list, and when it's provisioned, the status is **Running**.
80
77
81
-

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.":::
:::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.":::
160
157
161
158
In the list of resources, select your CDN endpoint.
:::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.":::
168
165
169
166
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.
:::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.":::
174
171
175
172
### Verify that the CDN is updated
176
173
177
174
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.
:::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.":::
180
177
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.
182
179
183
180
```
184
181
http://<endpointname>.azureedge.net/index.html
@@ -196,7 +193,7 @@ Azure CDN offers the following caching behavior options:
196
193
* Bypass caching for query strings
197
194
* Cache every unique URL
198
195
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.
200
197
201
198
In this section of the tutorial, you change the caching behavior to cache every unique URL.
202
199
@@ -208,7 +205,7 @@ Select **Cache every unique URL** from the **Query string caching behavior** dro
:::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.":::
0 commit comments