CI/CD para proyectos TypeScript: GitHub Actions

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

El desarrollo moderno con TypeScript requiere no solo código de calidad, sino también un proceso confiable para entregarlo a los usuarios. Ejecutar pruebas, compilar y desplegar manualmente no solo es rutinario, sino también una fuente de errores. CI/CD (Continuous Integration / Continuous Deployment) resuelve este problema automatizando cada etapa.

En este artículo, analizaremos cómo configurar un pipeline CI/CD completo para un proyecto TypeScript usando GitHub Actions. Aprenderá a automatizar el linting, las pruebas, la compilación y el despliegue de su aplicación, ahorrando horas de trabajo.

Este artículo está escrito para la plataforma PythonLib, pero todos los ejemplos y conceptos son aplicables a cualquier proyecto TypeScript. Usaremos TypeScript 5.x y Node.js 20.

Parte principal: Configuración paso a paso de CI/CD

1. Estructura del proyecto y preparación

Antes de escribir el workflow, asegúrese de que su proyecto TypeScript esté configurado correctamente. Aquí está la estructura mínima:

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

Importante: en package.json deben estar definidos los scripts para pruebas y compilación.

{  "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"  }}

Asegúrese de que tsconfig.json incluya un outDir correcto (por ejemplo, "./dist") y el modo strict.

2. Creación del workflow de GitHub Actions

GitHub Actions funciona con archivos YAML en el directorio .github/workflows/. Cree un archivo ci.yml con el siguiente contenido:

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álisis de los puntos clave:

• on: El workflow se ejecuta en push y pull request hacia las ramas main y develop.
• matrix: Probamos en dos versiones de Node.js (18 y 20) para compatibilidad.
• npm ci: Instalación limpia de dependencias (más rápida y confiable que npm install).
• upload-artifact: Guardamos los archivos compilados para el despliegue posterior.

3. Agregar la etapa de despliegue

Después de una compilación y pruebas exitosas, puede desplegar la aplicación automáticamente. Consideremos el despliegue en GitHub Pages (para sitios estáticos) y en un VPS a través de SSH.

Opción A: Despliegue en 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