Compilación y Prueba Básica con GitHub Actions

Introducción

En el desarrollo de software moderno, la Integración Continua (CI) es una práctica crucial donde los desarrolladores fusionan frecuentemente sus cambios de código en un repositorio central. Se ejecutan compilaciones y pruebas automatizadas para verificar estos cambios.

GitHub Actions es una plataforma CI/CD popular que le permite automatizar su canalización (pipeline) de compilación, prueba y despliegue directamente dentro de GitHub.

En este laboratorio, aprenderá a crear un flujo de trabajo (workflow) básico de GitHub Actions para un proyecto Node.js. Definirá pasos para configurar el entorno Node.js, instalar dependencias y ejecutar pruebas. Finalmente, confirmará (commit) e impulsará (push) estos cambios a su repositorio de GitHub.

Este laboratorio se basa en el repositorio que creó en los laboratorios anteriores. Clonará el repositorio github-actions-demo y creará un flujo de trabajo de CI para un proyecto Node.js.

Al final de este laboratorio, comprenderá la estructura de un archivo de flujo de trabajo .yml y cómo configurar pasos esenciales de CI.

Añadir configuración de Node.js con uses actions/setup-node@v4

En este paso, clonarás el repositorio y crearás un archivo de flujo de trabajo (workflow) con la configuración del entorno Node.js. Los flujos de trabajo de GitHub Actions se definen en archivos YAML ubicados en el directorio .github/workflows de tu repositorio.

1. En la página de tu repositorio de GitHub para github-actions-demo, haz clic en el botón verde Code.
2. Asegúrate de que la pestaña HTTPS esté seleccionada y copia la URL. Debería verse como https://github.com/your-username/github-actions-demo.git.
3. Abre la terminal en el entorno LabEx. La ruta predeterminada es ~/project.
4. Usa el comando git clone para descargar el repositorio. Reemplaza your-username con tu nombre de usuario real de GitHub.

cd ~/project
git clone https://github.com/your-username/github-actions-demo.git

5. Navega dentro del repositorio clonado:

cd ~/project/github-actions-demo

6. Crea un nuevo archivo llamado node-ci.yml dentro del directorio .github/workflows:

touch .github/workflows/node-ci.yml

7. Abre .github/workflows/node-ci.yml en el WebIDE y comienza añadiendo el nombre del flujo de trabajo y el disparador (trigger):

name: Node.js CI

on: [push]

8. Añade la sección jobs y define el trabajo build con su ejecutor (runner):

jobs:
  build:
    runs-on: ubuntu-latest

9. Añade la sección steps. Primero, añade el paso checkout para obtener el código del repositorio:

steps:
  - uses: actions/checkout@v4

10. Añade el paso de configuración de Node.js:

- name: Use Node.js
  uses: actions/setup-node@v4
  with:
    node-version: "20"

Tu archivo completo debería verse ahora así:

name: Node.js CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"

Explicación

• name: El nombre de tu flujo de trabajo.
• on: [push]: Dispara el flujo de trabajo cada vez que se hace un push de código al repositorio.
• jobs: Agrupa todas las tareas que se ejecutan en el flujo de trabajo.
• runs-on: ubuntu-latest: Configura el trabajo para que se ejecute en una máquina virtual alojada por GitHub que ejecuta la última versión de Ubuntu.
• steps: Una secuencia de tareas.
• uses: actions/checkout@v4: Hace un checkout de tu repositorio para que el flujo de trabajo pueda acceder a él.
• uses: actions/setup-node@v4: Esta es la action oficial para instalar Node.js en el runner. Especificamos la versión '20'.

Añadir paso para instalar dependencias con run npm install

Ahora que el entorno está configurado con Node.js, el siguiente paso lógico en una tubería (pipeline) de CI es instalar las dependencias del proyecto. Esto asegura que todas las librerías externas requeridas por tu aplicación estén disponibles antes de compilar o realizar pruebas.

Abre de nuevo .github/workflows/node-ci.yml y añade el paso para instalar las dependencias.

Añade las siguientes líneas al final de la sección steps (asegúrate de mantener la indentación):

- name: Install dependencies
  run: npm install

Tu archivo .github/workflows/node-ci.yml completo debería verse ahora así:

name: Node.js CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Install dependencies
        run: npm install

Explicación

• run: npm install: Esto ejecuta el comando npm install en el shell del runner. Lee el archivo package.json (que crearemos más adelante) e instala las dependencias listadas.

Añadir paso para ejecutar pruebas con run npm test

Después de instalar las dependencias, la parte más crítica de la Integración Continua (CI) es ejecutar las pruebas automatizadas. Esto asegura que los nuevos cambios no rompan la funcionalidad existente.

Abre .github/workflows/node-ci.yml y añade el paso para ejecutar las pruebas.

Añade las siguientes líneas al final de la sección steps:

- name: Run tests
  run: npm test

Tu archivo .github/workflows/node-ci.yml final debería verse así:

name: Node.js CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Install dependencies
        run: npm install
      - name: Run tests
        run: npm test

Explicación

• run: npm test: Esto ejecuta el script de pruebas definido en tu package.json. Si las pruebas fallan (salen con un código distinto de cero), el flujo de GitHub Action se marcará como fallido.

Crear un archivo package.json y un archivo de prueba simple

Para que el flujo de trabajo que acabamos de crear funcione realmente, necesitamos una estructura de proyecto Node.js. Específicamente, npm install necesita un archivo package.json, y npm test necesita un script de prueba definido.

1. Asegúrate de estar en el directorio del repositorio:

cd ~/project/github-actions-demo

2. Crea un archivo package.json en la raíz del repositorio:

touch package.json

3. Abre package.json y añade el siguiente contenido. Esto define un proyecto básico y un script de prueba simple que siempre pasa (sale con código 0).

{
  "name": "github-actions-demo",
  "version": "1.0.0",
  "description": "Demo project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Running tests...\" && exit 0"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4. A continuación, actualicemos index.js para representar el código de nuestra aplicación.

echo "console.log('Hello, GitHub Actions!');" > index.js

Ahora tienes un proyecto Node.js mínimo que cumple con los requisitos del flujo de trabajo que definimos:

1. npm install se ejecutará (aunque no haya dependencias, verificará package.json).
2. npm test ejecutará el comando echo "Running tests..." && exit 0.

Confirmar, subir y verificar la compilación/prueba en la ejecución del flujo de trabajo

Ahora que hemos creado la definición del flujo de trabajo (workflow definition) y los archivos del proyecto, necesitamos confirmarlos (commit) y enviarlos (push) a GitHub. Al enviar estos commits, se activará el ejecutor de Action (Action runner) para que ejecute los pasos que definimos.

1. Asegúrate de estar en el directorio del repositorio:

cd ~/project/github-actions-demo

2. Verifica el estado de tu repositorio:

git status

3. Añade todos los archivos al área de preparación (staging area):

git add .

4. Confirma los cambios con un mensaje descriptivo:

git commit -m "Add Node.js CI workflow and project files"

5. Envía los cambios al repositorio remoto en GitHub:

git push

Nota sobre la autenticación:
Cuando ejecutes git push, el WebIDE te pedirá automáticamente que te autentiques. Sigue estos pasos detallados:

1. Aparecerá una ventana emergente con el mensaje: "The extension 'GitHub' wants to sign in using GitHub." Haz clic en Allow.
2. Aparecerá una nueva notificación. Haz clic en "Copy&Continue to GitHub", y luego haz clic en "Open" en el siguiente aviso.
3. Inicia sesión en tu cuenta de GitHub en la ventana del navegador que se abre e introduce el código de autorización que se copió. Después de confirmar la autorización, la página se cerrará automáticamente.
4. Espera unos segundos y verás que la terminal completa la operación de envío (push) con éxito.

Nota de privacidad: El WebIDE solicitará acceso completo a tu cuenta de GitHub con fines de autenticación. No tienes que preocuparte por problemas de privacidad: la VM de LabEx se destruirá inmediatamente después de completar el laboratorio actual, y tus credenciales e información de autorización no se conservarán.

Verificar la ejecución del flujo de trabajo

1. Visita tu repositorio en GitHub en un navegador web: https://github.com/your-username/github-actions-demo
2. Haz clic en la pestaña Actions en la parte superior de la página del repositorio.
3. Deberías ver una ejecución de flujo de trabajo listada, probablemente llamada "Add Node.js CI workflow and project files" o "Node.js CI".

Nota: Cuando envías código, se pueden activar múltiples Actions si tienes varios archivos de flujo de trabajo en tu repositorio. Por favor, identifica la ejecución correcta del flujo de trabajo revisando el nombre del flujo de trabajo en la barra lateral izquierda o utilizando la lista de ejecuciones del flujo de trabajo en el lado derecho.

4. Haz clic en el título de la ejecución del flujo de trabajo y luego haz clic en el trabajo build para ver los registros detallados.

Puedes expandir cada paso para ver lo que sucedió:

• Checkout code: Muestra que el repositorio fue extraído (checked out).
• Use Node.js: Muestra que se instaló Node.js v20.
• Install dependencies: Muestra que se ejecutó npm install.
• Run tests: Muestra que se ejecutó npm test y deberías ver la salida Running tests....

Si todos los pasos se completaron con éxito, tu flujo de trabajo de CI está funcionando correctamente.

Resumen

En este laboratorio, ha creado con éxito un flujo de trabajo básico de Integración Continua (CI) utilizando GitHub Actions. Aprendió a:

1. Crear un archivo de flujo de trabajo .yml en el directorio .github/workflows.
2. Configurar el flujo de trabajo para que se active con los eventos push.
3. Utilizar la acción actions/setup-node para configurar el entorno Node.js.
4. Añadir pasos para instalar dependencias (npm install) y ejecutar pruebas (npm test).
5. Configurar una estructura de proyecto Node.js básica para soportar el flujo de trabajo.

Estas habilidades forman la base de las prácticas modernas de DevOps, permitiéndole automatizar la verificación de su código cada vez que realiza un cambio.