egc.us.es

EGC 2026/2027

Reto de CI/CD

En este reto vas a poner en práctica conceptos de integración, entrega y despliegue continuos utilizando un repositorio que permite construir una web muy simple, que es un catálogo de modelos UVL, a partir de un archivo .csv.

Catalogo_UVL

Qué necesitas antes de empezar

  • Una cuenta de GitHub.
  • Una cuenta gratuita de Netlify.
  • Python 3.10 o posterior para el despliegue manual de la primera tarea.
  • Un navegador web y conexión a Internet.

Comprobar Python: python3 --version

Debe aparecer una versión 3.10 o posterior.

Crear tu fork y habilitar GitHub Actions

Crear el fork

  1. Abre el repositorio minireto-01-uvl-cicd.
  2. Pulsa Fork en la parte superior derecha para crear una copia del repositorio.
  3. Mantén el nombre propuesto o añade tu identificador si así lo ha indicado el profesorado.
  4. Pulsa Create fork y espera a que GitHub cree tu copia.
  5. Comprueba que el nombre del propietario que aparece arriba es tu usuario de GitHub.

Habilitar GitHub Actions

  1. En tu fork, entra en la pestaña Actions.
  2. Si GitHub muestra un aviso indicando que los workflows están deshabilitados en el fork, pulsa el botón para habilitarlos.
  3. Vuelve a la pestaña Code.

Tarea 1: integración continua

Crear un workflow muy sencillo que valida el catálogo y ejecuta las pruebas (el workflow no construye ni despliega la web).

  1. Abre workflow-templates/01-ci.yml.
  2. Pulsa el botón que permite ver o copiar el contenido del archivo y copia todo el YAML.
  3. Vuelve a la raíz del repositorio.
  4. Pulsa Add file y después Create new file.
  5. Como nombre escribe exactamente .github/workflows/pipeline.yml
  6. Pega el contenido de la plantilla.
  7. En el cuadro de confirmación escribe un mensaje como Activa la integración continua.
  8. Confirma el cambio directamente sobre main.

GitHub Actions solo interpreta como workflows los archivos YAML situados dentro de .github/workflows/. Las plantillas están fuera para que ninguna se ejecute antes de que tú la actives.

Comprobar la primera ejecución

  1. Entra en Actions.
  2. Abre la ejecución que acaba de comenzar.
  3. Espera a que termine y abre el trabajo test.
  4. Comprueba que validate.py y pytest han terminado correctamente.

La pipeline parte de una copia limpia del repositorio, instala pytest, valida los datos y ejecuta las pruebas. Esto permite detectar problemas que podrían pasar desapercibidos en una máquina concreta.

Introducir deliberadamente un error

El archivo models/smartphone.uvl ya existe. Añadirás sus metadatos al catálogo, pero dejarás el autor vacío. 21. Abre catalog.csv. 22. Pulsa el icono del lápiz para editarlo. 23. Añade al final la siguiente línea:

smartphone,Smartphone,,A configurable smartphone,smartphone.uvl
  1. Confirma el cambio con el mensaje Añade un modelo sin autor.
  2. Abre Actions y entra en la nueva ejecución.
  3. Observa el paso que falla y abre su log.

El mensaje esperado es parecido a: Línea 4: falta el campo author

El fallo es útil: la pipeline ha impedido que un cambio incompleto pase desapercibido. CI ofrece retroalimentación rápida, pero no corrige automáticamente la decisión humana.

Corregir el cambio

  1. Vuelve a catalog.csv y edítalo.
  2. Completa el autor, por ejemplo EGC Student.
smartphone,Smartphone,EGC Student,A configurable smartphone,smartphone.uvl
  1. Confirma el cambio con el mensaje Corrige la autoría del modelo.
  2. Comprueba en Actions que la nueva ejecución termina en verde.

Construir y desplegar manualmente

CI ha validado el cambio, pero la web todavía no se ha construido ni publicado.

  1. En la pestaña Code pulsa Code y Download ZIP.
  2. Descomprime el archivo en tu equipo y entra en la carpeta.
  3. Abre una terminal en esa carpeta y ejecuta: python3 build.py
  4. Comprueba que se ha creado site/index.html.
  5. Abre index.html en el navegador para comprobar el resultado.
  6. En Netlify, inicia sesión y abre la zona de despliegue mediante arrastrar y soltar.
  7. Arrastra la carpeta site completa. No arrastres la raíz del repositorio.
  8. Abre la URL terminada en netlify.app y comprueba que aparece el catálogo.

En este punto la validación es automática, pero la construcción y el despliegue son manuales.

Tarea 2: entrega continua

Ahora la pipeline también construirá la web y conservará la carpeta site como artefacto descargable. El despliegue seguirá siendo manual.

Sustituir el workflow

  1. Abre workflow-templates/02-delivery.yml y copia todo su contenido.
  2. Abre .github/workflows/pipeline.yml.
  3. Pulsa el lápiz, sustituye el contenido completo y confirma el cambio con el mensaje: Añade la construcción del artefacto.

Provocar una nueva ejecución

  1. Edita la descripción de uno de los modelos en catalog.csv.
  2. Confirma el cambio.
  3. Entra en Actions y espera a que la ejecución finalice correctamente.

Descargar el artefacto

  1. Abre el resumen de la ejecución terminada.
  2. Busca la sección Artifacts.
  3. Pulsa uvl-catalog-site para descargar el ZIP.
  4. Descomprime el archivo y comprueba que contiene index.html y style.css.
  5. Abre index.html localmente.

Un artefacto es una salida producida por el proceso de construcción. Permanece disponible después de que termine el job y puede descargarse sin reconstruir el proyecto en cada máquina.

Desplegar el artefacto manualmente

  1. Abre en Netlify el proyecto creado en la tarea anterior.
  2. Entra en Deploys.
  3. Arrastra la carpeta descomprimida que contiene index.html y style.css a la zona de despliegue.
  4. Abre la URL pública y comprueba el cambio.

Ahora la pipeline valida y construye. Pero todavía hemos tenido que realizar manualmente el despliegue para llevar el artefacto a Netlify.

Tarea 3: despliegue continuo

El último workflow construye la web y la envía automáticamente a Netlify. Para que GitHub Actions pueda actuar en tu nombre debes guardar dos credenciales como secretos del repositorio.

Obtener el identificador del proyecto de Netlify

  1. Abre tu proyecto en Netlify.
  2. Entra en Project configuration.
  3. Busca el Project ID, también denominado Site ID en algunas pantallas o herramientas.
  4. Copia el valor y guárdalo temporalmente.

Crear un token personal de Netlify

  1. Abre los ajustes de tu usuario de Netlify.
  2. Entra en Applications o Personal access tokens.
  3. Crea un token nuevo con un nombre reconocible, por ejemplo EGC GitHub Actions.
  4. Copia el token en ese momento. Netlify puede no volver a mostrarlo completo.

El token es una credencial. No debe escribirse en un archivo del repositorio, ni en catalog.csv, ni en el propio workflow o en una captura pública.

Guardar los secretos en GitHub

  1. Abre tu fork en GitHub y entra en Settings.
  2. En el menú lateral entra en Secrets and variables y después Actions.
  3. Pulsa New repository secret.
  4. Crea NETLIFY_SITE_ID con el Project ID de Netlify.
  5. Crea NETLIFY_AUTH_TOKEN con el token personal.

Activar el despliegue automático

  1. Copia workflow-templates/03-deploy.yml.
  2. Sustituye con él el contenido de .github/workflows/pipeline.yml.
  3. Confirma el cambio con el mensaje Añade el despliegue continuo.
  4. Entra en Actions y espera a que termine la ejecución.

La pipeline ejecuta ahora esta secuencia:

cambio -> validar -> probar -> construir site/ -> desplegar en Netlify

Comprobar el resultado extremo a extremo

  1. Edita otra descripción en catalog.csv y confirma el cambio.
  2. Observa la ejecución completa en Actions.
  3. Abre tu URL de Netlify y actualiza la página.
  4. Comprueba que el cambio aparece sin descargar ni subir ningún archivo manualmente.