Oi Pessoal!

Nesse post vou mostrar como implantar um aplicativo angular no azure pelo azure cli.

Você precisa ter instalado em sua máquina:

• Windows Terminal
• NodeJs
• Angular - CLI
• Azure - CLI
• Conta 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

Coaltime é uma rede social para compartilhamento de receitas feitas na churrasqueira. Os investidores querem ver um protótipo da UI. No momento não temos muitos desenvolvedores e não sabemos se o projeto irá avançar. Portanto resolvemos fazer a implantação do protótipo de uma forma mais simples.

Faça o clone ou download do Coaltime.

Utilize o windows terminal e navegue até a pasta Coaltime.

Esse projeto utiliza a versão Angular CLI: 12.0.1

Azure CLI

Esse artigo prioriza a utilização do Azure CLI para fins didáticos, a operação descrita a seguir possui uma experiência muito mais intuitiva utilizando o portal do azure.

Clique aqui para ver a lista completa de comandos do Azure CLI.

Criar um webapp

Faça login na sua conta do azure:

az login

Caso você tenha muitas contas em seu perfil, defina uma conta padrão para esse tutorial, assim você garante que a operação será feita no tenant correto:

az account set --subscription <subscriptionid>

Crie um grupo de recursos específico pra esse tutorial.

Essa é uma prática altamente recomenda. No final desse tutorial podemos excluir o grupo com todos recursos dentro de uma vez, sem se preocupar que algum recurso tenha ficado para trás gerando cobranças indesejadas:

az group create -n Coaltime -l eastus2

Localização: Estamos utilizando o leste dos estados unidos pois é a localização mais barata, em produção escolha a localização mais próxima da sua.

Veja os grupos de recursos da sua conta:

az group list -o table

Vamos criar um plano de serviço na camada gratuíta:

az appservice plan create -g Coaltime -n Coaltimeplan -l eastus2 --sku F1

Clique aqui para saber mais sobre os planos de serviços do azure.

Verifique os planos de serviços dentro do grupo de recursos Coaltime:

az appservice plan list -g Coaltime -o jsonc

Crie um aplicativo web, substitua o nome Coaltimeapp por um nome exclusivo:

az webapp create -g Coaltime -p Coaltimeplan -n Coaltimeapp --% --runtime "NODE|14-lts"

Clique aqui para saber mais sobre os serviços de aplicativo

Obtenha a url do aplicativo criado:

az webapp show -n Coaltimeapp -g Coaltime --query "{url:defaultHostName}" -o tsv

Salve essa url para acessarmos o aplicativo depois da implantação.

Os comandos a segui precisam ser executado na pasta onde o projeto foi criado.

Compile o aplicativo:

ng build

Compacte os arquivos para implantação:

Compress-Archive -Path dist/app/* -DestinationPath dist\app.zip -Force

Faça a implantação:

az webapp deployment source config-zip --src .\dist\app.zip -g Coaltime -n Coaltimeapp

Pronto! Acesse o aplicativo pela url que você salvou na etapa anterior.

Após testar delete os recursos criados se desejar.

az group delete --name <resourcegroup> --no-wait --yes

Espero que isso te ajude!