Contexto
Recentemente, me deparei com uma aplicação SPA (Single Page Application) escrita em Angular que estava sendo distribuída há muito tempo em um App Service do Azure.
App Services são plataformas como serviço (PaaS) totalmente gerenciadas, usadas para entregar aplicações web em diversas linguagens, frameworks e sistemas operacionais. Por serem gerenciadas, oferecem diversas configurações prontas para uso, como escalabilidade automática (scale up e scale out), domínios personalizados, SSL customizado, integrações de deployment com GitHub Actions, Azure DevOps, entre outras capacidades.
Mas será que um PaaS com tantas capacidades é a melhor opção para distribuir uma SPA? Provavelmente sim, mas talvez não seja a mais eficiente. Qualquer SPA moderna se resume a um conjunto de arquivos estáticos, que normalmente são baixados integralmente pelo navegador do cliente. Por isso, existem métodos mais eficientes para distribuir esses arquivos estáticos, aproveitando-se das capacidades fornecidas pelas CDNs.
CDN (Content Delivery Network) é uma rede de servidores distribuídos geograficamente, projetada para entregar conteúdo estático de maneira eficiente, aproximando esses assets do cliente final.
CDNs como Akamai, Verizon, entre outras, são extremamente cacheáveis e relativamente baratas, considerando o volume de tráfego em comparação à infraestrutura de servidores web e ao tráfego de saída de soluções de armazenamento, como o S3 e o Azure Blob Storage.
Com isso em mente, a Azure criou uma solução que combina algumas capacidades de um App Service com uma rede distribuída geograficamente para a disponibilização de assets: o serviço Static Web Apps.
Static Web Apps
Além da capacidade de distribuição de SPAs desenvolvidas em frameworks como Angular, React, Vue, Blazor, ou até em HTML simples com CSS e JavaScript, o Static Web Apps também permite a rápida integração com Azure Functions, que servirão como backend para a SPA, facilitando as restrições de CORS e simplificando a infraestrutura, já que não será necessário manter um servidor web completo [1].
Algumas das principais funcionalidades do SWA incluem (consultar as cotas de serviço [2]):
- Fácil integração com GitHub Actions e Azure DevOps Pipelines.
- Distribuição global de assets.
- Certificados SSL gratuitos.
- Permite a customização de domínios.
- Primeiros 100 GB de tráfego de saída/mês inclusos.
- Integração com sistemas de autenticação como Microsoft Entra ID e GitHub.
- Criação e publicação de múltiplos ambientes.
- SLA de 99,95%.
Pode-se argumentar que uma solução de distribuição usando Blob Storage e Azure Front Door pode alcançar o mesmo resultado, porém o Front Door possui uma precificação superior, por ser um produto mais robusto e por oferecer recursos avançados de distribuição e roteamento entre regiões, que podem ser desnecessários em casos de uso onde se deseja simplesmente entregar conteúdo estático de aplicações web.
Segue uma tabela comparativa em relação ao custo de cada solução:
| Solução | Possui tier gratuita? | Valor de contratação |
|---|---|---|
| Azure App Services | Sim | A partir de USD 73,00 no plano Standard |
| Static Web Apps | Sim | USD 9,00 por aplicativo |
| Blob Storage + Front Door | Não | (BS v2 LRS) A partir de USD 22,00 + (FD) A partir de USD 46,00 no plano Standard |
Em síntese, o Static Web App é uma alternativa simples, econômica e confiável para a distribuição de aplicações SPA em comparação a outros modelos fornecidos pelo Azure.