Criar uma aplicação com o GitHub Actions
No primeiro guia do módulo fundamentos da automação, apresentamos o GitHub Actions criando um fluxo de trabalho simples "Hello World" e explicando os componentes individuais de um arquivo de fluxo de trabalho. Este guia leva esses aprendizados em uma direção prática para criar uma aplicação Next.js que testaremos e implantaremos nos guias a seguir. Ao final deste módulo, teremos criado, testado e implantado uma aplicação Web simples nas páginas do GitHub usando o GitHub Actions. A Amplifon se junta a nós novamente para nos contar como eles aceleraram suas práticas de implantação aproveitando o GitHub Marketplace e adotando o internalsourcing.
Neste guia, você aprenderá:
Os conceitos básicos da compilação de uma aplicação no GitHub Actions.
Como e por que usar ações existentes do GitHub Marketplace quando possível.
As práticas recomendadas para usar ações de terceiros do GitHub Marketplace.
Criar um arquivo de fluxo de trabalho de CI/CD
A primeira etapa é criar o arquivo de fluxo de trabalho que nos guiará pelo processo de compilar, testar e implantar a aplicação da Web no GitHub Pages. Se você começou com o primeiro guia neste módulo e copiou o repositório de demonstração, então já pode começar. Caso contrário, recomendamos retornar a esse guia e seguir as instruções de “Como seguir nosso repositório de demonstração” primeiro.
Com isso, vamos começar.
Navegue até a sua cópia do repositório
actions-learning-pathwayem GitHub.com no navegador.Navegue até a guia “Actions” do repositório e clique em New workflow.
Clique em Set up a workflow for yourself para começar a editar um arquivo de fluxo de trabalho em branco no diretório
.github/workflowsdo seu repositório. Defina o nome do arquivo comobuild-test-deploy.yml.Insira o seguinte código no editor:
name: hello-world
on: push
jobs:
hello-world-job:
runs-on: ubuntu-latest
steps:
- name: Check out repository code
uses: actions/checkout@v3
- run: echo "$(cat hello_world.txt)"
A primeira parte deste fluxo de trabalho se parece muito com o nosso primeiro. Ele ainda executa on: push e usa um executor hospedado pelo GitHub em ubuntu-latest. A primeira etapa também continua a mesma: verificar o código usando a ação checkout, que recupera o código do repositório e permite que o nosso fluxo de trabalho acesse o conteúdo do seu repositório.
Configurar a ferramenta de compilação
Já que estamos usando Node.js, precisamos configurá-lo usando a ação setup-node. Para isso, vamos adicionar uma etapa semelhante à anterior. Como queremos usar uma versão específica do Node.js, no entanto, vamos conferir as instruções de uso para esta ação e configurar a versão de acordo.
- name: use node.js
uses: actions/setup-node@v3
with:
node-version: '18.x'
A ação setup-node , assim como a ação checkout , é uma das dezenas de milhares de ações disponíveis no GitHub Marketplace para você usar. É sempre melhor pesquisar para ver o que está disponível no GitHub Marketplace antes de compilar por conta própria. No entanto, lembre-se de auditar o código de toda ação de terceiros que usar. Para garantir que está executando um código confiável, basta procurar pela mensagem “Creator verified by GitHub” próxima à ação nos resultados da pesquisa.
Essa mensagem indica que a ação foi criada por uma empresa confiável como GitHub, Microsoft ou Amazon Web Services, por exemplo. Outra prática recomendada é bloquear a ação no SHA do Git para garantir que o código da ação não mudará. Isso também ajuda a garantir que toda atualização ou alteração em uma ação não interromperá o fluxo de trabalho.
Usamos as ações do GitHub Marketplace sempre que possível para resolver problemas comuns. Não precisamos reinventar a roda, e isso economiza tempo e nos ajuda a manter os fluxos de trabalho simples e claros.
Quando registramos nossas próprias ações, elas são compartilhadas internamente para que todos na Amplifon possam aproveitá-las e reutilizá-las. É uma forma simples de fomentar uma cultura de innersource e eliminar o retrabalho.
Compilar o código
Com a ferramenta de compilação instalada e configurada, vamos compilar a aplicação Next.js com npm. Para isso, é possível usar os mesmos comandos usados localmente para compilar código. Portanto, vamos adicionar o seguinte, também em etapas, para instalar o npm e executar o comando de compilação:
- run: npm install
- run: npm run build
O seu fluxo de trabalho build-test-deploy deve ter a seguinte aparência neste momento:
name: build-test-deploy
on: push
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: checkout repo
uses: actions/checkout@v3
- name: use node.js
uses: actions/setup-node@v3
with:
node-version: '18.x'
- run: npm install
- run: npm run build
Como o nosso fluxo de trabalho executa on: push, qualquer push efetuado para o repositório (incluindo o próprio arquivo) acionará o fluxo de trabalho. Portanto, após essas adições, vamos fazer commit das alterações e compilar a aplicação.
Clique em Commit changes….
Insira uma mensagem do commit e clique em Commit changes na caixa de diálogo.
Isso retorna você ao diretório .github/workflows do repositório, onde é possível visualizar o arquivo do fluxo de trabalho build-test-deploy.yml recém-criado. Vamos ver se deu certo!
Selecione a guia “Actions”.
Clique na mensagem do commit que você inseriu, ou Create build-test-deploy.yml se deixou em branco, para ver os detalhes da execução de fluxo de trabalho.
Clique no trabalho build para expandir as etapas individuais.
Clique em run: npm run build para visualizar os detalhes da compilação.
A seguir: Teste de aplicações com o GitHub Actions
Agora que compilamos a aplicação, precisamos confirmar se o resultado foi o esperado. As ações possibilitam a automação de uma grande variedade de testes, para que você nunca precise se preocupar em executá-los manualmente. No próximo guia, vamos expandir o fluxo de trabalho ao adicionar um teste simples.