Cómo configurar Azure Front Door para un sitio estático: paso a paso

João Barros 01 de September de 2026 4 min de lectura

Este tutorial muestra cómo configurar Azure Front Door para servir un sitio estático alojado en Azure Blob Storage, añadiendo CDN, HTTPS gestionado y enrutamiento global. Es útil para reducir latencia, mejorar disponibilidad y tener TLS con el mínimo esfuerzo.

Requisitos previos

Cuenta Azure con permisos para crear recursos (Subscription).
Azure CLI instalada (az) o acceso al Azure Portal.
Un sitio estático sencillo (archivos HTML/CSS/JS) listo para subir.
Dominio personalizado opcional (p. ej.: example.com) con acceso para crear un registro CNAME.

Paso 1: Crear un Storage Account con Static Website

Crear un Storage Account con soporte para static website. El sitio residirá en un container $web y será el backend del Front Door.

az storage account create --name mystaticstore --resource-group MyRG --location northeurope --sku Standard_LRS --kind StorageV2

# activar static website
az storage blob service-properties update --account-name mystaticstore --static-website --index-document index.html --404-document 404.html

# subir archivos (ejemplo) - asume que tiene AZURE_STORAGE_KEY o use --auth-mode login
az storage blob upload-batch --account-name mystaticstore -s ./site-files -d '$web'

Paso 2: Crear un Front Door (Premium o Standard)

Azure Front Door proporciona CDN, enrutamiento y WAF (opcional). Aquí usamos un perfil Front Door Standard/Premium. En el ejemplo usamos la CLI para crear un Front Door básico que apunta al endpoint del static website.

# crear resource group si es necesario
az group create --name MyRG --location northeurope

# crear Front Door profile (Standard_Plus o Premium_AzureFrontDoor)
az network front-door create --resource-group MyRG --name MyFrontDoor --frontend-endpoints MyFrontEnd --backend-pool-name MyBackendPool --backend-address "mystaticstore.z13.web.core.windows.net" --sku Standard_AzureFrontDoor

Paso 3: Configurar frontend endpoint y TLS (HTTPS)

Front Door crea un endpoint *.azurefd.net por defecto. Para HTTPS automático sin gestionar certificados, active TLS gestionado. Si usa un dominio personalizado, añada un CNAME y habilite HTTPS gestionado (Azure proporciona el certificado).

# ejemplo: añadir frontend custom domain (sustituya por su dominio)
az network front-door frontend-endpoint create --resource-group MyRG --front-door-name MyFrontDoor --name www --host-name www.example.com

# tras validar el CNAME en su DNS, habilitar HTTPS (managed)
az network front-door frontend-endpoint update --resource-group MyRG --front-door-name MyFrontDoor --name www --session-affinity-enabled false --certificate-source FrontDoor

Paso 4: Reglas de enrutamiento y compresión

Defina reglas para que las peticiones a Front Door se enruten al backend $web. También puede activar compresión y definir el TTL de cache para mejorar el rendimiento.

# crear route simple que enruta todos los paths al backend
az network front-door routing-rule create --resource-group MyRG --front-door-name MyFrontDoor --name DefaultRoute --frontend-endpoints MyFrontEnd --accepted-protocols Http Https --patterns-to-match '/*' --route-type Forward --backend-pool MyBackendPool

# ajustar caching y compresión vía Azure Portal (UI) si necesita reglas más granulares

Paso 5: Configurar dominio personalizado (opcional) y CNAME

Si usa un dominio personalizado, cree un registro CNAME que apunte al endpoint de Front Door (p. ej.: myfrontdoor.azurefd.net). Luego valide en Front Door y espere la emisión del certificado gestionado.

# ejemplo conceptual: en el DNS del dominio crear
# CNAME www.example.com -> myfrontdoor.azurefd.net

# en Azure, añadir y validar frontend custom (ya mostrado en el paso 3)

Verificar el resultado

Abra el endpoint de Front Door (p. ej.: https://myfrontdoor.azurefd.net o https://www.example.com). Debería ver el contenido de su index.html servido con HTTPS. Verifique los encabezados de respuesta para confirmar cache y CDN:

curl -I https://myfrontdoor.azurefd.net
# Busque encabezados como: x-cache, x-ms-request-id y un estado 200

Conclusión

Con Azure Front Door conectado a un static website en Blob Storage obtuvo CDN global, TLS gestionado y enrutamiento con poco esfuerzo. Próximos pasos: activar el WAF en Front Door Premium, ajustar el TTL de cache por ruta y configurar reglas de compresión o redirección HTTP->HTTPS. Consejo: pruebe cambios de cache con query strings y cache-busting para evitar servir contenido desactualizado.