Fala Coders! Hoje vamos falar do lançamento de um serviço do Azure que estava em Preview e enfim, será um General Available do Serviço Azure Static Web Apps agora no dia 12/05/2021!
Se vocês desejarem saber um pouco mais sobre o lançamento oficial do Azure Static Web Apps que está acontecendo hoje (12/05/2021), há um blog oficial explicando o que vem de diferente da versão Preview para General Available AQUI
E, vamos ter inúmeras mudanças significativas nesse serviço, que estava na sua versão Preview!
Mas, vamos tentar relembrar a todos(as) vocês sobre esse serviço?
O que veremos nesse Artigo?!
- O que é Azure Static Web Apps?
- O que vamos fazer?!
- Demo Time!
- Conta - Azure for Students ⭐️
- Usando o Azure DevOps!
- Passo 01 - Criando um projeto no Azure DevOps
- Passo 02 - Importando o projeto no GitHub para o Azure DevOps
- Passo 03 - Criando a Aplicação Estática no Azure
- Passo 04 - Criando os Pipelines Task no Azure DevOps para a nossa Aplicação Estática!
- Passo 05 - Retornando ao Portal Azure
- Recursos & Links Importantes
- Palavras Finais
generated with Summaryze Forem 🌱
O que é Azure Static Web Apps?
O Azure Static Web Apps é um serviço que cria e implanta automaticamente aplicações Web completa no Azure desde um repositório de códigos, que nesse caso é usado o GitHub Actions.
Com esse serviço, te permite realizar deploy automático, de maneira rápida, fácil e totalmente gratuita usando quaisquer bibliotecas ou frameworks mais conhecidos do mercado, tais como: Angular, React, Svelte, Vue ou até mesmo usando o Blazor.
Já no lado do Back-End, você pode integrar a sua aplicação estática usando o Azure Functions, que te permitirá criar uma API de uma maneira muito mais rápida, dinâmica, resiliente e escalonável!
Se, vocês desejarem, temos inúmeros treinamentos de Azure Static Web Apps totalmente gratuitos na plataforma Microsoft Learn! Para listar alguns aqui...
Agora que vocês já sabem o que é o Azure Static Web Apps, agora é o momento de focarmos no tema principal desse post: 'Como podemos publicar um site estático usando o Azure Static Web Apps integrando com a poderosa ferramenta do Azure DevOps?
Vamos começar a fazer um hands-on com um tutorial? Aqui vamos nós!
O que vamos fazer?!
Bom, nesse tutorial vamos aprender a fazer uma plublicação de um site estático em Vue.Js usando o Azure Static Web e integrando com o Azure DevOps. Na versão preview isso não era possível (de uma certa forma, não... mas tem gente que conseguiu). Mas, agora com GA do Serviço, isso agora é super possível e é justamente o que estarei ensinando à todas as pessoas aqui!
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: (vocês podem escolher o nome que desejarem. Não necessariamente igual o meu.)
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!
Usando o Azure DevOps!
Vamos agora começar a fazer a integração da aplicação recém criada no GitHub e usar o Azure DevOps. Para isso, entre no link abaixo, para começar a usar o Azure DevOps de maneira gratuita!
Escolha as opções gratuitas. No meu caso, estou escolhendo a opção: Plano Básico - Free. Depois de você incluir as suas informações de dados, aparecerá a seguinte imagem abaixo:
Vamos no passo a passo a partir de agora!
Passo 01 - Criando um projeto no Azure DevOps
Crie o projeto e coloque de acordo com a imagem abaixo:
Depois que você preencher todas as informações do seu Projeto, clique no botão: Create a Project. Depois de clicar nesse botão, a tela terá a seguinte formato:
Passo 02 - Importando o projeto no GitHub para o Azure DevOps
Vamos agora implementar o código (template padrão) da aplicação Vue.js criada recentemente lá no GitHub e integrar no Azure DevOps. Vão em:
- Repos
- Files
- Import a Repository
- Import
Aí abrirá uma nova janela, ali colocaremos, justo o GitClone da nossa aplicação (.git) e depois clicar no botão: Import
Se não entenderem como proceder, mais abaixo terá um vídeo desse tutorial que gravei ensinando passo a passo, justo para ajudar todos vocês. E, também uma imagem que também auxiliará vocês nesse passo a passo:
No final, o seu Azure DevOps estará da seguinte forma:
.
Se estiver dessa forma, é porque você integrou com sucesso a sua aplicação Vue.js no Azure DevOps. Agora, vamos dar continuidade!
Passo 03 - Criando a Aplicação Estática no Azure
Nesse passo precisaremos de uma Conta Azure, que inclusive vocês podem estar criando de maneira gratuita! Só precisa incluir os dados do seu cartão de crédito para fazer uso dos 12 meses gratuitos dos inúmeros serviços gratuitos disponíveis!
Aqui nesse post já mencionei sobre uma conta Azure for Students, que dão a vocês estudantes, vários benefícios de fazerem uso da Conta Azure de graça sem necessidade de incluir dados de cartão de crédito!
Depois que criar uma conta no Azure, você deverá acessar o Portal Azure
Sigam os seguintes passos:
1 - Clicar em Create a Resource
2 - Depois, na parte da busca, digitem: Static Web Apps. E, em seguida cliquem no botão: Create
3 - Preencha todos os dados necessários nessa tela, que são:
- Resource Groups
- Static Web Apps Details -> Name (aqui o nome deverá ser único e nunca igual)
- Region: CENTRAL US (vocês podem escolher outras regiões também)
- Deployments Details - Others (escolha essa opção! Pois estaremos usando o Azure DevOps e não o GitHub Actions!)
- E, por último, clicar no botão: Review + Create -> Create
Se tudo der certo, aparecerá a seguinte imagem abaixo. Caso sim, bastam clicar em: Go to resource
Agora, vamos fazer algumas modificações importantes. Vá até:
- Overview
- Manage Deployment token
Aparecerá uma nova janela com um token gigantesco. Copie e cole esse token em algum notepad de sua preferência. Pois vamos precisar dele posteriormente!
Passo 04 - Criando os Pipelines Task no Azure DevOps para a nossa Aplicação Estática!
Agora vamos usar o poder que o serviço do Azure DevOps nos proporciona integrado com o SWA!Retorne ao seu Projeto hospedado no Azure DevOps e vá até o botão: Set up Build
Depois disso, aparecerá uma nova janela. Escolha a opção: Starter Pipeline
Copiem e colem o YAML abaixo e coloquem no pipeline de vocês:
trigger:
- main
pool:
vmImage: ubuntu-latest
steps:
- checkout: self
submodules: true
- task: AzureStaticWebApp@0
inputs:
app_location: '/'
api_location: 'api'
output_location: 'dist'
env:
azure_static_web_apps_api_token: $(deployment_token)
Na parte de output_location precisaremos alterar! Pois em Vue.js a pasta de artefato, que é a pasta que gera os arquivos estáticos é a pasta dist. Para diferentes frameworks são nomes de pastas diferentes. Caso queira saber do framework que você esteja usando, temos uma lista dessas pastas AQUI
Agora, vamos incluir aquele token criado lá no Portal Azure. Para isso, vamos usar um recurso bastante interessante no Azure DevOps: Variables.
Vá até:
- Variables
- New Variable
- Name (deployment_token)
- Value (o valor do token)
- Clicar no botão: Ok -> Save
Agora que já salvamos o nosso deployment_token vem o momento mais esperado: executar essa trigger e ver a coisa funcionar! Cliquem no botão: Save and Run
Feito isso, veremos o Pipeline da nossa aplicação estática sendo executado (job):
Se o (job) ou Build da aplicação der os checks todos verdes é porque o build foi executado com sucesso!
Passo 05 - Retornando ao Portal Azure
Agora que o build foi executado com sucesso no Azure DevOps, é aquele momento de sabermos se a nossa aplicação foi devidamente publicada no Azure! Retorne ao recurso criado da aplicação no Azure e clique no link, conforme a imagem abaixo:
E, como podem ver, o deploy foi realizado e integrado com sucesso com Azure DevOps!
Se vocês desejarem, estou disponibilizando o link da aplicação disponível na web Aplicação Todo-List em Vue -AQUI
Recursos & Links Importantes
Sempre ao final dos meus tutoriais, deixo recursos e links importantes, caso desejam saber mais sobre o assunto:
✅ 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
Palavras Finais
Espero que esse tutorial de SWA + Azure DevOps seja de grande ajuda à todas as pessoas! Abaixo segue o vídeo explicativo desse tutorial, para àquelas pessoas que preferem seguir tutorial em formato de vídeo:
Ah! Já ia esquecer de falar aqui! Não deixem de se inscrever no meu Canal do Youtube! Estou criando inúmeras séries incríveis para esse ano de 2021!
Só como spoiler, teremos (a partir de Junho):
- 😃 Microsoft Learn Live Sessions
- 😃 Open Mic com a Comunidade durante as Lives!
- 😃 Tutoriais semanais de Node.js, TypeScript & JavaScript
- 😃 E muitos Live Codings
Se são conteúdos que você curte, então não deixa de se inscrever e ative o sininho para ficar sabendo quando teremos vídeo novo!
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! 😍
Top comments (4)
Excelente sua explicação. Parabéns pela didática e pelo tempo que gastou montando isso :)
Eu que agradeço imensamente, Bruno!
😍😍😍😍 usando o Summaryze 😍😍😍😍
sim. Muito bom!