Blog Post

Desenvolvedores BR
15 MIN READ

Este Mês no Azure Static Web Apps | 10/2024

Glaucia_Lemos's avatar
Glaucia_Lemos
Icon for Microsoft rankMicrosoft
Dec 03, 2024

Quer saber os principais insights sobre Azure Static Web Apps em outubro de 2024? Reunimos os conteúdos mais relevantes da comunidade técnica aqui! Contribua também e veja seu trabalho nos destaques do próximo mês! 🚀

Estamos de volta com mais uma edição da Comunidade Azure Static Web Apps! 🎉

Outubro foi um mês repleto de conteúdos incríveis criados pela Comunidade Técnica! 🚀

Lembrando que, caso você queira aprender mais sobre o Azure Static Web Apps, temos:

Quer aparecer aqui no próximo mês, mas não sabe como? Continue lendo o artigo e descubra como participar ao final deste artigo! 😉

🥳Agradecimentos Especiais

Agradecemos a todos que contribuíram com conteúdos incríveis para a comunidade! Vocês são a razão pela qual esta comunidade é tão especial! ❤️

Vamos aos destaques do mês!

🌟Destaques de Conteúdos da Comunidade – Outubro 2024

Abaixo estão os principais conteúdos criados pela comunidade neste mês.

Vídeo: Azure Data API Builder Community Standup - Static Web Apps

 

O conteúdo apresentado na Azure Data API Builder Community Standup destaca como o Azure Static Web Apps simplifica o desenvolvimento e a implantação de aplicações estáticas integradas a bancos de dados na Azure. Durante a apresentação, foram exploradas as possibilidades de conectar aplicações front-end a bancos como Cosmos DB, Azure SQL, MySQL e PostgreSQL, utilizando endpoints REST ou GraphQL fornecidos pelo Data API Builder.

A integração com o Azure Static Web Apps oferece uma experiência gerenciada para o Data API Builder, eliminando a necessidade de gerenciar containers e garantindo uma configuração simples e eficiente. Foram discutidas práticas como a inicialização automática de conexões com bancos de dados através do comando swad db init e o uso de arquivos de configuração para definir esquemas e permissões de acesso.

O recurso de Database Connections foi destacado como uma funcionalidade atualmente em preview, mas já disponível para casos de uso que demandam alta rapidez na criação de APIs. O serviço é ideal para construir provas de conceito de forma ágil e escalável, utilizando a integração com repositórios GitHub ou Azure DevOps para deploy contínuo.

Adicionalmente, o uso do Azure Static Web Apps para hospedar recursos front-end como React e Blazor foi mencionado como uma forma prática de combinar APIs de dados e interfaces de usuário, tudo em um ambiente otimizado para desenvolvedores. A sessão também incluiu um exemplo prático de criação de uma aplicação CRUD conectada ao Cosmos DB, ressaltando como o Azure Static Web Apps facilita a implementação rápida e segura de projetos modernos.

Explore mais detalhes sobre as capacidades e práticas recomendadas do Azure Static Web Apps no conteúdo completo.

Artigo: Hugo Deployed to Azure Static Web Apps

 

O artigo "Hugo Deployed to Azure Static Web Apps" detalha o processo de implantação de sites criados com Hugo no serviço Azure Static Web Apps (SWA), destacando a simplicidade e flexibilidade oferecida pela integração com GitHub Actions.

A publicação apresenta um guia passo a passo para configurar uma aplicação estática no Azure, incluindo a autenticação com GitHub, seleção de repositório, e configuração de presets específicos para Hugo. Além disso, o artigo aborda questões comuns relacionadas à versão do Hugo, explicando como personalizar o arquivo de workflow no GitHub Actions para definir variáveis de ambiente, como PLATFORM_NAME e HUGO_VERSION, e garantir que a build seja executada corretamente.

A integração com o Azure SWA é destacada como uma solução eficiente para gerenciar deploys automatizados, enquanto o uso de ferramentas como Oryx é sugerido para controle adicional no processo de build. A publicação também explora o potencial de customização da infraestrutura para atender a necessidades específicas.

Com orientações claras e práticas, o artigo é uma excelente introdução ao uso do Azure Static Web Apps para desenvolvedores interessados em implantar sites com Hugo de maneira rápida e eficiente.

Artigo: Implementing CI/CD for Azure Static Web Apps with GitHub Actions

O artigo Implementing CI/CD for Azure Static Web Apps with GitHub Actions apresenta um guia completo para configurar pipelines de integração contínua e entrega contínua (CI/CD) com Azure Static Web Apps. Ele destaca como a integração nativa com o GitHub simplifica o processo de deploy automático, permitindo que alterações sejam publicadas assim que os códigos são enviados para o repositório.

Entre os benefícios apresentados estão o suporte integrado para frameworks populares como React, Angular e Vue.js, e recursos como domínios personalizados, certificados SSL automáticos e entrega global de conteúdo. O artigo detalha as etapas de configuração, desde a criação do recurso no portal Azure até a geração automatizada de workflows no GitHub Actions.

Além disso, são exploradas práticas recomendadas, como o uso de Azure Key Vault para segurança de credenciais e caching para otimizar os tempos de build e deploy. O monitoramento das implantações é abordado com ferramentas nativas do Azure e integrações com Slack ou Microsoft Teams para notificações em tempo real.

O artigo destaca a relação custo-benefício do Azure Static Web Apps, especialmente para projetos pequenos ou startups, graças ao seu plano gratuito que inclui recursos essenciais. Confira o conteúdo completo para entender como aplicar essas práticas ao seu fluxo de trabalho e aproveitar os benefícios dessa solução gerenciada.

Artigo: Deploying your portal with Azure Static Web Apps

O conteúdo detalha o passo a passo para implementar um portal utilizando Azure Static Web Apps, conectando um repositório GitHub ao serviço para deploy automatizado. O processo inclui a criação de um Static Web App no Azure, configuração de repositórios e branches no GitHub, e uso de GitHub Actions para automação do build e deploy.

O artigo destaca a integração com o GitHub para simplificar o fluxo de desenvolvimento e o suporte a ferramentas de build, como Hugo, para gerar sites estáticos. Além disso, menciona a URL gerada automaticamente no Azure para acessar o portal após a publicação. Confira o material completo para entender como o Azure Static Web Apps facilita a criação e publicação de aplicações estáticas.

Vídeo: A Beginner's Guide to Azure Static Web Apps Free Hosting for Blazor, React, Angular, Vue, & more!

 

O vídeo demonstra o processo passo a passo para hospedar uma aplicação React utilizando o Azure Static Web Apps, destacando os benefícios dessa plataforma para desenvolvedores de front-end. Ele explora as diferenças entre o Azure Static Web Apps e o Azure App Service, explicando que o primeiro é ideal para aplicações estáticas e fornece recursos como pipelines de CI/CD automáticos e integração com GitHub para deploy contínuo.

O tutorial cobre a criação de um Resource Group no portal do Azure, a configuração do serviço de Azure Static Web Apps, e a seleção do código fonte diretamente do GitHub. A funcionalidade de pipelines automáticos é destacada, garantindo que qualquer atualização no código da branch principal seja automaticamente publicada no ambiente de produção.

Além disso, o vídeo explica como personalizar o deploy, ajustar pastas de saída no build do projeto e adicionar domínios customizados para personalizar a URL da aplicação. A plataforma é elogiada pela sua simplicidade e agilidade, sendo recomendada para projetos pessoais, hobbies ou até mesmo para produção, dependendo das demandas do aplicativo.

Assista ao vídeo para obter instruções detalhadas e entender como essa solução pode simplificar o deploy de aplicações modernas com frameworks como React, Angular, Vue e Next.js.

Artigo: Configure File in Azure Static Web Apps

O artigo Configure File in Azure Static Web Apps explora como personalizar configurações no serviço Azure Static Web Apps por meio do arquivo staticwebapp.config.json. Ele apresenta diferentes cenários de configuração dependendo do tipo de aplicação: sem framework, com frameworks pré-compilados (como MkDocs) e frameworks construídos durante o processo de deployment (como React).

São abordados exemplos práticos, como a customização do cabeçalho Access-Control-Allow-Origin, detalhando onde posicionar o arquivo de configuração e como ajustar workflows de CI/CD, seja usando GitHub Actions ou Azure DevOps. O artigo também destaca boas práticas para integrar variáveis de ambiente e lidar com diretórios de build dinâmicos, garantindo que as configurações sejam aplicadas corretamente.

Este é um guia essencial para desenvolvedores que buscam personalizar suas aplicações no Azure Static Web Apps e otimizar o processo de deployment com frameworks modernos. Explore o artigo completo para aprender mais.

Vídeo: User Group App - Day 2: Deploy to Static Web Apps

 

O vídeo apresenta um passo a passo para implantar uma aplicação no Azure Static Web Apps de forma automatizada. Durante a demonstração, os apresentadores exploram diferentes abordagens para configurar e gerenciar o serviço, destacando o uso de ferramentas como o Azure CLI e o Azure Developer CLI para simplificar o processo de criação de recursos e deploy.

Eles também discutem boas práticas de automação, como a geração de scripts reutilizáveis e a integração com pipelines CI/CD via GitHub Actions. O conceito de "automatizar tudo" é enfatizado como uma estratégia essencial para garantir consistência e eficiência nos projetos. Além disso, são abordados os desafios e configurações necessários para vincular repositórios GitHub ao serviço, tornando o deploy de novas versões mais ágil e integrado.

Confira o vídeo completo para aprender a estruturar e automatizar a implantação de aplicações usando o Azure Static Web Apps.

Documentação: Static React Web App + Functions with C# API and SQL Database on Azure

O conteúdo apresenta um passo a passo para criar e implantar uma aplicação estática utilizando Azure Static Web Apps, com front-end em React e back-end baseado em Azure Functions com API escrita em C# e banco de dados Azure SQL. A arquitetura destaca a integração com serviços complementares, como Azure Monitor para monitoramento, e Azure Key Vault para segurança de credenciais.

O guia inclui um template que permite personalização e rápida configuração por meio do Azure Developer CLI (azd), facilitando o provisionamento e o deploy com comandos simples como azd up. Além disso, são abordados recursos de segurança, como identidades gerenciadas (Managed Identities), e opções avançadas como integração com APIM (Azure API Management) para proteção do backend.

O conteúdo ainda explora como configurar pipelines de CI/CD, realizar monitoramento ativo e depurar localmente, demonstrando a flexibilidade e o potencial de Azure Static Web Apps como uma solução prática e escalável para aplicações modernas.

Artigo: Simple Steps to Deploy Angular Application on Azure Service

O artigo oferece um guia detalhado para implantar aplicações Angular utilizando Azure Static Web Apps, abordando desde os pré-requisitos até o lançamento da aplicação em produção. Ele enfatiza como esse serviço do Azure simplifica o processo de deploy, proporcionando integração com o GitHub, automação de pipelines e infraestrutura escalável.

Primeiramente, são apresentados os fundamentos para iniciar o projeto, como a criação de um repositório no GitHub, a configuração da aplicação Angular usando Angular CLI e o Node.js. A partir daí, o artigo explora a criação de um recurso de Static Web App no portal do Azure, onde é possível configurar diretamente a integração com o repositório GitHub. Essa integração permite que todo o processo de build e deploy seja automatizado, garantindo agilidade e precisão.

Um dos destaques é a simplicidade no uso dos presets do Azure para Angular, otimizando as etapas de configuração, como a definição do diretório da aplicação e da pasta de saída (output) onde ficam os arquivos finais do build. O artigo também reforça que o Azure Static Web Apps oferece benefícios como infraestrutura global para minimizar latência, medidas de segurança avançadas para proteger os dados da aplicação e alta confiabilidade na entrega de conteúdo.

Por fim, o processo de implantação é descrito como eficiente e descomplicado, com a aplicação sendo publicada em poucos minutos após o início do deploy. A URL gerada no Azure torna a aplicação acessível globalmente, garantindo performance otimizada para os usuários.

O artigo não apenas apresenta os passos técnicos para utilizar o Azure Static Web Apps, mas também destaca sua capacidade de melhorar a experiência do desenvolvedor e oferecer soluções escaláveis para aplicações Angular. Explore o conteúdo completo para entender cada etapa e aproveitar ao máximo essa poderosa ferramenta do Azure.

Artigo: End-to-End Full-Stack Web Application with Azure AD B2C Authentication: A Complete Guide

O artigo apresenta a criação de uma aplicação full-stack utilizando Azure Static Web Apps para hospedar o frontend desenvolvido em React, integrado com Azure AD B2C para autenticação e autorização. O serviço é destacado pela facilidade de deploy automatizado via GitHub Actions, permitindo a configuração de pipelines de CI/CD que gerenciam a construção e publicação do frontend diretamente na plataforma.

São exploradas práticas de configuração de variáveis de ambiente específicas para o Azure Static Web Apps, como URLs de redirecionamento e escopos de autenticação, para garantir integração eficiente com o backend. O artigo também aborda como o Azure Static Web Apps se conecta com serviços complementares, como Azure Web Apps para o backend e Azure SQL Database, formando uma arquitetura moderna e escalável.

A documentação ainda reforça o uso de ferramentas como MSAL para gerenciar fluxos de login no frontend e destaca a simplicidade do Azure Static Web Apps em suportar aplicações modernas e seguras. Para mais detalhes sobre a implementação e configuração, acesse o artigo completo.

Artigo: Case Study: E-Commerce App Deployment Using Azure AKS

O case study explora o uso de Azure Static Web Apps para hospedar o front-end de uma aplicação e-commerce baseada em microservices, destacando sua integração com o Azure Kubernetes Service (AKS). O artigo demonstra como o serviço permite conectar APIs backend hospedadas no AKS com facilidade, utilizando domínios personalizados configurados via Ingress e Nginx.

O front-end desenvolvido em ReactJS é implantado no Azure Static Web Apps, aproveitando sua simplicidade de configuração e suporte integrado a APIs. O uso de chamadas de API com fetch() para consumir os serviços backend é demonstrado, destacando como o serviço possibilita uma experiência fluida entre front-end e backend.

Além disso, são abordadas práticas recomendadas para testar e validar a integração entre o front-end e os microservices, garantindo desempenho e acessibilidade. O case study reforça como o Azure Static Web Apps é uma escolha eficiente para aplicações modernas que utilizam arquitetura baseada em microservices.

Artigo: Getting Started with Azure Blob Storage: A Step-by-Step Guide to Static Web Hosting

O artigo explora como usar o Azure Blob Storage para hospedar sites estáticos, oferecendo uma alternativa ao Azure Static Web Apps para casos específicos. Ele destaca o processo de configuração passo a passo, desde a criação da conta de armazenamento até a habilitação da funcionalidade de site estático. O conteúdo também compara as vantagens e limitações de cada serviço, reforçando que, embora o Azure Blob Storage seja uma solução eficiente para sites estáticos simples, o Azure Static Web Apps oferece recursos mais robustos, como integração nativa com repositórios GitHub e Azure DevOps, suporte a APIs serverless com Azure Functions e configurações otimizadas para desenvolvimento moderno.

O artigo serve como um guia para entender quando utilizar Azure Blob Storage e quando optar por Azure Static Web Apps, considerando o tipo de aplicação, as necessidades de escalabilidade e os recursos disponíveis. Explore o artigo completo para descobrir qual solução atende melhor aos seus projetos.

Artigo: Canonical URL Troubleshooting - Managing Canonical URLs in Static Web Apps for SEO Optimization

O artigo aborda as complexidades de gerenciar URLs canônicas em Azure Static Web Apps para otimizar o SEO de sites estáticos. Ele explora problemas comuns, como variações de URLs (/projectmechanics, /projectmechanics/, /projectmechanics/index.html), que podem resultar em penalidades por conteúdo duplicado nos mecanismos de busca.

O autor relata suas tentativas de solução, incluindo o uso de tags canônicas no cabeçalho das páginas e a configuração de redirecionamentos no arquivo staticwebapp.config.json. Apesar de ser um passo importante, essas abordagens não resolveram totalmente os desafios apresentados.

A solução mais eficaz foi integrar o Azure Static Web Apps ao Cloudflare Page Rules, aproveitando as capacidades de redirecionamento da Cloudflare para configurar redirecionamentos permanentes (301) e consolidar URLs canônicas. Essa combinação garantiu um gerenciamento de URLs mais eficiente, eliminando conflitos e otimizando a experiência para usuários e mecanismos de busca.

O artigo é uma leitura essencial para desenvolvedores que buscam fortalecer o SEO em projetos estáticos e entender como integrar soluções complementares como Cloudflare com Azure Static Web Apps. Confira o artigo completo para um guia detalhado e links úteis para configuração.

Artigo: 1.4b Deploy application with Azure App Service Part 2

O artigo detalha o processo de implantação de aplicativos usando Azure App Service, abordando tanto o back-end quanto o front-end, com foco em garantir a comunicação fluida entre os componentes. Embora o principal destaque esteja na utilização do Maven Azure Web App Plugin para aplicativos Java, o conteúdo também é relevante para desenvolvedores interessados na integração com Azure Static Web Apps.

Os pontos de destaque incluem:

  • Preparação e Configuração: Como preparar aplicativos para implantação, criando pacotes (WAR e ZIP) e configurando corretamente o pom.xml para o Maven.
  • Implantação Back-end: Uso do Maven para criar e/ou atualizar o serviço do App Service automaticamente.
  • Implantação Front-end: Configuração e implantação de um aplicativo ReactJS, enfatizando o uso de comandos Azure CLI para gerenciar serviços, configurar arquivos de inicialização e reiniciar o aplicativo para aplicar mudanças.
  • Verificação e Testes: Orientações para garantir que os serviços implantados estejam funcionando conforme esperado e para depurar problemas, como cache do navegador.
  • Limpeza de Recursos: Instruções sobre como remover recursos para evitar custos desnecessários após os testes.

O artigo oferece insights valiosos sobre como usar o Azure Static Web Apps para front-ends de aplicações integradas, mencionando a importância de recursos como autenticação e suporte a APIs serverless para aplicativos modernos. Desenvolvedores podem explorar a sinergia entre o Azure App Service e o Azure Static Web Apps para maximizar a eficiência de seus projetos.

Para mais detalhes, leia o artigo completo e explore os links para documentação adicional.

Conclusão

Outubro foi um mês inspirador, repleto de contribuições incríveis da comunidade técnica sobre Azure Static Web Apps! 💙

Gostaríamos de agradecer a todos os autores e criadores de conteúdos que dedicaram seu tempo para compartilhar seus conhecimentos, ajudando a fortalecer ainda mais esta comunidade incrível. Cada artigo, vídeo e projeto contribui para enriquecer o aprendizado e promover a adoção dessa poderosa tecnologia.

Se você quer aprender mais, confira a documentação oficial, explore os tutoriais e faça parte da comunidade técnica que está transformando o desenvolvimento de aplicações estáticas.

🚀 Como participar ou ver seu conteúdo em destaque?

  1. Crie algo incrível (artigo, vídeo ou projeto) sobre Azure Static Web Apps.
  2. Compartilhe nas redes sociais com a hashtag #AzureStaticWebApps.
  3. Publique no repositório oficial no GitHub e participe das discussões mensais.

Se você gostou deste artigo, compartilhe com sua rede para que mais pessoas possam se beneficiar desses conteúdos! Use os botões de compartilhamento ou copie o link diretamente. Sua participação ajuda a promover conhecimento e fortalece nossa comunidade técnica. Vamos juntos construir um ecossistema mais conectado e colaborativo! 💻✨

Até a próxima edição, e continue explorando o potencial do Azure Static Web Apps! 👋

Updated Dec 03, 2024
Version 1.0
No CommentsBe the first to comment