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

May 28, 2020

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:

Alt Text

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:

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:

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:

Alt Text

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:

Alt Text

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:

Alt Text

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:

Alt Text

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:

Alt Text

  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:

Alt Text

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:

Alt Text

Ó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?!

Alt Text

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:

Alt Text

Alt Text

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:

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

Twitter

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