Implantar um aplicativo Angular no Azure pela CLI
Tags: angular, azure, cli
Published: 2021-06-28 11:04:18

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](https://www.microsoft.com/pt-br/p/windows-terminal/9n0dx20hk701)
- [NodeJs](https://nodejs.org/en/download/)
- [Angular - CLI](https://angular.io/cli)
- [Azure - CLI](https://docs.microsoft.com/pt-br/cli/azure/install-azure-cli-windows?tabs=azure-cli)
- [Conta no Azure](https://portal.azure.com/)

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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbvoi2cnr9okkqsoilcp.png)

Faça o clone ou download do Coaltime.
{% github silverio27/Coaltime no-readme %}

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]("https://portal.azure.com/").

Clique [aqui]("https://docs.microsoft.com/en-us/cli/azure/reference-index?view=azure-cli-latest") para ver a lista completa de comandos do Azure CLI.

## Criar um webapp

Faça login na sua conta do azure:
```CMD
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:
```CMD
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:
```CMD
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:
```CMD
az group list -o table
```

Vamos criar um plano de serviço na camada gratuíta:
```CMD
az appservice plan create -g Coaltime -n Coaltimeplan -l eastus2 --sku F1
```
>Clique [aqui](https://docs.microsoft.com/pt-br/azure/app-service/overview-hosting-plans) para saber mais sobre os planos de serviços do azure.


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

```CMD
az appservice plan list -g Coaltime -o jsonc
```
Crie um aplicativo web, substitua o nome **Coaltimeapp** por um nome exclusivo:
```CMD
az webapp create -g Coaltime -p Coaltimeplan -n Coaltimeapp --% --runtime "NODE|14-lts"
```
>Clique [aqui](https://docs.microsoft.com/pt-br/azure/app-service/overview) para saber mais sobre os serviços de aplicativo

Obtenha a url do aplicativo criado:
```CMD
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:
```NPM
ng build
```
Compacte os arquivos para implantação:

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

Faça a implantação:
```CMD
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.
```CMD
az group delete --name <resourcegroup> --no-wait --yes
```

Espero que isso te ajude!