Gerenciar Efetivamente Artefatos do GitHub Actions para Implementar Versões – techsyncer

Sua equipe investiu muito esforço em empacotar código manualmente? Se sim, é hora de começar a usar os Artefatos do GitHub Actions, para que sua equipe possa automatizar esse procedimento. Ao mesmo tempo, você reduz a variabilidade nas versões e economiza tempo para trabalhar em outras tarefas cruciais.

Os Artefatos do GitHub Actions permitem transferir efetivamente dados de um trabalho ativo para outro, eliminando as tarefas repetitivas e demoradas envolvidas na implantação. Neste tutorial, você aprenderá como usar e gerenciar artefatos para implantar uma aplicação React no Netlify.

Continue lendo e comece a criar implantaçõ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 no GitHub. Este tutorial utiliza um repositório de aplicativo de contador React.

Construindo um Fluxo de Trabalho CI/CD

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

Mas antes de usar os artefatos do GitHub Actions para suas versões de implantação, você precisa primeiro construir um fluxo de trabalho CI/CD para 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 desejar. Mas para este tutorial, o arquivo é nomeado como ci.yml.

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

3. Adicione o seguinte código no arquivo ci.yml e salve as alterações. O código abaixo cria um fluxo de trabalho chamado CI com uma tarefa de construçã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 executar
    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 confirme as alterações e faça o 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 Ações para visualizar o fluxo de trabalho.

6. Clique em qualquer tarefa de construção no lado esquerdo e expanda a tarefa de construção do aplicativo. Você verá os dados da tarefa de construção (arquivos estáticos) gerados. Esses são os arquivos necessários para implantação.

Esses arquivos gerados são perdidos quando o servidor que executa a tarefa é descartado (ou quando a tarefa termina). Como você precisará desses arquivos para a 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 na etapa do seu trabalho de construção.

O código abaixo faz o upload de um artefato chamado production do diretório de construçã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 enviá-los como um artefato.

# Upload de 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

Os artefatos são armazenados por padrão por 90 dias antes de serem apagados. Mas, 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 na sua etapa # Upload de Artefato.

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

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

Acesse a guia 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 compilação agora pode ser acessado em outro trabalho no fluxo de trabalho, sendo baixado porque 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 fará o download do 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, vá para Netlify e faça login com seu GitHub.

2. Uma vez logado, 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 criado 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 compilação para o site, como o ramo de onde deseja implantar e o comando de compilação. Mas, como você implantará usando as ações do GitHub, deixe os campos de comando de compilaçã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, acessar o link exibirá 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 último, na página de Detalhes do site, anote o ID do site abaixo da seção de 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 Aplicações (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, você pode adicioná-los ao seu repositório para serem usados no fluxo de trabalho das ações. Mas antes, será necessário proteger o ID do site e o token de acesso criando segredos.

1. Navegue até o seu repositório do GitHub no seu navegador.

2. Em seguida, clique na guia Configurações → Segredos (painel esquerdo) → Ações (em 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 das Ações 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. Mas este tutorial usa NETLIFY_AUTH_TOKEN como o nome do segredo.

Adicione o seu token de acesso como o 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 de Segredos do repositório, como mostrado abaixo.

Baixando e Implementando Artefato no Netlify

Agora que seu site Netlify e segredos estão configurados, você incluirá um passo 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 do 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
# Passo 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 última confirmação sendo executada na página de fluxos de trabalho no repositório, conforme mostrado abaixo.

Uma vez confirmado, 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 do passo, que contém a URL do site.

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

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

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

Excluindo Artefatos Não Utilizados para Economizar Espaço

Após cada lançamento, você usa mais espaço em disco ao enviar e baixar 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 residentes 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 excluir o artefato 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 para excluí-lo.

Deleting an artifact from the workflow on GitHub

Agora, clique em OK no prompt (o mais acima) 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 o desenvolvimento de automações mais complexas em que um fluxo de trabalho fornece informações para outro. Neste ponto, você deveria ter uma melhor compreensão dos artefatos de Ações do GitHub e como eles podem ser usados para seus lançamentos de implantação.

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