Realize Deploy Automático de Projetos Estáticos com Azure Static Web Apps!

Fala Coders! Tudo bem? 😃

A partir de hoje começaremos uma série de artigos a qual estaremos comentando sobre os últimos lançamentos da Microsoft durante o Build 2020.

E um desses lançamentos é sobre o Azure Static Web Apps. Se você deseja entender mais sobre esse incrível serviço, para que serve e como começar a usar, você está no lugar certo! Esse artigo é justamente sobre isso!

Então aqui vamos! 😃

Mas, afinal.. O que é Azure Static Web Apps?!

O Azure Static Web Apps é um serviço que cria e realiza deploy automaticamente de aplicações Web com toda a stack completa do Azure a partir de um determinado repositório do GitHub! Sim, isso mesmo que vocês estão ouvindo! Diretamente de um repositório do GitHub! 😮😮

E como é que funciona esse fluxo?! A imagem abaixo nos ajuda a entender melhor como funciona:

Na imagem acima, vocês podem perceber que, o fluxo de trabalho da implantação das aplicações do Azure Static Web Apps são criados com base nas interações e fluxos do GitHub! Resumindo: quando você configura um determinado fluxo de trabalho via GitHub Actions por meio do seu repositório onde se encontra o seu código ou aplicação, no momento em que você enviar um push ou for aceitar um determinado Pull Request que esteja monitorada pelo Actions, automaticamente será realizada o deploy da sua aplicação automaticamente para o Azure! Incrível não é mesmo?! 😄

E esse serviço... é Gratuito?!

Sim! A resposta é um grande SIM!!!

As hospedagens de aplicações estáticas como: HTML, CSS, JavaScript e imagens são totalmente gratuita! Sim! Sabe aquele site ou aplicação estática ou feita num JamStack que você tem e não sabe onde colocar de maneira gratuita?! Agora já sabem onde hospedar de graça! Diretamente no Azure Static Web Apps!

Entre outras coisas bastante interessantes que estão inclusas nesse serviço e que são gratuitas:

• ✅ Suporte e integração ao Azure Functions
• ✅ Integração com o GitHub
• ✅ Certificados SSL gratuitos
• ✅ Geração de versões Staging

Se vocês desejam entender um pouco mais todo esse fluxo e as principais características desse novo serviço, indico a Documentação Oficial do Azure Static Web Apps - AQUI

E quais linguagens e frameworks estão disponíveis?

Todos os frameworks e sites JamStack generators. Para listar:

• ✅ Angular
• ✅ React
• ✅ Vue
• ✅ Gatsby
• ✅ Hugo
• ✅ VuePress
• ✅ Next.js
• ✅ Nuxt.js

E se for no lado do Back-End se usa o Azure Functions. Mas, essa parte deixaremos para o próximo artigo! 😉

Bom... acho que eu falei demais aqui... vamos para a demo?!

Demo Time!

Para essa demo, vamos precisar dos seguintes recursos:

• ✅ Visual Studio Code
• ✅ Vue
• ✅ Conta Azure
• ✅ Conta no GitHub

Conta - Azure for Students ⭐️

Caso você seja um(a) estudante de alguma Instituição de Ensino de Faculdade ou Universidade, poderá criar sua conta no Azure for Students. Essa conta te dará o benefício em possuir crédito de USD 100,00 para usar os serviços de maneira gratuita, sem necessidade de possuir um cartão de crédito. Para ativar essa conta, bastam acessar o link ao lado: AQUI

Para fins de demo, estaremos fazendo uso do recurso do GitHub: GitHub Templates. Se deseja saber mais como criar um template e entender o que é bastam acessar AQUI.

Cliquem nesse link https://github.com/staticwebdev/vue-basic/generate e logo em seguida crie um nome para esse repositório, conforme segue a imagem abaixo:

Logo em seguida clique no botão: Create Repository from Template. Após isso, estará já criada uma aplicação modelo em Vue.js para que possamos testar a nossa aplicação direto do GitHub!

Agora, vamos ao próximo passo. Abre o Portal Azure e segue os seguintes passos:

1. Clique em: Create a Resource
2. Depois digite: Static Web Apps

E logo em seguida aparecerá a seguinte janela:

obs.: versão preview

Agora vamos preencher todas as informações necessárias para criar o nosso recurso dentro do Azure! Vejam na imagem abaixo:

Observem no botão Sign in with GitHub. É justamente aí que faremos a nossa integração do Azure Web Static Apps com a nossa aplicação contida no GitHub! Cliquem nesse botão e inclua o seu handler e senha do GitHub e clique em: Authorize Azure-App-Service-Static-Web-Apps.

Você retornará ao Portal Azure e aparecerá mais informações para que possamos incluir. Vamos incluir agora, para isso, bastam seguir conforme a imagem abaixo:

Observem que, no ato que permitimos e autorizamos o Azure Static Web Apps, conseguimos listar todos os repositórios! Bom, como já criamos uma app de modelo, vamos usar o repositório: aswa-demo-vue. E depois clique no botão: Next -> Build

Aparecerá uma nova janela. É nessa parte que incluiremos as informações mais importantes. Observem na imagem abaixo:

1. Inclua / em App Location.
2. Remova o valor: api de Api location
3. E inclua a pasta que gera os arquivos estáticos da sua aplicação. No caso do Vue.js essa pasta é a dist
4. Clique no botão: Review + Create e depois Create

Abrirá uma nova janela informando que a implantação do Recurso foi criado com sucesso e depois bastam clicar em: Go to Resource

Antes de vermos a nossa aplicação no ar, quero mostrar algo bastante interessante para todos vocês que foi criado no nosso repositório depois de fazer essa implementação.

Retornem ao repositório da aplicação e observem que foi criada uma pasta chamada: .github/workflows. Cliquem nela:

Observem que ele criou no momento da implementação um arquivo .yml com todo o fluxo do GitHub Actions para nós!

Vamos testar esse fluxo?! Para isso, cliquem em Actions no próprio repositório conforme imagem abaixo:

Ótimo! Agora observem uma coisa linda! Ele já cria para nós todo um processo de C.I & C.D automaticamente. Ou seja, todas as vezes que formos fazer um push, pull request ou commit, ele vai gerar um Build e deploy dessa aplicação! Sensacional isso, não é mesmo?!

Quero ver a aplicação no ar? Não tem problema. Voltemos para o Portal Azure onde o recurso foi criado e clique em: URL e vejam o resultado:

Legal, não é mesmo?! Mas, e se essa aplicação tiver um Back-End, o que acontece?

Deixemos para o próximo artigo!

Palavras Finais

Agora ficou muito fácil de implementar de forma automática suas aplicações estáticas com o Azure Static Web Apps. E se vocês desejarem saber um pouco mais sobre esse novo serviço, deixo abaixo uma lista incrível de recursos, vídeos e documentação que te auxiliarão no seu conhecimento:

• ✅ Documentação Oficial do Azure Static Web Apps

• ✅ Curso Grátis - Publique uma Aplicação Estática no Angular, React, Vue ou Javascript & API

• ✅ Curso Grátis - Crie e Publique um site estático com Gatsby

• ✅ Implementando Azure Static Web Apps no Gatsby

• ✅ Implementando Azure Static Web Apps no Hugo

• ✅ Implementando Azure Static Web Apps no VuePress

• ✅ Implementando Azure Static Web Apps no Next.js

• ✅ Implementando Azure Static Web Apps no Nuxt.js

E para ficarem por dentro de várias outras novidades, não deixem de me seguir lá no twitter!

Nos vemos! Até a próxima pessoal! 😍