Tutorial: Adición de Azure CDN a una aplicación web de Azure App ServiceTutorial: Add Azure CDN to an Azure App Service web app

Este tutorial muestra cómo agregar Azure Content Delivery Network (CDN) a una aplicación web de Azure App Service.This tutorial shows how to add Azure Content Delivery Network (CDN) to a web app in Azure App Service. Web Apps es un servicio para hospedar aplicaciones web, API de REST y back-ends para dispositivos móviles.Web apps is a service for hosting web applications, REST APIs, and mobile back ends.

Esta es la página de inicio del ejemplo del sitio HTML estático que se utilizará:Here's the home page of the sample static HTML site that you'll work with:

Página de inicio de la aplicación de ejemplo

Temas que se abordarán:What you'll learn:

  • Crear un punto de conexión de CDN.Create a CDN endpoint.
  • Actualizar los recursos en caché.Refresh cached assets.
  • Utilizar cadenas de consulta para controlar las versiones en caché.Use query strings to control cached versions.

Requisitos previosPrerequisites

Para completar este tutorial:To complete this tutorial:

Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.If you don't have an Azure subscription, create a free account before you begin.

Creación de la aplicación webCreate the web app

Para crear la aplicación web con la que va a trabajar, siga el tutorial de inicio rápido de HTML estático mediante el paso de búsqueda de la aplicación.To create the web app that you'll work with, follow the static HTML quickstart through the Browse to the app step.

Iniciar sesión en Azure PortalLog in to the Azure portal

Abra un explorador y vaya a Azure Portal.Open a browser and navigate to the Azure portal.

Optimización de la aceleración de sitios dinámicosDynamic site acceleration optimization

Si desea optimizar el punto de conexión de CDN para la aceleración de sitios dinámicos (DSA), debe usar el portal CDN para crear su perfil y el punto de conexión.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. Con la optimización de la aceleración de sitios dinámicos, el rendimiento de las páginas web con contenido dinámico se ha mejorado de un modo contrastable.With DSA optimization, the performance of web pages with dynamic content is measurably improved. Para obtener instrucciones acerca de cómo optimizar un punto de conexión de CDN para DSA desde el portal de CDN, consulte Configuración de punto de conexión de red CDN para acelerar la entrega de archivos dinámicos.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. En caso contrario, si no desea optimizar el nuevo punto de conexión, puede usar el portal de aplicaciones web para crearlo siguiendo los pasos descritos en la siguiente sección.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. Tenga en cuenta que en los perfiles de Azure CDN de Verizon no se puede cambiar la optimización de un punto de conexión de CDN una vez que se ha creado.Note that for Azure CDN from Verizon profiles, you cannot change the optimization of a CDN endpoint after it has been created.

Creación de un perfil y un punto de conexión de CDNCreate a CDN profile and endpoint

En el panel de navegación izquierdo, seleccione App Services y, a continuación, seleccione la aplicación que creó en el tutorial Creación de una aplicación web HTML estática en Azure en cinco minutos.In the left navigation, select App Services, and then select the app that you created in the static HTML quickstart.

Selección de la aplicación de App Service en el portal

En la página App Service, en la sección Configuración, seleccione Redes > Configurar Azure CDN para la aplicación.In the App Service page, in the Settings section, select Networking > Configure Azure CDN for your app.

Selección de la instancia de CDN en el portal

En la página Azure Content Delivery Network, proporcione la configuración del Nuevo punto de conexión tal y como se especifica en la tabla.In the Azure Content Delivery Network page, provide the New endpoint settings as specified in the table.

Creación del perfil y el punto de conexión en el portal

ConfiguraciónSetting Valor sugeridoSuggested value DESCRIPCIÓNDescription
Perfil de CDNCDN profile myCDNProfilemyCDNProfile Un perfil de CDN es una colección de puntos de conexión de CDN con el mismo plan de tarifa.A CDN profile is a collection of CDN endpoints with the same pricing tier.
Plan de tarifaPricing tier Estándar de AkamaiStandard Akamai El plan de tarifa especifica el proveedor y las características disponibles.The pricing tier specifies the provider and available features. En este tutorial se usa Standard Akamai.This tutorial uses Standard Akamai.
Nombre del punto de conexión de CDNCDN endpoint name Cualquier nombre que sea único en el dominio azureedge.netAny name that is unique in the azureedge.net domain Accederá a los recursos en caché en el dominio <nombrePuntoConexión> .azureedge.net.You access your cached resources at the domain <endpointname>.azureedge.net.

Seleccione Crear para crear un nuevo perfil de red CDN.Select Create to create a CDN profile.

Azure crea el perfil y el punto de conexión.Azure creates the profile and endpoint. El nuevo punto de conexión aparece en la lista Puntos de conexión y, una vez aprovisionado, el estado es En ejecución.The new endpoint appears in the Endpoints list, and when it's provisioned, the status is Running.

Nuevo punto de conexión en la lista

Probar el punto de conexión de CDNTest the CDN endpoint

Dado que se tarda un tiempo en que el registro se propague, el punto de conexión no estará disponible para su uso de forma inmediata:Because it takes time for the registration to propagate, the endpoint isn't immediately available for use:

  • En los perfiles de Azure CDN Estándar de Microsoft, la propagación se completa normalmente en 10 minutos.For Azure CDN Standard from Microsoft profiles, propagation usually completes in 10 minutes.
  • En los perfiles de Azure CDN estándar, la propagación normalmente se completa en un minuto.For Azure CDN Standard from Akamai profiles, propagation usually completes within one minute.
  • En los perfiles Azure CDN de Verizon estándar y Azure CDN de Verizon premium, la propagación se completa normalmente en 90 minutos.For Azure CDN Standard from Verizon and Azure CDN Premium from Verizon profiles, propagation usually completes within 90 minutes.

La aplicación de ejemplo tiene un archivo index.html y las carpetas css, img y js que contienen otros recursos estáticos.The sample app has an index.html file and css, img, and js folders that contain other static assets. Las rutas de acceso de contenido para todos estos archivos son las mismas en el punto de conexión de CDN.The content paths for all of these files are the same at the CDN endpoint. Por ejemplo, las siguientes direcciones URL acceden ambas al archivo bootstrap.css en la carpeta 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

Mediante un explorador, vaya la dirección URL siguiente:Navigate a browser to the following URL:

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

Página de inicio de la aplicación de ejemplo servida desde la red CDN

Verá la misma página que ejecutó anteriormente en una aplicación web de Azure.You see the same page that you ran earlier in an Azure web app. Azure CDN ha recuperado los recursos de la aplicación web original y los sirve desde el punto de conexión de CDN.Azure CDN has retrieved the origin web app's assets and is serving them from the CDN endpoint

Para asegurarse de que esta página se almacena en caché en la red CDN, actualice la página.To ensure that this page is cached in the CDN, refresh the page. En ocasiones se necesitan dos solicitudes del mismo recurso para que la red CDN almacene en memoria caché el contenido solicitado.Two requests for the same asset are sometimes required for the CDN to cache the requested content.

Para más información acerca de cómo crear perfiles y puntos de conexión de Azure CDN, consulte Introducción a Azure CDN.For more information about creating Azure CDN profiles and endpoints, see Getting started with Azure CDN.

Purga de la red CDNPurge the CDN

La red CDN actualiza periódicamente los recursos desde la aplicación web original en función de la configuración del período de vida (TTL).The CDN periodically refreshes its resources from the origin web app based on the time-to-live (TTL) configuration. El TTL predeterminado es siete días.The default TTL is seven days.

En ocasiones podría necesitar actualizar la red CDN antes de la expiración del TTL; por ejemplo, al implementar contenido actualizado en la aplicación 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. Para desencadenar una actualización, purgue manualmente los recursos de la red CDN.To trigger a refresh, manually purge the CDN resources.

En esta sección del tutorial, se implementará un cambio en la aplicación web y se purgará la red CDN para desencadenar la actualización de su caché.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.

Implementación de cambios en la aplicación webDeploy a change to the web app

Abra el archivo index.html y agregue - V2 al encabezado H1, como se muestra en el ejemplo siguiente: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>

Confirme el cambio e impleméntelo en la aplicación web.Commit your change and deploy it to the web app.

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

Una vez finalizada la implementación, vaya a la dirección URL de la aplicación web para ver el cambio.Once deployment has completed, browse to the web app URL to see the change.

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

V2 en el título de la aplicación web

Si va a la dirección URL de la página de inicio del punto de conexión de CDN, no verá el cambio porque la versión almacenada en caché en la red CDN no ha expirado todavía.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

Sin título V2 en la red CDN

Purga de la red CDN en el portalPurge the CDN in the portal

Para hacer que la red CDN actualice la versión almacenada en caché, purgue la red CDN.To trigger the CDN to update its cached version, purge the CDN.

En el área de navegación izquierda del portal, seleccione Grupos de recursos y, a continuación, seleccione el grupo de recursos que ha creado para la aplicación web (myResourceGroup).In the portal left navigation, select Resource groups, and then select the resource group that you created for your web app (myResourceGroup).

Selección de un grupo de recursos

En la lista de recursos, seleccione el punto de conexión de CDN.In the list of resources, select your CDN endpoint.

Selección del punto de conexión

En la parte superior de la página Punto de conexión, seleccione Purgar.At the top of the Endpoint page, select Purge.

Seleccionar Purgar

Escriba las rutas de acceso al contenido que desea purgar.Enter the content paths you want to purge. Puede pasar una ruta de acceso de archivo completa para purgar un archivo individual, o un segmento de ruta de acceso para purgar y actualizar todo el contenido de una carpeta.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. Debido a que cambió index.html, asegúrese de que está en una de las rutas de acceso.Because you changed index.html, ensure that is in one of the paths.

En la parte inferior de la página, seleccione Purgar.At the bottom of the page, select Purge.

Página Purgar

Compruebe que se ha actualizado la red CDNVerify that the CDN is updated

Espere hasta que la solicitud de purga finalice el procesamiento; por lo general, un par de minutos.Wait until the purge request finishes processing, which is typically a couple of minutes. Para ver el estado actual, seleccione el icono de campana en la parte superior de la página.To see the current status, select the bell icon at the top of the page.

Notificación de purga

Cuando vaya a la dirección URL del punto de conexión de la red CDN para index.html, verá el V2 que agregó en el título en la página de inicio, que indica que se ha actualizado la caché de la red 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

V2 en el título en la red CDN

Para más información, consulte Purgar un punto de conexión de Azure CDN.For more information, see Purge an Azure CDN endpoint.

Utilizar cadenas de consulta para versiones del contenidoUse query strings to version content

Azure CDN ofrece las siguientes opciones de comportamiento de almacenamiento en caché:Azure CDN offers the following caching behavior options:

  • Pasar por alto las cadenas de consultaIgnore query strings
  • Omitir el almacenamiento en caché de cadenas de consultaBypass caching for query strings
  • Almacenar en caché todas las URL únicasCache every unique URL

La primera opción es el comportamiento predeterminado, lo que significa que solo hay una versión almacenada en caché de un recurso, independientemente de la cadena de consulta utilizada en la dirección 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.

En esta sección del tutorial, cambiará el comportamiento de almacenamiento en caché para almacenar en caché todas las direcciones URL únicas.In this section of the tutorial, you change the caching behavior to cache every unique URL.

Cambio del comportamiento de la memoria cachéChange the cache behavior

En la página Punto de conexión de CDN de Azure Portal, seleccione Caché.In the Azure portal CDN Endpoint page, select Cache.

Seleccione Almacenar en caché todas las URL únicas en la lista desplegable Comportamiento del almacenamiento en caché de cadenas de consulta.Select Cache every unique URL from the Query string caching behavior drop-down list.

Seleccione Guardar.Select Save.

Selección del comportamiento de almacenamiento de cadenas de consulta en caché

Compruebe que las direcciones URL únicas se almacenan en caché por separadoVerify that unique URLs are cached separately

En un explorador, vaya a la página de inicio del punto de conexión de CDN, e incluya una cadena de consulta: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 devuelve el contenido de la aplicación web actual, que incluye V2 en el encabezado.Azure CDN returns the current web app content, which includes V2 in the heading.

Para asegurarse de que esta página se almacena en caché en la red CDN, actualice la página.To ensure that this page is cached in the CDN, refresh the page.

Abra index.html, cambie V2 a V3 y, a continuación, implemente el cambio.Open index.html, change V2 to V3, then deploy the change.

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

En un explorador, vaya a la dirección URL del punto de conexión CDN con una nueva cadena de consulta, como q=2.In a browser, go to the CDN endpoint URL with a new query string, such as q=2. Azure CDN obtiene el archivo index.html actual y muestra V3.Azure CDN gets the current index.html file and displays V3. Sin embargo, si navega hasta el punto de conexión de CDN con la cadena de consulta q=1, verá 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

V3 en el título en la red CDN, cadena de consulta 2

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

V2 en el título en la red CDN, cadena de consulta 1

Este resultado muestra que cada cadena de consulta se trata de manera diferente:This output shows that each query string is treated differently:

  • q = 1 se usó antes, por lo que se devuelve contenido almacenado en caché (V2).q=1 was used before, so cached contents are returned (V2).
  • q = 2 es nuevo, por lo que se recupera y se devuelve el contenido de aplicación web más reciente (V3).q=2 is new, so the latest web app contents are retrieved and returned (V3).

Para más información, consulte Control del comportamiento del almacenamiento en caché de Azure CDN con cadenas de consulta.For more information, see Control Azure CDN caching behavior with query strings.

Limpieza de recursosClean up resources

En los pasos anteriores, creó recursos de Azure en un grupo de recursos.In the preceding steps, you created Azure resources in a resource group. Si prevé que no necesitará estos recursos en el futuro, elimine el grupo de recursos ejecutando el siguiente comando en 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

Este comando puede tardar varios segundos en ejecutarse.This command may take a minute to run.

Pasos siguientesNext steps

¿Qué ha aprendido?What you learned:

  • Crear un punto de conexión de CDN.Create a CDN endpoint.
  • Actualizar los recursos en caché.Refresh cached assets.
  • Utilizar cadenas de consulta para controlar las versiones en caché.Use query strings to control cached versions.

Aprenda cómo optimizar el rendimiento de CDN en los siguientes artículos:Learn how to optimize CDN performance in the following articles: