Implantar um aplicativo Angular no Azure pelo Github Actions
Tags: azure, github, angular, cli
Published: 2021-07-08 13:59:43

Oi Pessoal!

Nesse post vou mostrar como implantar um aplicativo angular no azure pelo github-actions.

## 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)
- [GitHub - CLI](https://cli.github.com/)

e também uma assinatura 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

O [Coaltime](https://dev.to/silverio27/implantar-um-aplicativo-angular-no-azure-pela-cli-4gl9), aplicação fictícia que apresentei no artigo anterior, recebeu permissão para ser continuado e agora precisamos de mais agilidade de implantação devido a contínuas mudanças no código. Outra coisa é que decidimos implantar o aplicativo em um serviço Linux.

Faça download do Coaltime (não clone)
{% 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 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]("https://portal.azure.com/") e do [github](https://github.com/).

Abaixo você encontra os links com a lista completa de comandos para ambos:
- [Azure CLI]("https://docs.microsoft.com/en-us/cli/azure/reference-index?view=azure-cli-latest")
- [GitHub CLI](https://cli.github.com/manual/)

## 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::
```CMD
az login
az account set --subscription <subscriptionid>
```
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).

```CMD
$group="NewCoalTime"
$plan="NewCoaltimePlan"
$app="<nome exlusivo do app>"
```

Os comandos a seguir criarão um grupo de recursos, um plano de serviço, um aplicativo web e irá implementar as configurações necessárias para rodar uma aplicação spa no linux:

```CMD
az group create -n $group -l eastus2
az appservice plan create -g $group -n $plan -l eastus2 --sku F1 --is-linux
az webapp create -g $group -p $plan -n $app --% --runtime "NODE|14-lts"
az webapp config appsettings set -g $group -n $app --settings WEBSITE_WEBDEPLOY_USE_SCM=true
az webapp config set -g $group -n $app --startup-file="pm2 serve /home/site/wwwroot --no-daemon --spa" 
```
> essa operação pode levar alguns minutos para ser concluída

Obtenha a url do aplicativo criado:
```CMD
az webapp show -n $app -g $group --query "{url:defaultHostName}" -o tsv
```
Salve essa url para acessarmos o aplicativo depois da implantação.

## GitHub

Faça login no GitHub pelo terminal:
```CMD
gh auth login
```

Os comandos abaixo vão iniciar o repositório local e remoto.
```CMD
git init
gh repo create $app
git branch -M main
git add .
git commit -m "first commit"
git push -u origin main
```
> essa operação pode levar alguns minutos para ser concluída

Vamos adicionar um segredo ao repositório no GitHub para ser utilizado no nosso pipeline. Esse segredo será o arquivo de publicação do aplicativo web criado anteriormente.
Obtenha o arquivo de publicação:
> Copie o resultado vamos usar no comando a frente.
```CMD
az webapp deployment list-publishing-profiles -n $app -g $group --xml
```
Adicione o segredo:
```CMD
gh secret set AZURE_WEBAPP_PUBLISH_PROFILE
```
Quando pedido **'? Paste your secret'** cole o resultado da operação anterior.

Vamos criar um arquivo de configuração para implantação com o github actions

```CMD
md .github/workflows
cd . > .github/workflows/azure.yml
```

Abra o repositório no vscode:
```CMD
code .
```

Cole o conteúdo abaixo no arquivo .github/workflows/azure.yml: 
```yml
name: "🚀 release"
on:
  push:
    branches:
      - main

env:
  AZURE_WEBAPP_NAME: <nome exclusivo do app>
  AZURE_WEBAPP_PACKAGE_PATH: './dist/app' 
  NODE_VERSION: '14.x' 

jobs:
  build-and-deploy:
    name: 🚀 Build and Deploy
    runs-on: ubuntu-latest
    environment: production
    steps:
    - uses: actions/checkout@v2
    - name: 🟢 Use Node.js ${{ env.NODE_VERSION }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ env.NODE_VERSION }}
    - name: ⚡ npm install, build
      run: |
        npm install
        npm run build
    - name: '☁ Deploy to Azure WebApp'
      uses: azure/webapps-deploy@v2
      with:
        app-name: ${{ env.AZURE_WEBAPP_NAME }}
        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
        package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}
```

Vamos comitar e empurrar as nossa modificações e o aplicativo será implantado.

```CMD
git add .
git commit -m "first deploy"
git push
```

Acompanhe a publicação no portal do github:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dxsa4oo6mur09i3nn0n.png)
 

Pronto! Agora toda vez que você comitar alterações na main, ele será implantado automaticamente.

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

Espero que isso te ajude!

>A propósito essa comidinhas sou eu que faço, 'nem só de código vive o dev 😀