Implantar um aplicativo Angular no Azure pelo Github Actions

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
• NodeJs
• Angular - CLI
• Azure - CLI
• GitHub - CLI

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

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 e do github.

Abaixo você encontra os links com a lista completa de comandos para ambos:

• Azure CLI
• GitHub CLI

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>

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="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:

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:

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:

gh auth login

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

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.

az webapp deployment list-publishing-profiles -n $app -g $group --xml

Adicione o segredo:

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

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

Abra o repositório no vscode:

code .

Cole o conteúdo abaixo no arquivo .github/workflows/azure.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.

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

Acompanhe a publicação no portal do github:

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

Espero que isso te ajude!

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