Configurando pipeline com github actions para um projeto React
Published: 2024-07-02 17:33:24



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tg8yyecw3apdp5dnbfev.png)

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:

```yaml
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:
```yaml
- 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:

```yaml
- 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:

```yaml
- 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.