DEV Community

loading...
Microsoft Azure

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

glaucia86 profile image Glaucia Lemos Updated on ・7 min read

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! 😍

Discussion

pic
Editor guide
Collapse
vacom profile image
Vitor Amaral

Olá Glaucia, obrigado pela visão geral, no site oficial do Azure diz que está gratuito só em preview. Existe uma estimativa para os planos futuros? Outra questão como este novo serviço compara-se com Vercel, para mim parece muito semelhante.

Collapse
kobbidev profile image
Kobbi

Pensei a mesma coisa. E achei o Vercel mais simples. Bom que temos alternativas.

Collapse
vacom profile image
Vitor Amaral

Andei a testar já algumas semanas atrás e tenho lá um exemplo de testes e posso dizer que é tão simples como Vercel basta teres um repositório no Github e é tudo automatizado. Eu acho que tem potencial, agora gostava de ver como vai ser os planos.

Collapse
nizzola profile image
Marcio Rogério Nizzola

Parabéns Gláucia, ótima publicação !!!

Collapse
ucavalcante profile image
Ulisses Cavalcante

Olá Glaucia, ótimo artigo uma duvida ele server para repos no azure.devops também ou apenas github ?