GitHub Actions: Subida de Artefactos de Compilación

Introducción

En un pipeline de Integración Continua (CI), un trabajo a menudo produce archivos (como binarios compilados, bundles de webpack o informes de pruebas) que deseas conservar o compartir con otros trabajos. Estos archivos se denominan artefactos (artifacts).

Por defecto, los archivos creados durante la ejecución de un workflow se pierden cuando esta finaliza. Para persistirlos, necesitas "subirlos" como artefactos.

En este laboratorio, modificarás tu workflow de Node.js para simular un proceso de compilación que crea un directorio dist, y luego usarás la acción actions/upload-artifact para guardar ese directorio.

Este laboratorio se basa en el repositorio que creaste en los laboratorios anteriores. Trabajarás con el repositorio github-actions-demo.

Actualizar el flujo de trabajo para generar un archivo de compilación (build file)

En este paso, modificarás el archivo de flujo de trabajo (workflow file) para simular un proceso de compilación (build process). Añadirás un paso que crea un directorio dist y un archivo de artefacto simulado (dummy artifact file).

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 por defecto 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

Salida de Ejemplo:

Cloning into 'github-actions-demo'...
remote: Enumerating objects: X, done.
remote: Counting objects: 100% (X/X), done.
remote: Total X (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (X/X), done.

5. Navega dentro del repositorio clonado:

cd ~/project/github-actions-demo

3. Crea un nuevo archivo de flujo de trabajo .github/workflows/upload-artifacts.yml usando el editor WebIDE. Puedes encontrar el archivo en el explorador de archivos a la izquierda, bajo project/github-actions-demo/.github/workflows/.

4. Comienza creando la estructura básica del flujo de trabajo. Añade el nombre del flujo de trabajo y el disparador (trigger):

name: Upload Artifacts

on: [push]

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

jobs:
  build:
    runs-on: ubuntu-latest

6. Añade la sección de pasos (steps). Primero, añade el paso de checkout:

steps:
  - uses: actions/checkout@v4

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

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

8. Añade el paso para instalar dependencias:

- name: Install dependencies
  run: npm install

9. Añade el paso de compilación que crea el directorio dist y un archivo dentro de él:

- name: Build project
  run: |
    mkdir dist
    echo "This is the build artifact" > dist/build.txt

10. Añade el paso de prueba:

- name: Run tests
  run: npm test

Tu archivo completo debería verse ahora así:

name: Upload Artifacts

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: Build project
        run: |
          mkdir dist
          echo "This is the build artifact" > dist/build.txt
      - name: Run tests
        run: npm test

Explicación

• mkdir dist: Crea un directorio llamado dist.
• echo ... > dist/build.txt: Crea un archivo de texto simple dentro de dist para simular un recurso compilado (asset).

Guarda el archivo (Ctrl+S o Cmd+S) después de realizar los cambios.

Usar actions/upload-artifact@v4 para subir el directorio dist

Ahora que hemos producido algunos archivos, necesitamos subirlos. Utilizaremos la acción oficial actions/upload-artifact.

1. En .github/workflows/upload-artifacts.yml, añade un nuevo paso al final del trabajo (job):

- name: Upload build artifact
  uses: actions/upload-artifact@v4
  with:
    name: build-assets
    path: dist

2. Tu archivo completo debería verse similar a esto:

name: Upload Artifacts

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: Build project
        run: |
          mkdir dist
          echo "This is the build artifact" > dist/build.txt
      - name: Run tests
        run: npm test
      - name: Upload build artifact
        uses: actions/upload-artifact@v4
        with:
          name: build-assets
          path: dist

Explicación

• uses: actions/upload-artifact@v4: Llama a la acción para manejar la subida.
• name: build-assets: El nombre del artefacto tal como aparecerá en la interfaz de usuario de GitHub.
• path: dist: El directorio (o archivo) a subir.

Guarda el archivo (Ctrl+S o Cmd+S).

Confirmar, subir (push) y verificar el artefacto en la interfaz de usuario de GitHub

En este paso, confirmarás (commit) los cambios y los subirás (push) a GitHub. Esto activará el flujo de trabajo (workflow) que acabas de actualizar.

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

cd ~/project/github-actions-demo

2. Prepara los cambios (Stage the changes):

git add .

3. Confirma los cambios:

git commit -m "Add build step and upload artifacts"

4. Sube 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 la siguiente solicitud.
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 subida 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.

Este proceso de autenticación no requiere la configuración manual de nombre de usuario o Personal Access Token.

Verificar en GitHub

1. Visita tu repositorio en GitHub en un navegador web.
2. Haz clic en la pestaña Actions.
3. Haz clic en la ejecución del flujo de trabajo más reciente (por ejemplo, "Add build step and upload artifacts").
4. Desplázate hasta la parte inferior de la página de resumen. Deberías ver una sección titulada Artifacts.
5. Deberías ver un artefacto llamado build-assets.
6. Haz clic en él para descargarlo. Será un archivo zip que contiene build.txt.

Resumen

En este laboratorio, aprendiste a persistir datos de una ejecución de workflow utilizando artefactos. Tú:

1. Creaste un paso de "compilación" (build) que generó archivos de salida.
2. Usaste actions/upload-artifact para guardar el directorio dist.
3. Verificaste que el artefacto estaba disponible para su descarga en la UI de GitHub.

Los artefactos son esenciales para compartir archivos entre trabajos (jobs) (por ejemplo, de un trabajo de compilación a un trabajo de despliegue) o para depurar fallos subiendo registros (logs).