Contexto
Recientemente me encontré con una aplicación SPA (Single Page Application) escrita en Angular que se venía distribuyendo desde hacía mucho tiempo en un App Service de Azure.
App Services son plataformas como servicio (PaaS) totalmente gestionadas, utilizadas para entregar aplicaciones web en diversos lenguajes, frameworks y sistemas operativos. Por ser gestionadas, ofrecen diversas configuraciones listas para usar, como escalado automático (scale up y scale out), dominios personalizados, SSL personalizado, integraciones de despliegue con GitHub Actions, Azure DevOps, entre otras capacidades.
Pero, ¿será que un PaaS con tantas capacidades es la mejor opción para distribuir una SPA? Probablemente sí, pero tal vez no sea la más eficiente. Cualquier SPA moderna se reduce a un conjunto de archivos estáticos, que normalmente el navegador del cliente descarga en su totalidad. Por eso existen métodos más eficientes para distribuir esos archivos estáticos, aprovechando las capacidades que ofrecen las CDN.
CDN (Content Delivery Network) es una red de servidores distribuidos geográficamente, diseñada para entregar contenido estático de manera eficiente, acercando esos assets al cliente final.
CDNs como Akamai, Verizon, entre otras, son extremadamente cacheables y relativamente económicas, considerando el volumen de tráfico en comparación con la infraestructura de servidores web y el tráfico de salida de soluciones de almacenamiento, como S3 y Azure Blob Storage.
Con esto en mente, Azure creó una solución que combina algunas capacidades de un App Service con una red distribuida geográficamente para la publicación de assets: el servicio Static Web Apps.
Static Web Apps
Además de la capacidad de distribuir SPAs desarrolladas en frameworks como Angular, React, Vue, Blazor, o incluso en HTML simple con CSS y JavaScript, Static Web Apps también permite una rápida integración con Azure Functions, que funcionarán como backend para la SPA, facilitando las restricciones de CORS y simplificando la infraestructura, ya que no será necesario mantener un servidor web completo [1].
Algunas de las principales funcionalidades de SWA incluyen (consultar las cuotas del servicio [2]):
- Fácil integración con GitHub Actions y Azure DevOps Pipelines.
- Distribución global de assets.
- Certificados SSL gratuitos.
- Permite la personalización de dominios.
- Primeros 100 GB de tráfico de salida/mes incluidos.
- Integración con sistemas de autenticación como Microsoft Entra ID y GitHub.
- Creación y publicación de múltiples entornos.
- SLA del 99,95%.
Se puede argumentar que una solución de distribución usando Blob Storage y Azure Front Door puede lograr el mismo resultado, pero Front Door tiene un precio superior, por ser un producto más robusto y por ofrecer funciones avanzadas de distribución y enrutamiento entre regiones, que pueden ser innecesarias en casos de uso donde simplemente se desea entregar contenido estático de aplicaciones web.
A continuación, una tabla comparativa en relación con el costo de cada solución:
| Solución | ¿Tiene nivel gratuito? | Costo de contratación |
|---|---|---|
| Azure App Services | Sí | Desde USD 73,00 en el plan Standard |
| Static Web Apps | Sí | USD 9,00 por aplicación |
| Blob Storage + Front Door | No | (BS v2 LRS) Desde USD 22,00 + (FD) Desde USD 46,00 en el plan Standard |
En síntesis, Static Web App es una alternativa simple, económica y confiable para la distribución de aplicaciones SPA en comparación con otros modelos ofrecidos por Azure.