Tutorial: Adición de Azure CDN a una aplicación web de Azure App Service

Este tutorial muestra cómo agregar Azure Content Delivery Network (CDN) a una aplicación web de Azure App Service. Web Apps es un servicio para hospedar aplicaciones web, API de REST y back-ends para dispositivos móviles.

Esta es la página de inicio del ejemplo del sitio HTML estático que se utilizará:

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

Temas que se abordarán:

  • Crear un punto de conexión de CDN.
  • Actualizar los recursos en caché.
  • Utilizar cadenas de consulta para controlar las versiones en caché.

Requisitos previos

Para completar este tutorial:

Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.

Creación de la aplicación web

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.

Iniciar sesión en Azure Portal

Abra un explorador y vaya a Azure Portal.

Optimización de la aceleración de sitios dinámicos

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

Creación de un perfil y un punto de conexión de CDN

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.

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.

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.

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

Configuración Valor sugerido Descripción
Perfil de CDN myCDNProfile Un perfil de CDN es una colección de puntos de conexión de CDN con el mismo plan de tarifa.
Plan de tarifa Estándar de Akamai El plan de tarifa especifica el proveedor y las características disponibles. En este tutorial se usa Standard Akamai.
Nombre del punto de conexión de CDN Cualquier nombre que sea único en el dominio azureedge.net Accederá a los recursos en caché en el dominio <nombrePuntoConexión> .azureedge.net.

Seleccione Crear para crear un nuevo perfil de red CDN.

Azure crea el perfil y el punto de conexión. El nuevo punto de conexión aparece en la lista Puntos de conexión y, una vez aprovisionado, el estado es En ejecución.

Nuevo punto de conexión en la lista

Probar el punto de conexión de CDN

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:

  • En los perfiles de Azure CDN Estándar de Microsoft, la propagación se completa normalmente en 10 minutos.
  • En los perfiles de Azure CDN estándar, la propagación normalmente se completa en un minuto.
  • En los perfiles Azure CDN de Verizon estándar y Azure CDN de Verizon premium, la propagación se completa normalmente en 90 minutos.

La aplicación de ejemplo tiene un archivo index.html y las carpetas css, img y js que contienen otros recursos estáticos. Las rutas de acceso de contenido para todos estos archivos son las mismas en el punto de conexión de CDN. Por ejemplo, las siguientes direcciones URL acceden ambas al archivo bootstrap.css en la carpeta css:

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

Mediante un explorador, vaya la dirección URL siguiente:

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. Azure CDN ha recuperado los recursos de la aplicación web original y los sirve desde el punto de conexión de CDN.

Para asegurarse de que esta página se almacena en caché en la red CDN, actualice la página. En ocasiones se necesitan dos solicitudes del mismo recurso para que la red CDN almacene en memoria caché el contenido solicitado.

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.

Purga de la red 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). El TTL predeterminado es siete días.

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. Para desencadenar una actualización, purgue manualmente los recursos de la red CDN.

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é.

Implementación de cambios en la aplicación web

Abra el archivo index.html y agregue - V2 al encabezado H1, como se muestra en el ejemplo siguiente:

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

Confirme el cambio e impleméntelo en la aplicación web.

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

Una vez finalizada la implementación, vaya a la dirección URL de la aplicación web para ver el cambio.

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.

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

Sin título V2 en la red CDN

Purga de la red CDN en el portal

Para hacer que la red CDN actualice la versión almacenada en caché, purgue la red 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).

Selección de un grupo de recursos

En la lista de recursos, seleccione el punto de conexión de CDN.

Selección del punto de conexión

En la parte superior de la página Punto de conexión, seleccione Purgar.

Seleccionar Purgar

Escriba las rutas de acceso al contenido que desea purgar. 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. Debido a que cambió index.html, asegúrese de que está en una de las rutas de acceso.

En la parte inferior de la página, seleccione Purgar.

Página Purgar

Compruebe que se ha actualizado la red CDN

Espere hasta que la solicitud de purga finalice el procesamiento; por lo general, un par de minutos. Para ver el estado actual, seleccione el icono de campana en la parte superior de la página.

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.

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.

Utilizar cadenas de consulta para versiones del contenido

Azure CDN ofrece las siguientes opciones de comportamiento de almacenamiento en caché:

  • Pasar por alto las cadenas de consulta
  • Omitir el almacenamiento en caché de cadenas de consulta
  • Almacenar en caché todas las URL únicas

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.

En esta sección del tutorial, cambiará el comportamiento de almacenamiento en caché para almacenar en caché todas las direcciones URL únicas.

Cambio del comportamiento de la memoria caché

En la página Punto de conexión de CDN de Azure Portal, seleccione Caché.

Seleccione Almacenar en caché todas las URL únicas en la lista desplegable Comportamiento del almacenamiento en caché de cadenas de consulta.

Seleccione Guardar.

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

Compruebe que las direcciones URL únicas se almacenan en caché por separado

En un explorador, vaya a la página de inicio del punto de conexión de CDN, e incluya una cadena de consulta:

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.

Para asegurarse de que esta página se almacena en caché en la red CDN, actualice la página.

Abra index.html, cambie V2 a V3 y, a continuación, implemente el cambio.

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

En un explorador, vaya a la dirección URL del punto de conexión CDN con una nueva cadena de consulta, como q=2. Azure CDN obtiene el archivo index.html actual y muestra V3. Sin embargo, si navega hasta el punto de conexión de CDN con la cadena de consulta q=1, verá 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:

  • q = 1 se usó antes, por lo que se devuelve contenido almacenado en caché (V2).
  • q = 2 es nuevo, por lo que se recupera y se devuelve el contenido de aplicación web más reciente (V3).

Para más información, consulte Control del comportamiento del almacenamiento en caché de Azure CDN con cadenas de consulta.

Limpieza de recursos

En los pasos anteriores, creó recursos de Azure en un grupo de recursos. Si prevé que no necesitará estos recursos en el futuro, elimine el grupo de recursos ejecutando el siguiente comando en Cloud Shell:

az group delete --name myResourceGroup

Este comando puede tardar varios segundos en ejecutarse.

Pasos siguientes

¿Qué ha aprendido?

  • Crear un punto de conexión de CDN.
  • Actualizar los recursos en caché.
  • Utilizar cadenas de consulta para controlar las versiones en caché.

Aprenda cómo optimizar el rendimiento de CDN en los siguientes artículos: