Tutorial: Configuración de Azure Front Door para Azure Static Web Apps

Al agregar Azure Front Door como red CDN para la aplicación web estática, se beneficia de un punto de entrada seguro para la entrega rápida de las aplicaciones web.

Con Static Web Apps, tiene dos opciones para integrarse con Azure Front Door. Puede agregar Azure Front Door a la aplicación web estática habilitando el perímetro de nivel empresarial, una integración administrada de Azure Front Door con Static Web Apps. Como alternativa, puede configurar manualmente un recurso de Azure Front Door delante de la aplicación web estática.

Tenga en cuenta las ventajas siguientes para determinar qué opción se adapta mejor a sus necesidades.

El perímetro de nivel empresarial proporciona:

• Ningún cambio en la configuración
• sin tiempo de inactividad
• Certificados SSL y dominios personalizados administrados automáticamente

Una configuración manual de Azure Front Door le proporciona control total sobre la configuración de CDN, incluida la posibilidad de:

• Limitar el origen del tráfico por origen
• Adición de un firewall de aplicaciones web (WAF)
• Enrutamiento entre varias aplicaciones
• Usar características más avanzadas de Azure Front Door

En este tutorial, aprenderá a agregar Azure Front Door a la aplicación web estática.

Requisitos previos

• Dominio personalizado configurado para la aplicación web estática con un periodo de vida (TTL) establecido en menos de 48 horas.
• Una aplicación implementada con Azure Static Web Apps que use el plan de hospedaje Estándar.

Habilitación del perímetro de nivel empresarial en el recurso Static Web Apps

Azure Portal

1. Vaya a la aplicación web estática en Azure Portal.

2. En el menú de la izquierda, seleccione Enterprise-grade edge (Perímetro de nivel empresarial).

3. Active la casilla etiquetada Enable enterprise-grade edge (Habilitar perímetro de nivel empresarial).

4. Seleccione Guardar.

5. Seleccione Aceptar para confirmar el guardado.

   Habilitar esta característica conlleva costos adicionales.

CLI de Azure

az extension add -n enterprise-edge

az staticwebapp enterprise-edge enable -n my-static-webapp -g my-resource-group

Requisitos previos

• Una cuenta de Azure con una suscripción activa. Cree su cuenta de forma gratuita.
• Un sitio de Azure Static Web Apps. Compilación de la primera aplicación web estática
• Planes Estándar de Azure Static Web Apps y Azure Front Door Standard/Premium. Para obtener más información, consulte Precios de Static Web Apps.
• Considere la posibilidad de usar el perímetro de nivel empresarial para acelerar la carga de páginas, mejorar la seguridad y aumentar la confiabilidad para aplicaciones globales.

Crear una instancia de Azure Front Door

1. Inicie sesión en Azure Portal.

2. En la página principal o en el menú de Azure Portal, seleccione +Crear un recurso. Busque perfiles de Front Door y CDN y, a continuación, seleccione Crear>perfiles de Front Door y CDN.

3. En la página Comparar ofertas, seleccione Creación rápida y, a continuación, seleccione Continuar para crear una instancia de Front Door.

4. En la página Crear un perfil de Front Door, escriba o seleccione la siguiente configuración.

   Configuración	Value
   Subscription	Seleccione su suscripción a Azure.
   Resource group	Escriba el nombre de un grupo de recursos. Este nombre suele ser el mismo nombre de grupo que usa la aplicación web estática.
   Ubicación del grupo de recursos	Si crea un grupo de recursos, escriba la ubicación más cercana.
   Nombre	Escriba my-static-web-app-front-door.
   Nivel	Seleccione Estándar.
   El nombre del punto de conexión	Escriba un nombre único para el host de Front Door.
   Tipo de origen	Seleccione Static Web App.
   Nombre de host de origen	Seleccione el nombre de host de la aplicación web estática en la lista desplegable.
   Almacenamiento en memoria caché	Seleccione la casilla Habilitar caché.
   Comportamiento del almacenamiento en caché de cadenas de consulta	Seleccione Usar cadena de consulta.
   Compresión	Seleccione Habilitar compresión.
   Directiva de WAF	Si desea habilitar esta característica, seleccione Crear o seleccione una directiva de Web Application Firewall existente en la lista desplegable.

   Nota:

   Al crear un perfil de Azure Front Door, debe seleccionar un origen de la misma suscripción en la que se crea Front Door.

5. Seleccione Revisar y crear y, luego, Crear. El proceso de creación puede tardar unos minutos en completarse.

6. Una vez finalizada la implementación, seleccione Ir al recurso.

7. Agregue una condición.

Deshabilitación de caché para el flujo de trabajo de autenticación

Nota:

La expiración de la memoria caché, la cadena de consulta de clave de caché y las acciones de invalidación del grupo de origen están en desuso. Estas acciones pueden seguir funcionando normalmente, pero el conjunto de reglas no puede cambiar. Reemplace estas invalidaciones por nuevas acciones de invalidación de configuración de ruta antes de cambiar el conjunto de reglas.

Agregue la siguiente configuración para deshabilitar las directivas de almacenamiento en caché de Front Door para que no intenten almacenar en caché las páginas relacionadas con la autenticación y la autorización.

Agregar una condición

1. En Front Door, en Configuración, seleccione Conjunto de reglas.

2. Seleccione Agregar.

3. En el cuadro de texto Nombre del conjunto de reglas, escriba Seguridad.

4. En el cuadro de texto Nombre de la regla, escriba NoCacheAuthRequests.

5. Seleccione Agregar una condición.

6. Seleccione Ruta de acceso de solicitud.

7. Seleccione la lista desplegable Operador y, a continuación , Comience con.

8. Seleccione el vínculo Editar encima del cuadro de texto Valor.

9. Escriba /.auth en el cuadro de texto y seleccione Actualizar.

10. Seleccione ninguna opción en la lista desplegable Transformación de cadenas.

Agrega una acción

1. Seleccione el menú desplegable Agregar una acción.

2. Seleccione Route configuration override (Invalidación de la configuración de enrutamiento).

3. Seleccione Deshabilitado en la lista desplegable Almacenamiento en caché.

4. Seleccione Guardar.

Asociación de una regla a un punto de conexión

Ahora que se crea la regla, aplique la regla a un punto de conexión de Front Door.

1. En Front Door, seleccione Conjunto de reglas y, a continuación, el vínculo No asociado .

   

2. Seleccione el nombre del punto de conexión al que desea aplicar la regla de almacenamiento en caché y, a continuación, seleccione Siguiente.

3. Seleccione Asociar.

   

Copia del Id. de Front Door

Siga estos pasos para copiar el identificador único de la instancia de Front Door.

1. En Front Door, seleccione el vínculo Información general en el panel de navegación izquierdo.

2. Copie el valor con la etiqueta Id. de Front Door y péguelo en un archivo para su uso posterior.

   

Actualización de la configuración de la aplicación web estática

Para completar la integración con Front Door, debe actualizar el archivo de configuración de la aplicación para realizar las siguientes funciones:

• Restringir el tráfico al sitio solo a través de Front Door
• Restringir el tráfico al sitio solo desde la instancia de Front Door
• Definir qué dominios pueden acceder a tu sitio
• Deshabilitación del almacenamiento en caché para rutas protegidas

Abra el archivo staticwebapp.config.json para el sitio y realice los cambios siguientes.

1. Restrinja el tráfico para que se use solo Front Door mediante la adición de la siguiente sección al archivo de configuración:

   "networking": {
     "allowedIpRanges": ["AzureFrontDoor.Backend"]
   }
   

2. Para definir qué dominios e instancias de Azure Front Door pueden acceder al sitio, agregue la sección forwardingGateway.

   "forwardingGateway": {
     "requiredHeaders": {
       "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
     },
     "allowedForwardedHosts": [
       "my-sitename.azurefd.net"
     ]
   }
   

   En primer lugar, configure la aplicación para que solo permita el tráfico desde la instancia de Front Door. En cada solicitud de back-end, Front Door agrega automáticamente un encabezado X-Azure-FDID que contiene el identificador de la instancia de Front Door. Al configurar la aplicación web estática para exigir este encabezado, restringirá el tráfico exclusivamente a la instancia de Front Door. En la sección forwardingGateway del archivo de configuración, agregue la sección requiredHeaders y defina el encabezado X-Azure-FDID. Reemplace <YOUR-FRONT-DOOR-ID> por el Id. de Front Door que reservó anteriormente.

   A continuación, agregue el nombre de host de Azure Front Door (no el nombre de host de Azure Static Web Apps) a la matriz allowedForwardedHosts. Si tiene dominios personalizados configurados en la instancia de Front Door, inclúyalos también en esta lista.

   En este ejemplo, reemplace my-sitename.azurefd.net por el nombre de host de Azure Front Door para el sitio.

3. Para todas las rutas protegidas de la aplicación, deshabilite el almacenamiento en caché de Azure Front Door agregando "Cache-Control": "no-store" a la definición del encabezado de ruta.

   {
       ...
       "routes": [
           {
               "route": "/members",
               "allowedRoles": ["authenticated", "members"],
               "headers": {
                   "Cache-Control": "no-store"
               }
           }
       ]
       ...
   }
   

Con esta configuración, el sitio ya no estará disponible a través del nombre de host *.azurestaticapps.net generado, sino exclusivamente a través de los nombres de host configurados en la instancia de Front Door.

Consideraciones

• Dominios personalizados: ahora que Front Door administra el sitio, ya no se usa la característica de dominio personalizado de Azure Static Web Apps. Azure Front Door tiene un proceso independiente para agregar un dominio personalizado. Consulte Incorporación de un dominio personalizado a Front Door. Al agregar un dominio personalizado a Front Door, deberá actualizar el archivo de configuración de la aplicación web estática para incluirlo en la lista allowedForwardedHosts.

• Estadísticas de tráfico: de forma predeterminada, Azure Front Door configura sondeos de estado que pueden afectar a sus estadísticas de tráfico. Es posible que desee editar los valores predeterminados para los sondeos de estado.

• Compatibilidad con versiones antiguas: al implementar actualizaciones en archivos existentes en la aplicación web estática, Azure Front Door puede continuar operativo para versiones anteriores de los archivos hasta que expire su período de vida. Purgue la caché de Azure Front Door para las rutas de acceso afectadas, para asegurarse de que se proporcionan los archivos más recientes.

Limpieza de recursos

Si ya no desea usar los recursos creados en este tutorial, elimine las instancias de Azure Static Web Apps y Azure Front Door.

Pasos siguientes

Adición de una API