CI/CD para proyectos TypeScript: GitHub Actions de la A a la Z

Introducción: Por qué CI/CD es críticamente importante para proyectos TypeScript

Desarrollar con TypeScript es una herramienta poderosa, pero sin automatizar los procesos de compilación, pruebas e implementación, corres el riesgo de enfrentarte a errores humanos, pérdida de tiempo e inestabilidad en producción. CI/CD (Integración Continua / Despliegue Continuo) es una filosofía y un conjunto de prácticas que permiten automatizar estos procesos. GitHub Actions es la herramienta integrada de GitHub que es ideal para proyectos TypeScript, proporcionando pipelines flexibles, escalables y gratuitos (para repositorios públicos).

En este artículo, recorreremos el camino desde cero hasta un pipeline completo: configuraremos linting, pruebas, compilación y despliegue automático de una aplicación TypeScript. Aprenderás a escribir configuraciones YAML efectivas, optimizar el tiempo de ejecución y evitar errores típicos.

Parte principal: Creación paso a paso de un pipeline CI/CD

1. Fundamentos de GitHub Actions: estructura de un workflow

Un workflow (flujo de trabajo) en GitHub Actions es un conjunto de pasos agrupados en jobs. Se describe en un archivo YAML que se almacena en el directorio .github/workflows/ de tu repositorio. La estructura básica se ve así:

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 clave:

\n
• on: — disparadores (push, pull_request).
\n
• jobs: — lista de tareas (jobs) que se ejecutan en paralelo o secuencialmente.
\n
• runs-on: — sistema operativo para la ejecución (normalmente ubuntu-latest).
• steps: — secuencia de comandos. uses invoca acciones predefinidas (actions), y run ejecuta comandos de shell.
• npm ci — instalación limpia y rápida de dependencias basada en package-lock.json.

Este pipeline mínimo ya proporciona CI básico: con cada push o PR, el código se verificará en compilación y pruebas.

2. Configuración avanzada: linting, formato y matriz de versiones

Para proyectos TypeScript, es crítico mantener un estilo de código uniforme. Agreguemos verificación con linter (eslint) y formateador (prettier). También usaremos una matriz de estrategias para probar en múltiples versiones de 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

Puntos importantes:

\n
• needs: — define el orden de ejecución de los jobs (primero linting, luego pruebas).
• strategy.matrix — permite ejecutar el mismo job con diferentes parámetros (versiones de Node.js).
• El almacenamiento en caché (cache: 'npm') acelera la instalación de dependencias.
• Agrega scripts en package.json: "lint": "eslint src/" y "format:check": "prettier --check src/".

Ahora tu pipeline no solo pr