DEV Community

Cover image for Criando uma Pipeline CI/CD com GitHub Actions para Projetos Node.js com TypeScript e Docker
Lucas Pereira de Souza
Lucas Pereira de Souza

Posted on

3

Criando uma Pipeline CI/CD com GitHub Actions para Projetos Node.js com TypeScript e Docker

Implementar uma pipeline de integração e entrega contínua (CI/CD) é essencial para automatizar testes, builds e o deploy de aplicações. Neste post, veremos como configurar uma pipeline CI/CD em um projeto Node.js com TypeScript usando GitHub Actions e Docker.

Pré-requisitos

Para seguir este guia, você precisará:

  • Um repositório no GitHub com um projeto Node.js configurado com TypeScript.
  • Docker instalado em sua máquina para testes locais.

Passo 1: Configurando o Projeto Node.js com TypeScript

Certifique-se de que seu projeto está pronto para ser containerizado e que ele usa TypeScript. Inclua um Dockerfile para gerar a imagem e defina os scripts necessários no package.json.

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js",
    "test": "jest"
  }
}
Enter fullscreen mode Exit fullscreen mode

Crie um Dockerfile para o ambiente de produção:

# Dockerfile
FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .

RUN npm run build

EXPOSE 3000
CMD ["npm", "start"]
Enter fullscreen mode Exit fullscreen mode

Passo 2: Escrevendo o Workflow do GitHub Actions

No repositório GitHub, crie o diretório .github/workflows/ e, dentro dele, um arquivo YAML chamado ci.yml. Esse arquivo vai definir o workflow da pipeline.

# .github/workflows/ci.yml
name: CI/CD Pipeline

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    services:
      docker:
        image: docker:20.10.7
        options: --privileged
        ports:
          - 3000:3000

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

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Run TypeScript build
        run: npm run build

      - name: Run Tests
        run: npm test

      - name: Build Docker image
        run: docker build -t my-app:latest .

      - name: Push Docker image
        env:
          DOCKER_HUB_USERNAME: ${{ secrets.DOCKER_HUB_USERNAME }}
          DOCKER_HUB_ACCESS_TOKEN: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}
        run: |
          echo $DOCKER_HUB_ACCESS_TOKEN | docker login -u $DOCKER_HUB_USERNAME --password-stdin
          docker tag my-app:latest $DOCKER_HUB_USERNAME/my-app:latest
          docker push $DOCKER_HUB_USERNAME/my-app:latest
Enter fullscreen mode Exit fullscreen mode

Explicação do Workflow

  • Triggers: A pipeline é acionada em push e pull_request na branch main.
  • Jobs: A pipeline é dividida em etapas (jobs) que incluem a instalação de dependências, a construção do projeto TypeScript, testes, criação de imagem Docker e envio da imagem para o Docker Hub.
  • Secrets: As credenciais do Docker Hub estão armazenadas como secrets no GitHub (DOCKER_HUB_USERNAME e DOCKER_HUB_ACCESS_TOKEN).

Passo 3: Configurando os Secrets

No GitHub:

  1. Acesse Settings > Secrets and Variables > Actions.
  2. Adicione DOCKER_HUB_USERNAME e DOCKER_HUB_ACCESS_TOKEN como secrets.

Passo 4: Validando e Testando a Pipeline

Realize um push ou uma pull request para a branch main para verificar a execução da pipeline. No GitHub, em Actions, você verá o status da execução em tempo real, e, ao final, uma imagem Docker será enviada para o Docker Hub, pronta para ser utilizada.

Conclusão

A pipeline CI/CD automatizada garante que cada modificação no código passe por um ciclo de testes e criação de imagem Docker, reduzindo erros em produção e aumentando a eficiência do processo de desenvolvimento. Esta abordagem é essencial para manter um fluxo de desenvolvimento robusto e confiável.

Postgres on Neon - Get the Free Plan

No credit card required. The database you love, on a serverless platform designed to help you build faster.

Get Postgres on Neon

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay