CI/CD para proyectos JavaScript: GitHub Actions

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Introducción a CI/CD y GitHub Actions para JavaScript

El desarrollo moderno de aplicaciones JavaScript en Node.js requiere no solo código de calidad, sino también un proceso confiable para entregarlo a los usuarios. CI/CD (Integración Continua / Despliegue Continuo) es un conjunto de prácticas que permite automatizar la compilación, las pruebas y el despliegue del código. Una de las herramientas más populares para implementar CI/CD es GitHub Actions, un sistema de automatización de flujo de trabajo integrado en la plataforma GitHub.

En este artículo, analizaremos en detalle cómo configurar CI/CD para un proyecto JavaScript (Node.js) usando GitHub Actions. Aprenderá a crear pipelines, ejecutar pruebas, realizar linting, compilar el proyecto y desplegarlo automáticamente en un servidor o en un hosting en la nube. El material será útil tanto para desarrolladores principiantes como para ingenieros experimentados que deseen optimizar el proceso de desarrollo.

Fundamentos de GitHub Actions: estructura y sintaxis

GitHub Actions funciona con archivos YAML que se almacenan en el directorio .github/workflows de su repositorio. Cada uno de estos archivos define uno o varios workflows, que se ejecutan según eventos específicos: push, pull request, creación de un release, etc.

La estructura básica de un workflow incluye:

name — nombre del pipeline;
on — evento que desencadena la ejecución;
jobs — conjunto de tareas que se ejecutan de forma secuencial o paralela;
steps — pasos dentro de cada tarea (comandos, acciones).

Veamos un ejemplo mínimo para un proyecto Node.js:

name: Node.js CI

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

jobs:  build:    runs-on: ubuntu-latest

    steps:      - uses: actions/checkout@v4      - name: Setup Node.js        uses: actions/setup-node@v4        with:          node-version: '20'      - run: npm ci      - run: npm test

En este ejemplo, usamos acciones integradas: actions/checkout para clonar el repositorio y actions/setup-node para instalar la versión necesaria de Node.js. El comando npm ci instala las dependencias estrictamente según package-lock.json, y npm test ejecuta las pruebas.

Configuración de pruebas y linting

Un pipeline de CI/CD de calidad para un proyecto JavaScript debe incluir la verificación del código según los estándares y las pruebas automáticas. Veamos un ejemplo avanzado con herramientas populares: ESLint para linting, Jest para pruebas y Prettier para formateo.

Agreguemos las dependencias necesarias al proyecto:

npm install --save-dev eslint jest prettier eslint-config-prettier

Creemos un archivo de configuración .eslintrc.json:

{  "env": {    "node": true,    "es2021": true,    "jest": true  },  "extends": ["eslint:recommended", "prettier"],  "parserOptions": {    "ecmaVersion": "latest",    "sourceType": "module"  },  "rules": {    "no-console": "warn",    "semi": ["error", "always"]  }}

Ahora actualicemos el archivo del workflow:

name: Lint and Test

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

jobs:  quality:    runs-on: ubuntu-latest

    steps:      - uses: actions/checkout@v4      - uses: actions/setup-node@v4        with:          node-version: '20'          cache: 'npm'

      - name: Install dependencies        run: npm ci

      - name: Run linter        run: npx eslint .

      - name: Check formatting        run: npx prettier --check .

      - name: Run tests        run: npm test

      - name: Upload test coverage