CI/CD para projetos TypeScript: GitHub Actions do A ao Z

Introdução: Por que CI/CD é crucial para projetos TypeScript

Desenvolver em TypeScript é uma ferramenta poderosa, mas sem a automação dos processos de build, teste e implantação, você corre o risco de enfrentar erros humanos, perda de tempo e instabilidade em produção. CI/CD (Integração Contínua / Implantação Contínua) é uma filosofia e um conjunto de práticas que permitem automatizar esses processos. GitHub Actions é uma ferramenta integrada do GitHub, ideal para projetos TypeScript, oferecendo pipelines flexíveis, escaláveis e gratuitos (para repositórios públicos).

Neste artigo, percorreremos o caminho do zero até um pipeline completo: configuraremos linting, testes, build e deploy automático de uma aplicação TypeScript. Você aprenderá a escrever arquivos YAML eficientes, otimizar o tempo de execução e evitar erros comuns.

Parte principal: Criação passo a passo de um pipeline CI/CD

1. Fundamentos do GitHub Actions: estrutura do workflow

Um workflow (fluxo de trabalho) no GitHub Actions é um conjunto de etapas agrupadas em jobs. Ele é descrito em um arquivo YAML, armazenado no diretório .github/workflows/ do seu repositório. A estrutura básica é assim:

name: CI/CD Pipeline for TypeScript\n\non:\n  push:\n    branches: [ main, develop ]\n  pull_request:\n    branches: [ main ]\n\njobs:\n  build-and-test:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v4\n      - name: Setup Node.js\n        uses: actions/setup-node@v4\n        with:\n          node-version: '20'\n          cache: 'npm'\n      - run: npm ci\n      - run: npm run build\n      - run: npm test

Elementos-chave:

\n
• on: — gatilhos (push, pull_request).
\n
• jobs: — lista de tarefas (jobs) que são executadas em paralelo ou sequencialmente.
\n
• runs-on: — sistema operacional para execução (geralmente ubuntu-latest).
\n
• steps: — sequência de comandos. uses chama ações prontas (actions), e run executa comandos shell.
\n
• npm ci — instalação limpa e rápida de dependências com base no package-lock.json.
\n

Este pipeline mínimo já garante um CI básico: a cada push ou PR, o código será verificado quanto ao build e testes.

2. Configuração avançada: linting, formatação e matriz de versões

Para projetos TypeScript, é fundamental manter um estilo de código consistente. Vamos adicionar verificação com linter (eslint) e formatador (prettier). Também usaremos uma matriz de estratégias para testar em várias versões do Node.js.

jobs:\n  lint-and-format:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: '20'\n          cache: 'npm'\n      - run: npm ci\n      - run: npm run lint\n      - run: npm run format:check\n\n  test:\n    needs: lint-and-format\n    runs-on: ubuntu-latest\n    strategy:\n      matrix:\n        node-version: [18, 20, 22]\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: ${{ matrix.node-version }}\n          cache: 'npm'\n      - run: npm ci\n      - run: npm test

Pontos importantes:

\n
• needs: — define a ordem de execução dos jobs (primeiro linting, depois testes).
• strategy.matrix — permite executar o mesmo job com diferentes parâmetros (versões do Node.js).
• O cache (cache: 'npm') acelera a instalação de dependências.
• Adicione scripts no package.json: "lint": "eslint src/" e "format:check": "prettier --check src/".

Agora seu pipeline não apenas ver