19
Angular + Azure Static Web Apps
Oi Pessoal!
Nesse post vou mostrar como implantar um aplicativo angular no Azure Static Web Apps.
e também uma assinatura no Azure
Você pode criar uma conta no azure e consumir os créditos para teste, mas nesse artigo os recursos que irei consumir são gratuítos.
O Coaltime, aplicação fictícia que apresentei em outros artigos, além de precisar de mais agilidade de implantação devido a contínuas mudanças no código, precisa de baixo custo de hospedagem pois estamos em uma fase embrionária, após analisarmos os custos de uma máquina windows e linux, vimos que para escalar ou ter distribuição global, seria uma melhor solução o Azure Static Web Apps , saiba mais sobre esse recurso aqui.
Faça download do Coaltime (não clone)
Utilize o windows terminal e navegue até a pasta do projeto.
Execute todos os comandos na pasta do projeto
Esse projeto utiliza a versão Angular CLI: 12.0.1
Esse artigo prioriza a utilização da CLI para fins didáticos, a operação descrita a seguir possui uma experiência muito mais intuitiva utilizando o portal do azure e do github.
Abaixo você encontra os links com a lista completa de comandos para ambos:
Vamos definir algumas variáveis no terminal, para facilitar a escrita dos demais comandos
substitua o <nome exclusivo do app> por por exemplo:
coaltimelsv1990, na qual a primeira parte é o nome do app, e a segunda parte são as iniciais do meu nome seguido do ano em que nasci, (Lucas Silvério Vargas, 1990 - lsv1990).
$group="StaticCoalTime"
$app="<nome exlusivo do app>"Faça login no GitHub pelo terminal:
gh auth loginOs comandos abaixo vão iniciar o repositório local e remoto.
git init
gh repo create $app
git branch -M main
git add .
git commit -m "first commit"
git push -u origin mainessa operação pode levar alguns minutos para ser concluída
Salve a url do seu repositório em uma variável, vamos utilizar mais a frente na implantação:
$url=(gh repo view <account>/$app --json "url" --jq ".url")no meu caso o comando vai ficar assim
$url=(gh repo view silverio27/$app --json "url" --jq ".url")Faça login na sua conta do azure e defina uma conta padrão para esse tutorial, assim você garante que a operação será feita no tenant correto:
az login
az account set --subscription <subscriptionid>Os comandos a seguir criarão um grupo de recursose o aplicativo web estático e irá implantar nosso código:
az group create -n $group -l eastus2
az staticwebapp create -n $app -g $group -s $url -l eastus2 -b main --login-with-github --output-location "./dist/app" --app-location "/" --api-location "api"
az staticwebapp show -n staticoaltime --query "{url:defaultHostname}" -o tsvO parâmetro --login-with-github irá solicitar o login ao github para que o azure crie um segredo, e o arquivo yml de implantação. O terminal vai pedir que você acesse o portal e informe um código de autenticação. Por padrão o recurso é criado na camada gratuita.
essa operação pode levar alguns minutos para ser concluída
Acompanhe a implantação no portal do github.
Pronto! Agora toda vez que você comitar alterações na main, ele será implantado automaticamente.
Obtenha a url do app para acessar o portal do app implantado:
az staticwebapp show -n $app --query "{url:defaultHostname}" -o tsv
No terminal execute o comando para puxar as alterações feita no repositório, e você verá o arquivo yml que o azure criou.
git pull
cd .\.github\workflows\
ls
Espero que isso te ajude!
19