Estamos de volta com mais uma edição da Comunidade do Azure Static Web Apps! Este mês foi repleto de ótimos conteúdos criados por membros da nossa comunidade. Se você deseja expandir seus conhecimentos ou está apenas começando, essa seleção de artigos, vídeos e tutoriais vai te guiar!

Para quem deseja ver o próprio conteúdo sendo compartilhado aqui, basta seguir os passos abaixo e quem sabe você estará nos destaques do mês que vem!

Como Participar

Crie um conteúdo sobre Azure Static Web Apps (artigo, vídeo, projeto, ou podcast).

Compartilhe nas redes sociais com a hashtag #AzureStaticWebApps.

Compartilhe também no nosso repositório oficial do Azure Static Web Apps no GitHub, na aba Discussions. Lá você encontrar um tópico chamado: This Month In Azure Static Web Apps. Compartilhe o link do seu conteúdo lá de acordo com o mês que você deseja que ele seja compartilhado.

Pronto! Nós iremos compartilhar o seu conteúdo no TechCommunity da Microsoft no mês seguinte!

Vamos conferir o que nossa comunidade trouxe de interessante em agosto de 2024?

Agradecimentos!

Um enorme agradecimento a cada um de vocês que contribuiu com seus conteúdos em agosto! Vocês arrasam e estão impulsionando essa comunidade cada vez mais! 🚀

Destaques de Conteúdos da Comunidade – Agosto 2024

Agora, vamos para os conteúdos compartilhados no mês de agosto de 2024!

Vídeo: What are Azure Static Web Apps? | 1 Minute Overview

Autor: Frankie Riviera

Se você está buscando uma explicação rápida e direta sobre o que é o Azure Static Web Apps, este vídeo de 1 minuto do Frankie Riviera é para você! Ideal para quem está começando e quer ter uma visão clara das funcionalidades.

Artigo: Static Sites on Azure Storage vs Azure Static Web Apps

Autor: John Kilmister

Neste artigo, John Kilmister compara dois serviços da Azure para hospedagem de sites estáticos: Azure Storage e Azure Static Web Apps. Enquanto o Azure Storage oferece uma solução simples e direta para armazenar e exibir arquivos estáticos, o Azure Static Web Apps apresenta uma abordagem mais robusta com recursos como integração com APIs via Azure Functions, CI/CD automatizado, e autenticação integrada. A escolha entre os dois serviços depende da complexidade do site e das necessidades de funcionalidades avançadas, como a gestão de rotas, erros personalizados, e APIs.

Para entender melhor as diferenças entre esses serviços e descobrir qual é a melhor opção para o seu projeto, leia o artigo completo e tire suas dúvidas sobre como escolher entre Azure Storage e Azure Static Web Apps!

Link: Static Sites on Azure Storage vs Azure Static Web Apps

Artigo: Azure Static Web App vs Azure App Service?

Autor: Kuntumallashivani

Neste artigo, Kuntumallashivani faz uma comparação detalhada entre dois serviços da Azure para hospedar aplicações web: Azure Static Web Apps e Azure App Service. Enquanto o Azure Static Web Apps se destaca por ser uma solução otimizada para conteúdo estático, com recursos como suporte a APIs serverless, integração com GitHub e entrega global de conteúdo, o Azure App Service é uma plataforma mais flexível, ideal para aplicações dinâmicas que exigem suporte a múltiplos frameworks e escalabilidade avançada.

A decisão entre essas duas opções depende da complexidade da sua aplicação e das funcionalidades que você precisa, como integração com outros serviços da Azure, gestão de domínios personalizados, ou um fluxo de desenvolvimento simplificado com alta performance.

Para entender melhor essas diferenças e escolher a melhor plataforma para o seu projeto, leia o artigo completo e descubra qual serviço da Azure é o mais adequado para suas necessidades!

Link: Leia no Medium

Documentação: Tutorial: Build an image analysis web app with TypeScript

Autor: Microsoft

Nessa documentação atualizada, você aprenderá a criar e implantar uma aplicação de análise de imagens usando React/TypeScript e os serviços de Visão Computacional da Azure. O passo a passo aborda desde a configuração dos recursos no Azure, como o Computer Vision, até a integração com o GitHub para automação do deploy via GitHub Actions.

O tutorial ensina como desenvolver a aplicação utilizando React/TypeScript para realizar a análise de imagens com a Visão Computacional, explicando a configuração de recursos no Azure, como a criação do Computer Vision, e como adicionar variáveis de ambiente e integrar as chaves e endpoints necessários. Ele também detalha a execução da aplicação localmente, utilizando o comando npm start, e como fazer o push para o GitHub, ativando o processo automático de build e deploy no Azure Static Web Apps.

O código da aplicação é modularizado, separando as funcionalidades de Visão Computacional, a análise de imagens e a exibição dos resultados em formato JSON, garantindo uma implementação clara e organizada. Após concluir o tutorial, você será orientado sobre como excluir os recursos no Azure para evitar cobranças adicionais, utilizando o Azure CLI ou o VS Code.

Se você está buscando aprender a integrar Visão Computacional com React e aproveitar os serviços da Azure, não deixe de seguir este tutorial/documentação completo e prático!

Link: Build an image analysis web app with TypeScript

Documentação: Relocate Azure Static Web Apps to another region

Autor: Microsoft

Nessa outra documentação atualizada, você aprenderá como migrar um Azure Static Web App para outra região. A migração pode ser útil para aproveitar novas regiões, acessar serviços específicos ou cumprir requisitos de governança. A documentação aborda os pré-requisitos, como verificar a disponibilidade na nova região e ajustar permissões. Além disso, ele explica como preparar a aplicação, atualizando endpoints, chaves de API e templates de deploy. O processo inclui o redeploy na nova região e a atualização dos repositórios para garantir uma transição suave.

Se você precisa mover seu Static Web App para outra região, leia este guia completo para garantir uma migração eficiente!

Link: Relocate Azure Static Web Apps to another region

Blog: Using Environment Variables in Azure Static Web Apps

Autor: Poespas Blog

Neste artigo, você aprenderá como utilizar variáveis de ambiente no Azure Static Web Apps para proteger dados sensíveis e garantir uma configuração segura. Ele explica como criar um arquivo settings.json no projeto, onde serão armazenadas as variáveis em formato de pares chave-valor, como DB_HOST, DB_USER e DB_PASSWORD. O artigo também detalha como acessar essas variáveis no código através do objeto process.env para que sua aplicação possa utilizá-las de forma eficiente.

Além disso, são abordadas boas práticas de segurança, como o uso de Azure Key Vault para armazenar chaves secretas, controle de acesso baseado em função (RBAC) para restringir permissões, e monitoramento constante para identificar possíveis falhas de segurança.

Se você deseja aumentar a escalabilidade, segurança e manter a integridade das suas aplicações web no Azure, este artigo oferece um guia completo sobre como implementar e gerenciar variáveis de ambiente de forma segura.

Quer saber mais? Leia o artigo completo para entender como configurar variáveis de ambiente em Azure Static Web Apps e elevar a segurança da sua aplicação!

Link: Using Environment Variables in Azure Static Web Apps

Vídeo: Create Azure Static Web Apps API with C# Http Trigger

Autor: TechWebDots

Neste vídeo, você aprenderá como criar uma API simples utilizando C# Http e integrá-la ao seu Azure Static Web App. Uma excelente opção para quem trabalha com Backend e deseja explorar o potencial dessa tecnologia.

Artigo: Using AZD for faster incremental Azure Static Web App deployments in GitHub Actions

Autor: John Reilly

Neste artigo, John Reilly ensina a como utilizar o Azure Developer CLI (azd) para acelerar os deploys incrementais usando o Azure Static Web Apps dentro do GitHub Actions. O autor detalha as melhorias trazidas pela versão 1.4 do azd, que permite pular a reprovisionamento de infraestrutura quando não há mudanças, reduzindo o tempo de deploy de 3 minutos para 20 segundos.

O artigo também aborda as mudanças necessárias nos arquivos de configuração do projeto, como o azure.yml e o main.bicep, para garantir que o azd funcione de forma otimizada. Além disso, explica como substituir o comando az deployment group create pelo azd provision no fluxo de trabalho do GitHub Actions, simplificando o processo de deploy e usando variáveis de ambiente para autenticação e parametrização.

Com essas configurações, o artigo mostra como é possível acelerar significativamente o tempo de deploy de infraestrutura, sem precisar alterar o método de deploy do código da aplicação, o que permite uma transição gradual para o uso completo do azd.

Quer saber como otimizar seus deploys no Azure Static Web Apps e economizar tempo nas suas pipelines de CI/CD? Leia o artigo completo e descubra todos os detalhes sobre essas melhorias de performance!

Link: Using AZD for faster incremental Azure Static Web App deployments in GitHub Actions

Documentação: Step 3 – Deploy the search-enabled .NET website

Autor: Microsoft

Nessa outra documentação, você aprenderá como realizar o deploy de uma aplicação .NET com Azure AI Search, utilizando o Azure Static Web Apps. A solução inclui um Front-End em React e uma API no Back-End, gerenciada com Azure Functions para operações de busca.

O tutorial começa com a criação de um recurso do Azure Static Web Apps no Visual Studio Code com uso de uma extensão, onde você irá configurar o ambiente, criar os recursos no Azure, e preparar o workflow no GitHub para deploy contínuo. Em seguida, você adicionará variáveis de ambiente necessárias, como chaves de API, no portal do Azure para garantir a integração da busca.

A seção de resolução de problemas orienta como identificar e corrigir falhas na implantação, desde erros no GitHub Actions até problemas de configuração no Front-end ou na API. A documentação também inclui orientações detalhadas sobre como limpar os recursos criados e como deletar o grupo de recursos no Azure.

Se você está procurando implementar uma solução de busca poderosa em sua aplicação .NET, leia essa documentação agora mesmo para que você possa entender o processo passo a passo!

Link: Step 3 – Deploy the search-enabled .NET website

Blog: Blazor WASM in Azure Static Web Apps 404 when authenticating with Entra ID

Autor: Marius Solbakken

Neste artigo, é abordado como resolver o erro 404 que ocorre em uma Azure Static Web App utilizando Blazor WASM e Entra ID, ao tentar redirecionar para a autenticação/login. O problema acontece porque o arquivo web.config, comum nos projetos Blazor WASM, não é compatível com Azure Static Web Apps.

A solução proposta é simples: basta adicionar um arquivo staticwebapp.config.json na pasta wwwroot do projeto. Esse arquivo deve conter a seguinte configuração: { “navigationFallback”: { “rewrite”: “/index.html” } }, que redireciona todas as navegações para o index.html, resolvendo o problema de redirecionamento e autenticação.

Se você deseja entender mais sobre essa configuração e como corrigir o erro de redirecionamento nas suas aplicações Blazor WASM hospedadas no Azure, leia o artigo completo e descubra como aplicar essa solução!

Link: Blazor WASM in Azure Static Web Apps 404 when authenticating with Entra ID

Blog: Deploy a Highly Available Static Website on Azure Using Terraform

Autor: Baivab Mukhopadhyay

Neste artigo, é explicado como hospedar um site estático altamente disponível no Azure utilizando o Terraform. Existem várias opções para hospedar sites estáticos no Azure, como Azure Blob Storage, Azure Static Web Apps, Azure App Service, Azure CDN e Azure Functions. No entanto, a melhor escolha para garantir alta disponibilidade é usar uma combinação do Azure Front Door com uma conta de armazenamento do Azure Blob, oferecendo uma solução confiável e econômica para hospedar arquivos HTML, CSS e JavaScript.

Para aplicações de página única (SPA), o processo é simplificado, pois apenas o arquivo index.html precisa ser carregado inicialmente, enquanto o framework do frontend gerencia a renderização dos componentes e as chamadas de API.

Ao invés de criar essa infraestrutura manualmente pelo portal do Azure, o uso do Terraform é recomendado. O Terraform, uma ferramenta de Infraestrutura como Código (IaC), automatiza e facilita a criação e gestão de recursos na nuvem, permitindo reutilização, versionamento e compartilhamento dos arquivos de configuração.

Se você quer aprender mais sobre como configurar um site estático altamente disponível no Azure e como o Terraform pode otimizar esse processo, leia o artigo completo e descubra como aplicar essas práticas no seu projeto!

Link: Deploy a Highly Available Static Website on Azure Using Terraform

Vídeo: Add Custom Domain to Azure Static Web App | 4 Minute Tutorial

Autor: Azure Innovation Station

No vídeo, o apresentador ensina como adicionar um domínio personalizado a um Azure Static Web App em quatro minutos. Ele já tem um aplicativo web estático criado e usa um domínio externo do Namecheap. Para configurar o domínio, ele gera um registro TXT para validar a propriedade do domínio no Azure. Após a validação, ele cria um registro de alias no Namecheap para apontar o domínio personalizado ao seu Azure Static Web App. O processo é concluído com sucesso, permitindo que o site seja acessado pelo novo domínio.

Quer saber mais? Veja o vídeo completo e aprenda a configurar seu domínio personalizado no Azure!

Link: Add Custom Domain to Azure Static Web App | 4 Minute Tutorial

Vídeo: Okta + Azure Static Web Apps: Seamless Authentication for Angular Developers

Autor: Sparrow Note

O vídeo demonstra como autenticar um Azure Static Web App usando o Okta, um provedor de gerenciamento de identidade e acesso. Ele ensina a criar um aplicativo web estático no plano Standard do Azure, configurar o Okta para login e logout, e integrar as credenciais do Okta na aplicação. O processo também inclui a criação de uma pipeline de lançamento no Azure DevOps para implantar o aplicativo e testar o fluxo de login, verificando os detalhes de usuário e cookies após a autenticação.

Aprenda mais sobre como integrar o Okta ao seu projeto para uma autenticação segura e eficiente!

Documentação: Data API builder and Azure SQL database quickstart

Autor: Microsoft

Esse tutorial incrível é demonstrado como criar uma aplicação Blazor Web Assembly que utiliza o Data API builder para se conectar ao banco de dados Azure SQL. A aplicação faz uso do Azure Static Web Apps para hospedar o front-end e integra outros serviços da Azure, como Azure Functions para lógica de negócios e Azure Storage para metadados. O tutorial ensina como provisionar e configurar todos os recursos necessários usando o Azure Developer CLI e como configurar pipelines de CI/CD para deploy contínuo.

Se você quer aprender a construir aplicações usando Azure Static Web Apps e outros recursos da Azure, confira o tutorial completo!

Link: Data API builder and Azure SQL database quickstart

Vídeo: Make a blog site with Astro, Frontmatter CMS, and Azure Static Web Apps

Autor: Graybush Labs

O vídeo apresenta uma demonstração de como criar um blog usando Astro, Frontmatter CMS e Azure Static Web Apps. O autor escolheu essas ferramentas por sua simplicidade e eficiência na criação de sites estáticos, com o Astro atuando como framework flexível e o Frontmatter CMS permitindo o gerenciamento de conteúdo diretamente no Visual Studio Code, sem a necessidade de um banco de dados. O site é implantado via Azure Static Web Apps, com integração ao GitHub para automatizar o deploy. O autor destaca a facilidade do processo e convida os espectadores a darem feedback e se envolverem na discussão.

Explore essas ferramentas e veja como podem otimizar seu próximo projeto!

Azure Functions Community Standup – Performance testing and cost optimizing HTTP function apps

Autor: https://www.youtube.com/@AzureDevelopers

Neste Azure Functions Community Standup, foi apresentado como otimizar o desempenho e reduzir os custos de aplicativos HTTP utilizando a integração do Azure Load Testing com o Azure Functions. O destaque foi para a facilidade de realizar testes de carga em grande escala diretamente no portal do Azure Functions, ajudando os desenvolvedores a identificar gargalos de desempenho e ajustar a infraestrutura conforme necessário. Além disso, foi demonstrado o uso do novo plano Flex Consumption e da ferramenta Performance Optimizer para testar diferentes configurações de escalabilidade e concorrência, otimizando o desempenho e os custos.

O evento também explorou como integrar essas ferramentas com o Azure Static Web Apps, proporcionando uma solução completa para hospedar o front-end de suas aplicações e utilizar o Azure Functions para lidar com a lógica de negócios no back-end, garantindo que suas aplicações possam escalar de maneira eficiente e econômica.

Se você quer aprender a melhorar o desempenho e otimizar custos em suas aplicações com Azure Static Web Apps e Azure Functions, confira o conteúdo completo do standup e explore essas soluções!

Building Production Ready Infrastructure on Azure with ARM Templates Bicep Terraform workshop 2

Autor: Igor Iric

Neste workshop sobre “Building Production Ready Infrastructure on Azure with ARM Templates Bicep Terraform workshop 2”, foi discutido como utilizar ARM Templates, Bicep e Terraform para automatizar o deploy de infraestrutura em nuvem utilizando o conceito de Infrastructure as Code (IaC). O foco foi na criação de uma infraestrutura pronta para produção no Microsoft Azure, cobrindo desde redes virtuais e grupos de segurança até serviços como Azure Functions, Azure Cosmos DB e Service Bus.

A demonstração prática incluiu o uso do GitHub Actions para automatizar a criação e o deploy de aplicativos como Azure Static Web Apps e App Services, mostrando como é possível integrar o front-end e o back-end de forma fluida, além de monitorar o desempenho com o Application Insights. Além disso, o palestrante detalhou a utilização do Bicep como uma solução otimizada para projetos focados exclusivamente no Azure, comparando suas vantagens com o Terraform, que é mais voltado para múltiplas nuvens.

Se você deseja aprender como implementar automações robustas em projetos no Azure, utilizando ARM Templates, Bicep ou Terraform, e garantir que sua infraestrutura esteja preparada para produção, explore o workshop completo e descubra essas ferramentas em ação!

Conclusão

E aí, curtiu os conteúdos deste mês? Tem muito mais vindo por aí! Se você quer ver seu artigo ou vídeo nos próximos destaques, não deixe de compartilhar nas redes sociais e participar do nosso repositório oficial no GitHub. Quem sabe o seu trabalho estará em nossa próxima edição?

Fique atento e continue explorando o que Azure Static Web Apps tem a oferecer!

Até o mês que vem! 🚀

​Microsoft Tech Community – Latest Blogs –Read More