CI/CD para projetos TypeScript: GitHub Actions

Introdução: Por que CI/CD é crítico para projetos TypeScript

O desenvolvimento moderno em TypeScript exige não apenas código de qualidade, mas também um processo confiável para entregá-lo aos usuários. Executar testes, builds e deploys manualmente não é apenas rotina, mas também uma fonte de erros. CI/CD (Continuous Integration / Continuous Deployment) resolve esse problema automatizando cada etapa.

Neste artigo, vamos detalhar como configurar um pipeline CI/CD completo para um projeto TypeScript usando GitHub Actions. Você aprenderá a automatizar linting, testes, build e deploy da sua aplicação, economizando horas de trabalho.

O artigo foi escrito para a plataforma PythonLib, mas todos os exemplos e conceitos são aplicáveis a qualquer projeto TypeScript. Usaremos TypeScript 5.x e Node.js 20.

Parte principal: Configuração passo a passo de CI/CD

1. Estrutura do projeto e preparação

Antes de escrever o workflow, certifique-se de que seu projeto TypeScript está configurado corretamente. Aqui está a estrutura mínima:

my-typescript-app/├── src/│   └── index.ts├── tests/│   └── index.test.ts├── package.json├── tsconfig.json├── .eslintrc.json└── .github/    └── workflows/        └── ci.yml

Importante: no package.json devem estar definidos os scripts para teste e build.

{  "name": "my-typescript-app",  "version": "1.0.0",  "scripts": {    "build": "tsc",    "test": "jest",    "lint": "eslint src/**/*.ts",    "start": "node dist/index.js"  },  "devDependencies": {    "typescript": "^5.3.0",    "jest": "^29.7.0",    "@types/jest": "^29.5.0",    "ts-jest": "^29.1.0",    "eslint": "^8.50.0"  }}

Certifique-se de que tsconfig.json inclui um outDir correto (por exemplo, "./dist") e o modo strict.

2. Criando o workflow do GitHub Actions

O GitHub Actions funciona com base em arquivos YAML no diretório .github/workflows/. Crie um arquivo ci.yml com o seguinte conteúdo:

name: CI/CD Pipeline

on:  push:    branches: [ main, develop ]  pull_request:    branches: [ main ]

jobs:  build-and-test:    runs-on: ubuntu-latest

    strategy:      matrix:        node-version: [18.x, 20.x]

    steps:    - uses: actions/checkout@v4

    - name: Use Node.js ${{ matrix.node-version }}      uses: actions/setup-node@v4      with:        node-version: ${{ matrix.node-version }}        cache: 'npm'

    - name: Install dependencies      run: npm ci

    - name: Lint code      run: npm run lint

    - name: Build project      run: npm run build

    - name: Run tests      run: npm test

    - name: Upload build artifacts      uses: actions/upload-artifact@v4      with:        name: build-${{ matrix.node-version }}        path: dist/

Análise dos pontos-chave:

• on: O workflow é acionado em push e pull request para as branches main e develop.
• matrix: Testamos em duas versões do Node.js (18 e 20) para compatibilidade.
• npm ci: Instalação limpa de dependências (mais rápida e confiável que npm install).
• upload-artifact: Salvamos os arquivos compilados para deploy posterior.

3. Adicionando a etapa de deploy

Após o build e testes bem-sucedidos, podemos fazer o deploy automático da aplicação. Vamos considerar o deploy no GitHub Pages (para sites estáticos) e em VPS via SSH.

Opção A: Deploy no GitHub Pages

deploy:  needs: build-and-test  runs-on: ubuntu-latest  if: github.ref == 'refs/heads/main'

  steps:  - uses: actions/download-artifact@v4    with:      name: build-20.x      path: dist/

  - name: Deploy to GitHub Pages    uses
```