Automatizar tus compilaciones con GitHub Actions

Tabla de contenidos

Requisitos previos

Completa todas las secciones anteriores de esta guía, comenzando con Contenedorizar una aplicación React.js.

También debes tener:

Una cuenta de GitHub.
Una cuenta verificada de Docker Hub.

Descripción general

En esta sección, configurarás una canalización de CI/CD (pipeline de CI/CD) usando GitHub Actions para:

Compilar tu aplicación React.js automáticamente dentro de un contenedor Docker.
Ejecutar pruebas en un entorno consistente.
Subir la imagen lista para producción a Docker Hub.

Conectar tu repositorio de GitHub a Docker Hub

Para permitir que GitHub Actions compile y suba imágenes de Docker, almacenarás de forma segura tus credenciales de Docker Hub en tu nuevo repositorio de GitHub.

Paso 1: Conectar tu repositorio de GitHub a Docker Hub

Crea un Token de Acceso Personal (PAT) desde Docker Hub
1. Ve a tu cuenta de Docker Hub → Account Settings (Configuración de la cuenta) → Security (Seguridad).
2. Genera un nuevo Token de Acceso con permisos de Read/Write (Lectura/Escritura).
3. Nómbralo con algo descriptivo como docker-reactjs-sample.
4. Copia y guarda el token; lo necesitarás en el Paso 4.
Crea un repositorio en Docker Hub
1. Ve a tu cuenta de Docker Hub → Create a repository (Crear un repositorio).
2. Para el nombre del repositorio (Repository Name), utiliza algo descriptivo, por ejemplo: reactjs-sample.
3. Una vez creado, copia y guarda el nombre del repositorio; lo necesitarás en el Paso 4.
Crea un nuevo repositorio de GitHub para tu proyecto de React.js.

Agrega las credenciales de Docker Hub como secretos del repositorio de GitHub

En tu repositorio de GitHub recién creado:

Navega a: Settings (Configuración) → Secrets and variables (Secretos y variables) → Actions (Acciones) → New repository secret (Nuevo secreto de repositorio).
Agrega los siguientes secretos:

Nombre	Valor
`DOCKER_USERNAME`	Tu nombre de usuario de Docker Hub
`DOCKERHUB_TOKEN`	Tu token de acceso de Docker Hub (creado en el Paso 1)
`DOCKERHUB_PROJECT_NAME`	Tu nombre de proyecto de Docker (creado en el Paso 2)

Estos secretos permiten que GitHub Actions se autentique de forma segura con Docker Hub durante los flujos de trabajo automatizados.

Conectar tu proyecto local a GitHub
Vincula tu proyecto local docker-reactjs-sample al repositorio de GitHub que acabas de crear ejecutando el siguiente comando desde la raíz de tu proyecto:
$ git remote set-url origin https://github.com/{your-username}/{your-repository-name}.git
Important
Reemplaza {your-username} y {your-repository} con tu usuario y nombre de repositorio reales de GitHub.
Para confirmar que tu proyecto local está correctamente conectado al repositorio remoto de GitHub, ejecuta:
$ git remote -v
Deberías ver una salida similar a:
origin https://github.com/{your-username}/{your-repository-name}.git (fetch) origin https://github.com/{your-username}/{your-repository-name}.git (push)
Esto confirma que tu repositorio local está vinculado correctamente y listo para subir tu código fuente a GitHub.
Sube tu código fuente a GitHub
Sigue estos pasos para confirmar y subir tu proyecto local a tu repositorio de GitHub:
1. Prepara todos los archivos para la confirmación.
  $ git add -A
  Este comando prepara todos los cambios —incluyendo archivos nuevos, modificados y eliminados— para la confirmación.
2. Confirma tus cambios.
  $ git commit -m "Initial commit"
  Este comando crea una confirmación que captura una instantánea de los cambios preparados con un mensaje descriptivo.
3. Sube el código a la rama main.
  $ git push -u origin main
  Este comando sube tus confirmaciones locales a la rama main del repositorio remoto de GitHub y establece la rama de seguimiento (upstream).
Una vez completado, tu código estará disponible en GitHub, y cualquier flujo de trabajo de GitHub Actions que hayas configurado se ejecutará automáticamente.

Note
Obtén más información sobre los comandos de Git utilizados en este paso:
Git add – Prepara los cambios (nuevos, modificados, eliminados) para la confirmación.
Git commit – Guarda una instantánea de tus cambios preparados.
Git push – Sube confirmaciones locales a tu repositorio de GitHub.
Git remote – Visualiza y gestiona las URL de los repositorios remotos.

Paso 2: Configurar el flujo de trabajo

Ahora crearás un flujo de trabajo de GitHub Actions que compile tu imagen de Docker, ejecute las pruebas y suba la imagen a Docker Hub.

Ve a tu repositorio en GitHub y selecciona la pestaña Actions (Acciones) en el menú superior.
Selecciona Set up a workflow yourself (Configurar un flujo de trabajo tú mismo) cuando se te indique.
Esto abre un editor en línea para crear un nuevo archivo de flujo de trabajo. Por defecto, se guardará en: .github/workflows/main.yml
Agrega la siguiente configuración de flujo de trabajo al nuevo archivo:

name: CI/CD – React.js Application with Docker

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
    types: [opened, synchronize, reopened]

jobs:
  build-test-push:
    name: Build, Test and Push Docker Image
    runs-on: ubuntu-latest

    steps:
      # 1. Checkout source code
      - name: Checkout source code
        uses: actions/checkout@v6
        with:
          fetch-depth: 0 # Fetches full history for better caching/context

      # 2. Set up Docker Buildx
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v4

      # 3. Cache Docker layers
      - name: Cache Docker layers
        uses: actions/cache@v5
        with:
          path: /tmp/.buildx-cache
          key: ${{ runner.os }}-buildx-${{ github.sha }}
          restore-keys: ${{ runner.os }}-buildx-

      # 4. Cache npm dependencies
      - name: Cache npm dependencies
        uses: actions/cache@v5
        with:
          path: ~/.npm
          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
          restore-keys: ${{ runner.os }}-npm-

      # 5. Extract metadata
      - name: Extract metadata
        id: meta
        run: |
          echo "REPO_NAME=${GITHUB_REPOSITORY##*/}" >> "$GITHUB_OUTPUT"
          echo "SHORT_SHA=${GITHUB_SHA::7}" >> "$GITHUB_OUTPUT"

      # 6. Build dev Docker image
      - name: Build Docker image for tests
        uses: docker/build-push-action@v7
        with:
          context: .
          file: Dockerfile.dev
          tags: ${{ steps.meta.outputs.REPO_NAME }}-dev:latest
          load: true # Load to local Docker daemon for testing
          cache-from: type=local,src=/tmp/.buildx-cache
          cache-to: type=local,dest=/tmp/.buildx-cache,mode=max

      # 7. Run Vitest tests
      - name: Run Vitest tests and generate report
        run: |
          docker run --rm \
            --workdir /app \
            --entrypoint "" \
            ${{ steps.meta.outputs.REPO_NAME }}-dev:latest \
            sh -c "npm ci && npx vitest run --reporter=verbose"
        env:
          CI: true
          NODE_ENV: test
        timeout-minutes: 10

      # 8. Login to Docker Hub
      - name: Log in to Docker Hub
        uses: docker/login-action@v4
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      # 9. Build and push prod image
      - name: Build and push production image
        uses: docker/build-push-action@v7
        with:
          context: .
          file: Dockerfile
          push: true
          platforms: linux/amd64,linux/arm64
          tags: |
            ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKERHUB_PROJECT_NAME }}:latest
            ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKERHUB_PROJECT_NAME }}:${{ steps.meta.outputs.SHORT_SHA }}
          cache-from: type=local,src=/tmp/.buildx-cache

Este flujo de trabajo realiza las siguientes tareas para tu aplicación React.js:

Se activa con cada push o pull request dirigido a la rama main.
Compila una imagen de Docker de desarrollo utilizando Dockerfile.dev, optimizada para pruebas.
Ejecuta pruebas unitarias utilizando Vitest dentro de un entorno limpio y contenedorizado para garantizar la coherencia.
Detiene el flujo de trabajo inmediatamente si alguna prueba falla, aplicando control de calidad del código.
Almacena en caché tanto las capas de compilación de Docker como las dependencias de npm para ejecuciones de CI más rápidas.
Se autentica de forma segura con Docker Hub utilizando secretos del repositorio de GitHub.
Compila una imagen lista para producción utilizando la etapa prod en el Dockerfile.
Etiqueta y sube la imagen final a Docker Hub con las etiquetas latest y el SHA corto del commit para trazabilidad.

Note
Para obtener más información sobre docker/build-push-action, consulta el README de GitHub Action.

Paso 3: Ejecutar el flujo de trabajo

Después de haber agregado tu archivo de flujo de trabajo, es hora de activar y observar el proceso de CI/CD en acción.

Confirma y sube tu archivo de flujo de trabajo
Selecciona "Commit changes..." (Confirmar cambios...) en el editor de GitHub.
- Esta subida activará automáticamente la canalización de GitHub Actions.
Monitorea la ejecución del flujo de trabajo
1. Ve a la pestaña Actions (Acciones) en tu repositorio de GitHub.
2. Haz clic en la ejecución del flujo de trabajo para seguir cada paso: build, test y (si tiene éxito) push.
Verifica la imagen de Docker en Docker Hub
- Después de una ejecución exitosa del flujo de trabajo, visita tus repositorios de Docker Hub.
- Deberías ver una nueva imagen en tu repositorio con:
  - Nombre del repositorio: ${your-repository-name}
  - Las etiquetas incluyen:
    - latest – representa la compilación exitosa más reciente; ideal para pruebas rápidas o despliegue.
    - <short-sha> – un identificador único basado en el hash del commit, útil para el seguimiento de versiones, reversiones y trazabilidad.

Tip
Para mantener la calidad del código y evitar subidas directas accidentales, activa las reglas de protección de ramas:
Navega a tu repositorio de GitHub → Settings (Configuración) → Branches (Ramas).
En las reglas de protección de ramas (Branch protection rules), haz clic en Add rule (Agregar regla).
Especifica main como el nombre de la rama.
Activa opciones como:
Require a pull request before merging (Requerir un pull request antes de fusionar).
Require status checks to pass before merging (Requerir que las comprobaciones de estado pasen antes de fusionar).
Esto garantiza que solo el código probado y revisado se fusione en la rama main.

Resumen

En esta sección, configuraste una canalización de CI/CD completa para tu aplicación React.js contenedorizada utilizando GitHub Actions.

Esto es lo que lograste:

Creaste un nuevo repositorio de GitHub específicamente para tu proyecto.
Generaste un token de acceso seguro de Docker Hub y lo agregaste a GitHub como secreto.
Definiste un flujo de trabajo de GitHub Actions para:
- Compilar tu aplicación dentro de un contenedor Docker.
- Ejecutar pruebas en un entorno consistente y contenedorizado.
- Subir una imagen lista para producción a Docker Hub si las pruebas pasan.
Activaste y verificaste la ejecución del flujo de trabajo a través de GitHub Actions.
Confirmaste que tu imagen se publicó correctamente en Docker Hub.

Con esta configuración, tu aplicación React.js ahora está lista para pruebas y despliegues automatizados en distintos entornos, lo que aumenta la confianza, la coherencia y la productividad del equipo.

Recursos relacionados

Profundiza tu comprensión de la automatización y las mejores prácticas para aplicaciones contenedorizadas:

Introducción a GitHub Actions – Aprende cómo GitHub Actions automatiza tus flujos de trabajo
GitHub Actions de Docker Build – Configura compilaciones de contenedores con GitHub Actions
Sintaxis de flujo de trabajo para GitHub Actions – Referencia completa para escribir flujos de trabajo de GitHub
Referencia del archivo Compose – Referencia de configuración completa para compose.yaml
Mejores prácticas para escribir Dockerfiles – Optimiza tu imagen para rendimiento y seguridad

Pasos siguientes

A continuación, aprende cómo probar y depurar localmente tus cargas de trabajo de React.js en Kubernetes antes de realizar el despliegue. Esto te ayuda a asegurarte de que tu aplicación se comporte como se espera en un entorno similar al de producción, reduciendo sorpresas durante el despliegue.

Prueba tu despliegue de React.js »

¿En qué te puedo ayudar?

Automatizar tus compilaciones con GitHub Actions