Implantar um aplicativo Angular no Azure pela CLI

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:

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:

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:

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:

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

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:

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

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

Obtenha a url do aplicativo criado:

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

Compile o aplicativo:

Compacte os arquivos para implantação:

Faça a implantação:

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

Após testar delete os recursos criados se desejar.

Espero que isso te ajude!