GitHub Actions Usando la Acción Checkout

Introducción

En este laboratorio, aprenderá a utilizar la acción actions/checkout, que es uno de los pasos más esenciales en cualquier flujo de trabajo (workflow) de GitHub Actions. Por defecto, un runner de GitHub Actions comienza en un directorio vacío. Para construir, probar o desplegar su código, primero debe hacer checkout (extraer) el repositorio en el espacio de trabajo del runner.

Creará un archivo de flujo de trabajo, lo configurará para extraer su código y luego verificará que los archivos sean accesibles listándolos en los registros (logs). Este proceso simula la configuración de una canalización (pipeline) estándar de Integración Continua (CI).

Este laboratorio se basa en el repositorio que creó en los laboratorios anteriores. Clonará el repositorio github-actions-demo y creará un nuevo flujo de trabajo que utilice la acción checkout.

Añadir un paso para usar actions/checkout@v4 en el flujo de trabajo

En este paso, clonarás el repositorio y crearás un flujo de trabajo (workflow) que utiliza la acción actions/checkout. Esta acción extrae (checks out) tu repositorio bajo $GITHUB_WORKSPACE, permitiendo que tu flujo de trabajo acceda a él.

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 de flujo de trabajo llamado ci.yml dentro del directorio .github/workflows:

touch .github/workflows/ci.yml

7. Abre .github/workflows/ci.yml en el editor WebIDE y añade el siguiente contenido. Esta configuración define un flujo de trabajo llamado "CI" que se ejecuta en cada evento push. Incluye un único trabajo (job) llamado build que se ejecuta en ubuntu-latest, con un paso para extraer el código.

name: CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

Esta línea uses: actions/checkout@v4 indica a GitHub Actions que descargue y ejecute la versión v4 de la acción oficial de checkout.

Añadir un paso para listar archivos con el comando run ls -la

En este paso, añadirás un segundo paso a tu flujo de trabajo (workflow) para verificar que la acción de checkout (extracción de código) recuperó tus archivos con éxito. Utilizarás un comando estándar de shell para listar los archivos en el directorio actual.

Abre .github/workflows/ci.yml y añade el siguiente paso a la lista de steps. Asegúrate de que la sangría (indentation) se alinee correctamente con el paso anterior.

- name: List files
  run: ls -la

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

name: CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: List files
        run: ls -la

La palabra clave run te permite ejecutar programas de línea de comandos. Aquí, ls -la listará todos los archivos, incluidos los ocultos, en la raíz del repositorio.

Crear un archivo de ejemplo llamado index.js en el repositorio

En este paso, crearás un archivo de ejemplo en tu repositorio. Este archivo servirá como prueba de que la acción actions/checkout está funcionando correctamente cuando lo veamos listado en los registros (logs) del flujo de trabajo (workflow).

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

cd ~/project/github-actions-demo

2. Crea un archivo JavaScript simple llamado index.js en la raíz de tu repositorio:

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

3. Puedes verificar la creación del archivo ejecutando:

ls -l index.js

Este archivo representa el código fuente de tu aplicación que la tubería (pipeline) de CI típicamente construiría o probaría.

Hacer commit y push del archivo de ejemplo y las actualizaciones del flujo de trabajo

En este paso, confirmarás (commit) tus cambios y los enviarás (push) a GitHub. Al enviar este commit, se activará el flujo de trabajo (workflow) que definimos debido a la configuración on: [push].

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

cd ~/project/github-actions-demo

2. Verifica el estado de tu repositorio para ver los archivos no rastreados (untracked files):

git status

Deberías ver .github/workflows/ci.yml y index.js como no rastreados.

3. Prepara todos los cambios (Stage all changes):

git add .

4. Confirma los cambios con un mensaje descriptivo:

git commit -m "Add CI workflow and index.js"

Salida de Ejemplo:

[main ... ] Add CI workflow and index.js
 2 files changed, 14 insertions(+), 0 deletions(-)
 create mode 100644 .github/workflows/ci.yml
 create mode 100644 index.js

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 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 envío (push) con éxito.

Nota de Privacidad: El WebIDE solicitará acceso completo a tu cuenta de GitHub para 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 del nombre de usuario o del Token de Acceso Personal (Personal Access Token).

Salida de Ejemplo:

Enumerating objects: 6, done.
Counting objects: 100% (6/6), done.
Delta compression using up to 4 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 512 bytes | 512.00 KiB/s, done.
Total 4 (delta 1), reused 0 (delta 0), pack-reused 0
To https://github.com/your-username/github-actions-demo.git
   1234567..abcdef1  main -> main

Este envío activa el flujo de trabajo en GitHub.

Comprobar la ejecución del flujo de trabajo para verificar la lista de archivos en los registros

Después de subir (push) tu código, el flujo de trabajo se activará automáticamente en GitHub. Puedes ver los registros de ejecución del flujo de trabajo para verificar que la acción checkout recuperó tus archivos con éxito.

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 CI workflow and index.js" o "CI".

Nota: Cuando subes código, se pueden activar múltiples Acciones (Actions) si tienes varios archivos de flujo de trabajo en tu repositorio. Por favor, identifica la ejecución correcta del flujo de trabajo verificando 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 (job) build.
5. Expande el paso List files para ver la salida.

Deberías ver la salida del comando ls -la, que incluye index.js y otros archivos de tu repositorio:

Run ls -la
  ls -la
  shell: /usr/bin/bash -e {0}
total XX
drwxr-xr-x  X runner ... .
drwxr-xr-x  X runner ... ..
drwxr-xr-x  X runner ... .git
drwxr-xr-x  X runner ... .github
-rw-r--r--  X runner ... index.js
...

Esto confirma que el paso actions/checkout extrajo (checked out) tu repositorio con éxito. Sin el paso de checkout, el comando ls -la solo mostraría un directorio vacío. Esto demuestra por qué la acción de checkout es esencial: hace que los archivos de tu repositorio estén disponibles para el ejecutor (runner) del flujo de trabajo.

Resumen

En este laboratorio, ha creado con éxito un flujo de trabajo de GitHub Actions que utiliza la acción actions/checkout. Ha aprendido a:

1. Configurar la estructura de directorios .github/workflows.
2. Definir un flujo de trabajo que se activa con los eventos de push.
3. Utilizar actions/checkout@v4 para clonar su repositorio en el runner.
4. Añadir un paso para verificar la presencia de archivos usando ls -la.

Este es el paso fundamental para casi todas las tuberías (pipelines) de CI/CD, lo que permite que los pasos subsiguientes compilen, prueben e implementen (deploy) el código de su aplicación.