Azure Static Web Apps — Um panorama geral

7 min readFeb 21, 2023

Olá pessoal, hoje vamos falar sobre o Azure Static Web Apps e como esse recurso pode ajudá-lo a melhorar e acelerar a implantação de aplicativos web estáticos.

Introducão

Azure Static Web Apps é um novo serviço baseado em nuvem que cria e implanta automaticamente seu aplicativo web no Azure diretamente de seu repositório. É totalmente integrado com gerenciadores de código-fonte populares como GitHub, GitLab, BitBucket e Azure DevOps.

Características principais

O Azure Static Web Apps é um serviço global, portanto os recursos que estáticos do seu aplicativo são distribuídos globalmente e armazenados em cache;
Uma vez que o seu projeto é criado, a pipeline CI/CD é também criada junto ao projeto e executada automaticamente, deixando seu projeto disponível em poucos minutos;
Suporte integrado para API através do Azure Functions;
Certificados SSL gratuitos, que são renovados automaticamente;
URLs exclusivas para visualização de alterações em Pull Requests.

Considerações arquitetônicas

Os aplicativos web estáticos podem ser criados usando frameworks populares como React, Angular, Vue, Svelt ou até mesmo o Blazor, pois consistem em conteúdos estátivos como HTML, CSS e Javascript, onde geralmente dependem de uma API para prover dados.

O Azure Static Web Apps possui suporte ao Azure Functions, logo é possível a criação de uma API em conjunto no projeto, ou seja, além da criação do projeto estático que ficará em um diretório app/ no projeto, também é possível desenvolver endpoint usando o Azure Functions que ficará em uma pasta api/ dentro do mesmo projeto, com isso conseguimos ter uma separação de conteúdo estático e API, permitindo que cada um seja dimensionado usando a tecnologia mais adequada e econômica.

Essa arquitetura com servidores de conteúdo estático, back-ends utilizando o Azure Functions e fluxos de trabalho de CI/CD automatizados, simplifica seu fluxo de trabalho de desenvolvimento, permitindo que você concentre sua atenção na lógica do aplicativo e nos componentes de experiência do usuário de seu aplicativo web.

Quando utiliza-lo?

Na criação de aplicativos web modernos com frameworks front-end como Angular, React, Vue.js, Next entre outros frameworks.
Na criação de landing pages ou sites pessoais usando HTML, Javascript e CSS.

Demonstração

Para esta demonstração, vamos criar um projeto que contém apenas um arquivo HTML que representará uma página inicial muito simples.

Pré-requisitos

GitHub account
Azure account
Visual Studio Code
Azure Static Web App extension for Visual Studio Code
Git

Após a instalação de todos os pré-requisitos em sua máquina, crie um diretório com o nome de sua escolha que será utilizado pela aplicação e abra-o no Visual Studio Code. Neste diretório vamos criar um arquivo HTML e definir uma tag HTML com um texto conforme a imagem abaixo.

Com isso, basicamente temos um código pronto para realizar a implantação. Pressione F1 e procure por Azure Static Web App: Create Static Web Apps e selecione.

Na próxima etapa, precisamos selecionar a assinatura do Azure, caso não esteja logado em sua conta do Azure com o Visual Studio Code, será exibida uma opção para fazer a conexão.

Assim que selecionarmos a assinatura, aparecerá um pop-up na tela informando que é necessário criar um repositório para armazenar o código, então clique no botão Criar.

Na próxima etapa, precisamos criar uma mensagem para confirmar antes de enviar nosso código para o repositório. Digite a mensagem desejada e pressione Enter.

Agora, a extensão Azure Static Web Apps precisa de acesso à sua conta do GitHub para armazenar o código. Clique no botão Permitir para ser redirecionado para autenticar sua conta.

Nota: O pop-up abaixo não aparecerá se você já estiver conectado à sua conta.

Na próxima etapa, voltamos às configurações do Azure Static Web Apps e agora precisamos definir o nome a ser dado ao serviço no Azure.

Na próxima opção precisamos definir um nome para o Repositório GitHub.

O próximo passo é definir a região onde o recurso será criado no Azure.

Agora é o momento de definir o tipo de projeto a ser implantando, observe que o Azure Static Web Apps oferece suporte a vários frameworks e, como nosso projeto é um arquivo index.html simples, devemos selecionar a opção Custom.

Na próxima opção, precisamos definir o caminho para chegar ao arquivo index.html, como ele está na raiz do projeto, basta definir / para esta opção.

Na última etapa, precisamos definir o caminho de saída do build da aplicação, porém como nossa aplicação é um arquivo HTML simples, não precisamos definir nada, porém se o projeto for com algum outro framework, precisaríamos definir o caminho para a pasta dist ou qualquer outro padrão.

Pressione enter para começar a criar o recurso.

Uma vez terminada a criação do recurso, vamos acessar o portal do Azure para verificar o recurso que foi criado.

Selecionado o recurso, vamos copiar a url e colar em nosso navegador.

GitHub Actions

Depois de concluir todos os passos, um diretório chamado .github é criado em seu projeto e dentro dele podemos ver que um yml foi criado. Este arquivo yml representa o pipeline de implantação do projeto.

Observe que esse pipeline foi acionado automaticamente no GitHub.

URL Temporária

Existe uma funcionalidade incrível que é a possibilidade de ter uma URL temporária para analisar as alterações feitas no código durante o Pull Request, porém, assim que a pull request for finalizada, a url não estará mais disponível para uso.

Para iniciar a demonstração, crie um novo branch baseado no branch principal, fique à vontade para nomeá-lo como quiser. Agora, estando neste novo branch, vamos adicionar um novo texto no código.