Realize Deploy Automático de Projetos Estáticos com Azure Static Web Apps!
Glaucia Lemos
Posted on May 19, 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:
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:
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:
- Clique em: Create a Resource
- 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:
- Inclua / em App Location.
- Remova o valor: api de Api location
- E inclua a pasta que gera os arquivos estáticos da sua aplicação. No caso do Vue.js essa pasta é a dist
- 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:
✅ 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
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! 😍
Posted on May 19, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.