Configurando pipeline com github actions para um projeto React

Fazia tempo que não configurava um serviço de ci/cd e esses dias fui fazer isso no github usando o github actions e percebi ser bem simples, e podemos fazer várias rotinas, é bem legal, mesmo se você estiver trabalhando sozinho, pois consegue que tod…


This content originally appeared on DEV Community and was authored by Maycon Alves

Image description

Fazia tempo que não configurava um serviço de ci/cd e esses dias fui fazer isso no github usando o github actions e percebi ser bem simples, e podemos fazer várias rotinas, é bem legal, mesmo se você estiver trabalhando sozinho, pois consegue que todo commit seja verificado para saber se não quebrou nada.

Vou mostrar uma configuração simples e você pode adaptar para o que você vai precisar no seu dia-a-dia

Primeiro passo, dentro da raiz do seu projeto, crie uma pasta .github dentro dessa pasta crie outra pasta chamada workflows e dentro crie o seu arquivo para rodar sempre que um commit entrar na sua branch main ou sempre que abrir Pull Request. Vou chamar o arquivo de build.yaml para o exemplo:

name: Build and Deploy

on:
  push:
    branches: 'main'
  pull_request:
    branches: 'main'

jobs:
  tests:
    name: Run Tests
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Use Node.js 20.x
        uses: actions/setup-node@v3
        with:
          node-version: 20.x
          cache: 'yarn'

      - name: Install Dependencies
        run: yarn install

      - name: Run Tests
        run: yarn test

  deploy:
    name: Build and Deploy
    needs: [tests]
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Use Node.js 20.x
        uses: actions/setup-node@v3
        with:
          node-version: 20.x
          cache: 'yarn'

      - name: Install Dependencies
        run: yarn install

      - name: Run Build
        run: yarn build

Bora para uma simples explicação

1 On nessa propriedade dizemos quando a action deve rodar, no caso, quando acontecer um commit ou um PR para a branch main.

2 Jobs nessa rotina dizemos quais scripts que queremos que nosso action execute no meu caso só tem dois o de tests e deploy o primeiro argumento é nome da tarefa no meu caso são Run Tests e Build and Deploy, depois temos runs-on que vai ser o ambiente que vamos querer que o nossa pipe rode, ou seja, vamos querer uma máquina virtual ubuntu na última versão, antes de entrar nos steps nosso job de build tem uma instrução chamada needs passando o argumento [tests], ou seja, para o nosso deploy rodar, precisa rodar os testes antes sem que nada quebre.

3 Steps temos algumas rotinas aqui dentro, no primeiro name e uses as actions fazem checkout do seu código e “pedem autorização” para seguir com as próximas rotinas:

- name: Checkout code
    uses: actions/checkout@v3

Depois podemos declarar qual versão do node ele vai usar para rodar os scripts do nosso projeto:

- name: Use Node.js 20.x
    uses: actions/setup-node@v3
      with:
        node-version: 20.x
        cache: 'yarn'

Normalmente você vai ver essa propriedade cache com npm, mas eu preferi usar o yarn, pois estava usando ele localmente também.

Por último pedimos para de fato ele rodar o script de instalação e logo em seguida o de testes:

- name: Install Dependencies
    run: yarn install

- name: Run Tests
    run: yarn test

O de build é o mesmo, porém só muda de yarn test para yarn build.

Bem é isso, é algo bem simples de se construir, é legal implementar em ambientes diferentes e fazer vários testes. Espero que tenham gostado e qualquer feedback será muito bem-vindo, muito obrigado.


This content originally appeared on DEV Community and was authored by Maycon Alves


Print Share Comment Cite Upload Translate Updates
APA

Maycon Alves | Sciencx (2024-07-02T17:33:24+00:00) Configurando pipeline com github actions para um projeto React. Retrieved from https://www.scien.cx/2024/07/02/configurando-pipeline-com-github-actions-para-um-projeto-react/

MLA
" » Configurando pipeline com github actions para um projeto React." Maycon Alves | Sciencx - Tuesday July 2, 2024, https://www.scien.cx/2024/07/02/configurando-pipeline-com-github-actions-para-um-projeto-react/
HARVARD
Maycon Alves | Sciencx Tuesday July 2, 2024 » Configurando pipeline com github actions para um projeto React., viewed ,<https://www.scien.cx/2024/07/02/configurando-pipeline-com-github-actions-para-um-projeto-react/>
VANCOUVER
Maycon Alves | Sciencx - » Configurando pipeline com github actions para um projeto React. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/02/configurando-pipeline-com-github-actions-para-um-projeto-react/
CHICAGO
" » Configurando pipeline com github actions para um projeto React." Maycon Alves | Sciencx - Accessed . https://www.scien.cx/2024/07/02/configurando-pipeline-com-github-actions-para-um-projeto-react/
IEEE
" » Configurando pipeline com github actions para um projeto React." Maycon Alves | Sciencx [Online]. Available: https://www.scien.cx/2024/07/02/configurando-pipeline-com-github-actions-para-um-projeto-react/. [Accessed: ]
rf:citation
» Configurando pipeline com github actions para um projeto React | Maycon Alves | Sciencx | https://www.scien.cx/2024/07/02/configurando-pipeline-com-github-actions-para-um-projeto-react/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.