Angular Azure Static Web Apps

Oi Pessoal!

Nesse post vou mostrar como implantar um aplicativo angular no Azure Static Web Apps.

Voc precisa ter instalado em sua mquina:

• Windows Terminal
• NodeJs
• Angular - CLI
• Azure - CLI
• GitHub - CLI

e tambm uma assinatura no Azure

Voc pode criar uma conta no azure e consumir os crditos para teste, mas nesse artigo os recursos que irei consumir so gratutos.

Coaltime

O Coaltime, aplicao fictcia que apresentei em outros artigos, alm de precisar de mais agilidade de implantao devido a contnuas mudanas no cdigo, precisa de baixo custo de hospedagem pois estamos em uma fase embrionria, aps analisarmos os custos de uma mquina windows e linux, vimos que para escalar ou ter distribuio global, seria uma melhor soluo o Azure Static Web Apps , saiba mais sobre esse recurso aqui.

Faa download do Coaltime (no clone)

Utilize o windows terminal e navegue at a pasta do projeto.
Execute todos os comandos na pasta do projeto

Esse projeto utiliza a verso Angular CLI: 12.0.1

Azure CLI e GitHub CLI

Esse artigo prioriza a utilizao da CLI para fins didticos, a operao descrita a seguir possui uma experincia muito mais intuitiva utilizando o portal do azure e do github.

Abaixo voc encontra os links com a lista completa de comandos para ambos:

• Azure CLI
• GitHub CLI

GitHub

Vamos definir algumas variveis 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 so as iniciais do meu nome seguido do ano em que nasci, (Lucas Silvrio Vargas, 1990 - lsv1990).

$group="StaticCoalTime"$app="<nome exlusivo do app>"

Faa login no GitHub pelo terminal:

gh auth login

Os comandos abaixo vo iniciar o repositrio local e remoto.

git initgh repo create $appgit branch -M maingit add .git commit -m "first commit"git push -u origin main

essa operao pode levar alguns minutos para ser concluda

Salve a url do seu repositrio em uma varivel, vamos utilizar mais a frente na implantao:

$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")

Azure

Faa login na sua conta do azure e defina uma conta padro para esse tutorial, assim voc garante que a operao ser feita no tenant correto:

az loginaz account set --subscription <subscriptionid>

Os comandos a seguir criaro um grupo de recursose o aplicativo web esttico e ir implantar nosso cdigo:

az group create -n $group -l eastus2az 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 tsv

O parmetro --login-with-github ir solicitar o login ao github para que o azure crie um segredo, e o arquivo yml de implantao. O terminal vai pedir que voc acesse o portal e informe um cdigo de autenticao. Por padro o recurso criado na camada gratuita.

essa operao pode levar alguns minutos para ser concluda

Acompanhe a implantao no portal do github.

Pronto! Agora toda vez que voc comitar alteraes 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 alteraes feita no repositrio, e voc ver o arquivo yml que o azure criou.

git pullcd .\.github\workflows\ls

Espero que isso te ajude!

Referncias

.ltag__user__id__8505 .follow-action-button { background-color: #513a72 !important; color: #ffffff !important; border-color: #513a72 !important; }

Glaucia LemosFollow

Cloud Advocate in JavaScript @Microsoft | Contributor & Member NodeJs Foundation & React Community | Open Source | She/Her

GitHub CLI - Uma Nova Experincia no GitHub!

Glaucia Lemos for Microsoft Azure Feb 14 '20 7 min read

#webdev #productivity #showdev #git

Realize Deploy Automtico de Projetos Estticos com Azure Static Web Apps!

Glaucia Lemos for Microsoft Azure May 19 '20 7 min read

#javascript #vue #beginners #webdev