Aplicativos Web Estáticos Grátis no Azure – Configuração e Implantação Explicadas por Tim Corey

O que são as Azure Static Web Apps e por que são importantes

No início do vídeo, Tim Corey explica que as Azure Static Web Apps permitem que você implante quantos aplicativos da web quiser de forma gratuita. Ele destaca que esses aplicativos são hospedados globalmente através dos data centers da Microsoft Azure e entregues via uma rede de entrega de conteúdo, que garante alta disponibilidade, balanceamento de carga e baixa latência para usuários que fazem requisições HTTP.

Tim aponta que esses aplicativos da web suportam autenticação, aplicativos de API e integração com APIs RESTful. Mesmo no nível gratuito, as Azure Static Web Apps fornecem segurança aprimorada e alto desempenho sem a necessidade de gerenciar servidores, máquinas virtuais ou infraestrutura subjacente. Esta é uma das importantes vantagens de usar uma plataforma como serviço em vez de gerenciar máquinas virtuais no Azure ou servidores locais.

Ele explica que as Azure Static Web Apps são ideais para aplicativos da web front-end, como HTML, CSS, JavaScript, React e Blazor WebAssembly, mas não para aplicativos que exigem processamento no servidor.

Escopo do Vídeo e Contexto do Aprendizado Azure

Tim explica que este vídeo fornece um tutorial focado em vez de uma visão geral completa de todos os serviços Azure. Embora o Azure App Service suporte muitas linguagens, aplicativos móveis, aplicativos de API e até mesmo contêineres Docker, este vídeo se concentra em um serviço específico dentro do Microsoft Azure.

Ele menciona que se os espectadores quiserem uma cobertura mais profunda de tópicos como segurança, gerenciamento de custos e aplicativos críticos, esses tópicos são abordados em seus cursos de Azure. No entanto, o objetivo aqui é mostrar o quão rapidamente um aplicativo da web pode ser criado e implantado usando as Azure Static Web Apps e a implantação contínua.

Criando um Repositório GitHub para um Site Estático

Tim começa criando um novo repositório GitHub, explicando que o GitHub é gratuito e se integra perfeitamente com os serviços Azure. Este repositório conterá o código fonte de um site estático simples.

Ele torna o repositório privado, adiciona um arquivo README e seleciona um arquivo .gitignore adequado para Visual Studio e Visual Studio Code. Tim esclarece que embora ele esteja usando o Visual Studio Code, o mesmo processo funciona com o Visual Studio.

Este repositório representa o ponto de partida para hospedar sites usando Azure. Tim enfatiza que as Azure Static Web Apps implantam diretamente do código-fonte, tornando o deploy contínuo simples e confiável.

Construindo uma Aplicação Web HTML Simples

Usando o Visual Studio Code, Tim cria um arquivo index.html, que serve como o ponto de entrada para o site. Ele usa atalhos Emmet para gerar uma estrutura HTML básica e adiciona conteúdo mínimo para demonstrar a funcionalidade.

Esta etapa mostra como aplicativos da web básicos podem ser implantados sem quaisquer serviços de backend, bancos de dados ou servidores. Tim deixa claro que esta simplicidade é intencional, pois as Azure Static Web Apps são projetadas especificamente para cargas de trabalho de front-end.

Uma vez completo, ele confirma as alterações e envia o código fonte para o GitHub, acionando o pipeline de implantação mais tarde no processo.

Criando uma Azure Static Web App no Azure Portal

Tim muda para o Azure Portal e cria um novo recurso de Static Web App. Ele explica a importância de criar um grupo de recursos, observando que grupos de recursos facilitam a gestão de recursos, limpeza de ambientes e evitam custos desnecessários.

Ele enfatiza escolher o nível Gratuito, explicando que o nível gratuito é rápido, confiável e suficiente para a maioria dos sites de pequenas empresas e projetos pessoais. Enquanto os planos do Azure App Service podem exigir um plano de serviço de aplicativo e taxas mensais, as Azure Static Web Apps no nível gratuito removem toda essa complexidade.

Tim faz uma breve referência de que seu próprio site roda em Azure Static Web Apps, demonstrando o uso real deste serviço em produção.

Conectando GitHub e Habilitando Implantação Contínua

Tim conecta a Azure Static Web App ao GitHub, selecionando o repositório e a ramificação. Ele explica que o Azure configura automaticamente um fluxo de trabalho do GitHub Actions para lidar com a implantação contínua.

Este fluxo de trabalho elimina a necessidade de etapas de implantação manual. Toda vez que o código-fonte muda, o aplicativo da web é recompilado e implantado automaticamente. Tim aponta que esta é uma característica chave das plataformas modernas de nuvem e um dos principais benefícios de usar a Microsoft Azure para hospedagem web.

Tokens de Implantação e Configuração de Segurança

Tim navega para as configurações do repositório GitHub para mostrar o token de implantação armazenado como um segredo. Este token permite comunicação segura entre o GitHub e o Azure.

Ele explica que esta configuração proporciona segurança aprimorada sem exigir que os desenvolvedores configurem credenciais manualmente. O token de API da Azure Static Web App garante que apenas fluxos de trabalho autorizados possam implantar o aplicativo.

Visualizando o Site Estático Implantado

Uma vez que a implantação é concluída, Tim abre o site ao vivo diretamente do Azure Portal. O site agora é publicamente acessível e hospedado na nuvem.

Ele explica que este mesmo processo funciona para outros frameworks de front-end, já que eles, em última análise, produzem arquivos estáticos que podem ser servidos eficientemente pelas Azure Static Web Apps. Nenhum plano de serviço de aplicativo, máquinas virtuais ou servidores de backend são necessários.

Implantando um Aplicativo Blazor WebAssembly

Tim então demonstra a implantação de um aplicativo standalone Blazor WebAssembly, enfatizando a distinção entre Blazor Web Apps e Blazor WebAssembly.

Ele explica que o Blazor WebAssembly é executado inteiramente no cliente, tornando-o adequado para Azure Static Web Apps. Tecnologias do lado do servidor como ASP.NET Core MVC, PHP ou backends Java requerem Azure Web Apps em vez disso.

Esta seção reforça que as Azure Static Web Apps são projetadas para aplicativos da web apenas no cliente.

Criando e Testando a Aplicação Blazor

Usando o Visual Studio, Tim cria o projeto Blazor WebAssembly, seleciona .NET 9 e habilita recursos como suporte a HTTPS e aplicação web progressiva.

Ele executa o aplicativo localmente para confirmar que ele funciona antes da implantação, reforçando práticas recomendadas para prontidão de produção. Uma vez verificado, ele cria um repositório GitHub diretamente do Visual Studio e envia o código-fonte.

Implantando Blazor para Azure Static Web Apps

Tim cria outro recurso de Static Web App e o conecta ao repositório Blazor. Ele destaca que o fluxo de trabalho do GitHub Actions configura automaticamente caminhos específicos para Blazor, como o diretório de saída.

Isso demonstra como a Azure suporta múltiplas linguagens de programação e frameworks sem exigir configuração manual. A plataforma abstrai a infraestrutura subjacente e a complexidade de compilação.

Processo de Construção e Conclusão da Implantação

Tim explica que as construções do Blazor levam mais tempo devido às etapas de compilação e otimização. Azure elimina partes desnecessárias da aplicação durante a implantação, melhorando o desempenho.

Uma vez completo, o aplicativo Blazor WebAssembly está ao vivo, acessível globalmente, e hospedado na infraestrutura de nuvem da Microsoft Azure.

Recursos Adicionais das Azure Static Web Apps

Tim cobre brevemente outros recursos, incluindo:

• Domínios personalizados

• Integração com API com segurança embutida

• Slots de implantação como desenvolvimento, homologação, e slots de produção

Ele explica que as APIs são protegidas automaticamente, evitando acesso não autorizado e simplificando a integração.

Limpando Recursos Usando Grupos de Recursos

Para concluir, Tim exclui o grupo de recursos, demonstrando como o Azure permite que desenvolvedores removam todos os recursos associados de uma só vez. Isso é especialmente importante ao testar serviços em nuvem para evitar custos indesejados.

Ele alerta que a exclusão de um grupo de recursos é permanente e não pode ser desfeita.

Quando Usar Azure Static Web Apps—e Quando Não

Tim encerra esclarecendo que as Azure Static Web Apps não são adequadas para cargas de trabalho do lado do servidor, como aplicativos PHP, aplicativos MVC, ou Blazor Web Apps.

Eles são ideais para aplicações da web front-end construídas com HTML, JavaScript, CSS, React, Angular, Vue e Blazor WebAssembly. Como tudo é executado no cliente, esses aplicativos podem ser hospedados inteiramente de graça.

Como Tim Corey demonstra ao longo do vídeo, as Azure Static Web Apps permitem uma forma simples, segura e totalmente gerenciada de implantar aplicativos da web modernos usando Microsoft Azure—sem se preocupar com servidores, escalonamento ou infraestrutura.