DEV Community

Cover image for Angular + Azure Static Web Apps
Lucas Silvério
Lucas Silvério

Posted on

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 máquina:

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.

Coaltime

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

Azure CLI e GitHub CLI

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:

GitHub

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>"
Enter fullscreen mode Exit fullscreen mode

Faça login no GitHub pelo terminal:

gh auth login
Enter fullscreen mode Exit fullscreen mode

Os 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 main
Enter fullscreen mode Exit fullscreen mode

essa 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")
Enter fullscreen mode Exit fullscreen mode

no meu caso o comando vai ficar assim

$url=(gh repo view silverio27/$app --json "url" --jq ".url")
Enter fullscreen mode Exit fullscreen mode

Azure

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>
Enter fullscreen mode Exit fullscreen mode

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 tsv
Enter fullscreen mode Exit fullscreen mode

O 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.

image

image

essa operação pode levar alguns minutos para ser concluída

Acompanhe a implantação no portal do github.
image

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
Enter fullscreen mode Exit fullscreen mode

image

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
Enter fullscreen mode Exit fullscreen mode

image

Espero que isso te ajude!

Referências

Top comments (0)