Gerencie eficientemente os Artefatos do GitHub Actions para Implementar Releases – techsyncer

A sua equipa investiu muito esforço em empacotar manualmente o código? Se sim, está na hora de começar a utilizar os Artefatos do GitHub Actions, para que a sua equipa possa automatizar este procedimento. Ao mesmo tempo, reduzem a variabilidade das versões e poupam tempo para trabalhar em outras tarefas cruciais.

Os Artefatos do GitHub Actions permitem transferir eficazmente dados de um trabalho ativo para outro, eliminando as tarefas repetitivas e demoradas envolvidas na implementação. Neste tutorial, irá aprender como usar e gerir artefatos para implementar uma aplicação React no Netlify.

Continue a ler e comece a criar implementações consistentes!

Pré-requisitos

Este tutorial será uma demonstração prática. Se deseja acompanhar, certifique-se de ter uma aplicação React simples e um repositório GitHub. Este tutorial utiliza um repositório da aplicação React Counter.

Construindo um Fluxo de Trabalho CI/CD

Quando um trabalho num fluxo de trabalho do GitHub Actions termina, os dados que processam e geram também terminam. Os dados, chamados de artefatos, podem ser mantidos na página do repositório após os trabalhos terem sido concluídos e podem ser enviados usando a ação upload-artifact.

Mas antes de utilizar os artefatos do GitHub Actions para as suas versões de implementação, primeiro precisa construir um fluxo de trabalho CI/CD para a sua aplicação:

1. Crie uma pasta .github no diretório raiz da sua aplicação e crie uma subpasta chamada workflows.

2. Em seguida, crie o arquivo de fluxo de trabalho (um arquivo .yml) na pasta workflows. Você pode nomear o arquivo como quiser. Mas para este tutorial, o arquivo é nomeado ci.yml.

A estrutura de recursos do seu arquivo de fluxo de trabalho deve ser semelhante à abaixo.

3. Adicione o seguinte código ao arquivo ci.yml e salve as alterações. O código abaixo cria um fluxo de trabalho chamado CI com um trabalho de compilação para a aplicação.

name: CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
# O fluxo de trabalho será acionado em um evento de push ou pull na branch principal

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
# Sistema operacional para rodar
    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
    steps:
    - uses: actions/checkout@v3
# Obter código do repositório
    - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:
           node-version: ${{ matrix.node-version }}
    - name: Install dependencies
      run: npm ci

    - name: Build app
      run: npm run build

    - name: Run tests
      run: npm run test

4. Agora, adicione e faça commit das alterações, e faça push para o seu repositório remoto do GitHub.

Se o push for bem-sucedido, você verá o commit com um círculo de cor âmbar, como mostrado abaixo, indicando que o fluxo de trabalho está sendo executado.

Verifying successful commit and push to the remote repository

5. Clique na guia Actions para visualizar o fluxo de trabalho.

6. Clique em qualquer trabalho de compilação no lado esquerdo e expanda o trabalho de construção do aplicativo. Você verá os dados do trabalho de compilação (arquivos estáticos) gerados. Estes são os arquivos que você precisa para implantação.

Esses arquivos gerados são perdidos quando o servidor que executa o trabalho é descartado (ou quando o trabalho termina). Como você precisará desses arquivos para implantação, você implementará um passo para pegar esses arquivos e enviá-los como um artefato na próxima seção.

7. Finalmente, adicione o código a seguir após executar os testes no bloco de etapas em seu trabalho de compilação.

O código abaixo faz o upload de um artefato chamado “production” do diretório de compilação usando a ação actions/upload-artifact@v3.

Os arquivos gerados são perdidos quando o servidor que executa o trabalho é descartado ou quando o trabalho termina. Como você precisará desses arquivos para implantação, o código abaixo implementa uma etapa para pegá-los e fazer o upload como um artefato.

# Fazer Upload do Artefato
- name: Upload production-ready build files
  uses: actions/upload-artifact@v3
  with:
    name: production
    path: ./build

Configurando um Período de Retenção de Artefato Personalizado

Artefatos são armazenados por padrão por 90 dias antes de serem apagados. No entanto, dependendo do tipo de repositório, você pode alterar esse período de retenção.

Abaixo estão os valores que você pode definir para personalizar um período de retenção de artefato:

Repositório Privado – Qualquer valor entre 1 e 400 dias.
Repositório Público – Qualquer valor entre 1 e 90 dias apenas.

Para definir um período de retenção de artefato personalizado, atualize seu arquivo YAML de fluxo de trabalho incluindo retention-days: 2 em sua etapa # Fazer Upload do Artefato.

# Fazer Upload do Artefato
- name: Upload production-ready build files
  uses: actions/upload-artifact@v3
  with:
    name: production
    path: ./build
    # Personalizar Período de Retenção do Artefato
		retention-days: 2

Alternativamente, configure o período de retenção do artefato através do GitHub da seguinte maneira:

Acesse a aba Configurações no repositório.
Clique em Ação (painel esquerdo) para expandir o menu suspenso e selecione Geral.
Insira o número de dias que deseja manter o artefato na seção de retenção de artefatos e logs mostrada abaixo e clique em Salvar.

Importando um Projeto do Repositório Git para o Netlify

O artefato de construção agora pode ser acessado em outro trabalho no fluxo de trabalho sendo baixado, pois você tem uma etapa para enviar o artefato, reduzindo o tempo de conclusão do fluxo de trabalho. Você adicionará uma tarefa de implantação ao seu fluxo de trabalho e uma das etapas desse trabalho baixa o item enviado.

Mas antes de atualizar seu fluxo de trabalho, você configurará o Netlify para a implantação do aplicativo:

1. Abra seu navegador da web favorito, acesse o Netlify e faça login com seu GitHub.

2. Depois de fazer login, clique em Adicionar novo site na seção Sites e selecione Importar um projeto existente para iniciar a importação do seu projeto.

3. Clique no GitHub, pois você usará o repositório que criou para este tutorial no GitHub. Uma janela pop-up aparece onde você autorizará o acesso do Netlify à sua identidade do GitHub.

4. Uma vez autorizado, pesquise e selecione o repositório do qual deseja importar o projeto.

Selecting the GitHub repository to import the project from

5. Na nova página, configure as configurações básicas de construção do site, como o ramo de onde deseja implantar e o comando de construção. Mas como você estará implantando usando ações do GitHub, deixe os campos de comando de construção e diretório de publicação em branco.

Clique em “Implantar site” após configurar as opções de compilação e você verá que o site está sendo implantado. Uma vez implantado, um link ao vivo será gerado para o site.

Se você deixou o campo de comando de compilação em branco, ao acessar o link será exibida uma página 404, pois o aplicativo não foi compilado.

Configuring basic build settings for the site

6. Em seguida, clique em “Configurações do site” para visualizar as informações do site (passo seis).

7. Por fim, na página de Detalhes do site, anote o ID do site abaixo na seção Informações do site para uso posterior.

Criando um Token de Acesso Pessoal

Agora que você tem o ID do seu site, é necessário obter um token de acesso. O token de acesso pessoal concederá acesso à sua conta do Netlify para que as ações do GitHub realizem a implantação no Netlify.

1. Clique no ícone do seu perfil (canto superior direito) e escolha Configurações do usuário para acessar as configurações do seu perfil.

2. Na nova página, clique em Aplicativos (painel esquerdo) → Novo token de acesso (na seção Tokens de acesso pessoal) para iniciar a criação de um novo token de acesso.

3. Na nova página, insira um nome descritivo para o token e clique em Gerar token.

4. Agora, copie o token para um local seguro.

Protegendo o ID do Site e o Token de Acesso Criando Segredos

Agora que você tem o ID do site e o token de acesso do Netlify, pode adicioná-los ao seu repositório para serem usados no fluxo de trabalho das ações. Mas primeiro, você terá que proteger o ID do site e o token de acesso criando segredos.

1. Acesse o seu repositório no GitHub pelo navegador.

2. Em seguida, clique na guia Configurações → Segredos (painel esquerdo) → Actions (abaixo de Segredos) para acessar a lista de ações disponíveis no seu repositório.

Accessing the list of actions in the GitHub repository

3. Clique em Novo segredo do repositório na página de segredos do Actions para iniciar a adição de um segredo.

Initiating creating a new repository secret

4. Agora, forneça um Nome descritivo para o novo segredo. Neste tutorial, usamos NETLIFY_AUTH_TOKEN como o nome do segredo.

Adicione o seu token de acesso como Valor e clique em Adicionar segredo para criar o novo segredo.

5. Por fim, repita o passo quatro, mas desta vez, adicione um segredo para o ID do seu site.

Depois de adicionados, você verá os segredos na seção Segredos do repositório, conforme mostrado abaixo.

Baixando e Implementando Artefato no Netlify

Agora que seu site Netlify e segredos estão configurados, inclua uma etapa no seu fluxo de trabalho para implantar no Netlify usando seus segredos.

1. Atualize seu fluxo de trabalho adicionando o código abaixo contendo a tarefa de implantação.

O código a seguir contém etapas para baixar o artefato enviado e outra etapa para implantá-lo no Netlify.

Você pode encontrar o código completo para o arquivo ci.yml no repositório GitHub da ATA.

deploy:
  name: Deploy #Nome do trabalho
  needs: build # O trabalho de construção deve ser executado com sucesso para que o trabalho de implantação seja executado
  runs-on: ubuntu-latest

  steps:
  - name: Download artifact
    uses: actions/download-artifact@v3
# Baixa os arquivos enviados
    with:
      name: production
      path: ./build

  - name: Deploy to Netlify
    uses: netlify/actions/cli@master
# Etapa para implantar no Netlify
    env:
      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
# Segredos para autenticação
    with:
      args: deploy --dir=build --prod

2. Em seguida, adicione e envie as alterações para o repositório remoto.

Você deverá ver a execução mais recente na página de fluxos de trabalho no repositório, conforme mostrado abaixo.

Uma vez comprometido, clique na execução mais recente para ver mais detalhes.

Se os trabalhos forem executados com sucesso, você verá um visto verde ao lado dos trabalhos e o artefato de produção na parte inferior da página.

3. Agora, clique no trabalho de implantação (painel esquerdo) e expanda a tarefa de Implantação no Netlify. Você verá a saída da etapa, que contém a URL do site.

Clique na URL do site para verificar se o site funciona e é acessível.

A URL se abre automaticamente em uma nova guia do seu navegador da web, conforme mostrado abaixo. Esta saída indica que seu site está funcionando corretamente.

Verifying the site works correctly and is accessible via a web browser

Excluir artefatos não utilizados para economizar espaço

Após cada lançamento, você consome mais espaço em disco ao fazer upload e download de novos lançamentos. Como você economiza espaço? Excluir artefatos não utilizados é a solução mais viável. Você deve limitar o número de artefatos de lançamento que residem em cada servidor para evitar o acúmulo de milhares de lançamentos e um disco cheio.

Além de usar a configuração do período de retenção para excluir artefatos após algum tempo, você também pode excluí-los na página de fluxos de trabalho no GitHub:

Na sua página de fluxo de trabalho, clique no ícone de exclusão ao lado do artefato que deseja deletar.

Deleting an artifact from the workflow on GitHub

Agora, clique em OK na mensagem de confirmação (superior) para confirmar a exclusão do artefato.

Observe abaixo que o artefato não está mais na página, confirmando que foi excluído com sucesso.

Conclusão

Você viu como os artefatos tornam mais simples desenvolver automações mais complexas, nas quais um fluxo de trabalho fornece informações para outro. Neste ponto, você deveria ter uma compreensão melhor sobre os artefatos do GitHub Actions e como podem ser usados para os lançamentos de seus deploys.

Com esse novo conhecimento, que tal aproveitar as ações do GitHub para a automação de fluxo de trabalho do seu próximo projeto?