Automatiza 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 Vue.js.

También debes tener:

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

Descripción general

En esta sección, configurarás un pipeline de CI/CD utilizando GitHub Actions para hacer lo siguiente de forma automática:

Compilar tu aplicación Vue.js dentro de un contenedor Docker.
Ejecutar pruebas en un entorno coherente.
Subir la imagen lista para producción a Docker Hub.

Conecta 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: Generar credenciales de Docker Hub y establecer secretos en GitHub

Crea un Token de Acceso Personal (PAT) desde Docker Hub
1. Ve a tu cuenta de Docker Hub → Account Settings → Security.
2. Genera un nuevo Access Token con permisos de Read/Write (Lectura/Escritura).
3. Nómbralo algo como docker-vuejs-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.
2. Para el nombre del repositorio, usa algo descriptivo; por ejemplo: vuejs-sample.
3. Once created, copia y guarda el nombre del repositorio; lo necesitarás en el Paso 4.
Crea un nuevo repositorio de GitHub para tu proyecto Vue.js

Añade las credenciales de Docker Hub como secretos del repositorio de GitHub

En tu repositorio de GitHub recién creado:

Navega a: Settings → Secrets and variables → Actions → New repository secret.
Añade los siguientes secretos:

Name	Value
`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.

Conecta tu proyecto local a GitHub
Vincula tu proyecto local docker-vuejs-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 nombre de 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á correctamente vinculado y listo para subir tu código fuente a GitHub.
Sube tu código fuente a GitHub
Sigue estos pasos para confirmar (commit) y subir (push) 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 los cambios preparados con un mensaje descriptivo.
  $ git commit -m "Initial commit"
  Este comando crea una confirmación que guarda una captura 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.

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 cambios (nuevos, modificados, eliminados) para la confirmación
Git commit – Guarda una captura de tus cambios preparados
Git push – Sube confirmaciones locales a tu repositorio de GitHub
Git remote – Visualiza y gestiona las URLs de los repositorios remotos

Paso 2: Configurar el flujo de trabajo

Ahora crearás un flujo de trabajo de GitHub Actions que compilará tu imagen de Docker, ejecutará las pruebas y subirá la imagen a Docker Hub.

Ve a tu repositorio en GitHub y selecciona la pestaña Actions en el menú superior.
Selecciona Set up a workflow yourself (Configurar un flujo de trabajo por ti mismo) cuando se te solicite.
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
Añade la siguiente configuración de flujo de trabajo al nuevo archivo:

name: CI/CD – Vue.js App with Docker

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

jobs:
  build-test-deploy:
    name: Build, Test & Deploy
    runs-on: ubuntu-latest

    steps:
      # 1. Obtener el código fuente
      - name: Checkout Code
        uses: actions/checkout@v6
        with:
          fetch-depth: 0

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

      # 3. Almacenar en caché las capas de Docker
      - 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. Almacenar en caché las dependencias de npm
      - 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. Generar metadatos de compilación
      - name: Generate Build Metadata
        id: meta
        run: |
          echo "REPO_NAME=${GITHUB_REPOSITORY##*/}" >> "$GITHUB_OUTPUT"
          echo "SHORT_SHA=${GITHUB_SHA::7}" >> "$GITHUB_OUTPUT"

      # 6. Compilar la imagen Docker para pruebas
      - name: Build Dev Docker Image
        uses: docker/build-push-action@v7
        with:
          context: .
          file: Dockerfile.dev
          tags: ${{ steps.meta.outputs.REPO_NAME }}-dev:latest
          load: true
          cache-from: type=local,src=/tmp/.buildx-cache
          cache-to: type=local,dest=/tmp/.buildx-cache,mode=max

      # 7. Ejecutar pruebas unitarias dentro del contenedor
      - name: Run Vue.js Tests
        run: |
          docker run --rm \
            --workdir /app \
            --entrypoint "" \
            ${{ steps.meta.outputs.REPO_NAME }}-dev:latest \
            sh -c "npm ci && npm run test -- --ci --runInBand"
        env:
          CI: true
          NODE_ENV: test
        timeout-minutes: 10

      # 8. Iniciar sesión en Docker Hub
      - name: Docker Hub Login
        uses: docker/login-action@v4
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      # 9. Compilar y subir la imagen de producción
      - 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 Vue.js:

Se activa en cada push o pull request que tenga como objetivo la rama main.
Compila una imagen Docker de desarrollo utilizando Dockerfile.dev, optimizada para pruebas.
Ejecuta pruebas unitarias utilizando Vitest dentro de un entorno contenedorizado limpio para garantizar la coherencia.
Detiene el flujo de trabajo inmediatamente si alguna prueba falla, garantizando la 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 tanto con la etiqueta latest como con etiquetas de SHA corto para facilitar la 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 añadir el 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.
- Este push activará automáticamente el pipeline de GitHub Actions.
Supervisa la ejecución del flujo de trabajo
- Ve a la pestaña Actions en tu repositorio de GitHub.
- 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 o despliegues rápidos.
    - <short-sha>: un identificador único basado en el hash de confirmación, útil para el seguimiento de versiones, reversiones y trazabilidad.

Tip
Para mantener la calidad del código y evitar pushes directos accidentales, habilita reglas de protección de ramas:
Navega a tu repositorio de GitHub → Settings → Branches.
En Branch protection rules, haz clic en Add rule.
Especifica main as the branch name.
Habilita 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 un pipeline completo de CI/CD para tu aplicación Vue.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 añadiste a GitHub como secreto.
Definiste un flujo de trabajo de GitHub Actions que:
- Compila tu aplicación dentro de un contenedor Docker.
- Ejecuta pruebas en un entorno contenedorizado coherente.
- Sube 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ó con éxito en Docker Hub.

Con esta configuración, tu aplicación Vue.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 sobre automatización y mejores prácticas para aplicaciones contenedorizadas:

Introducción a GitHub Actions – Aprende cómo GitHub Actions automatiza tus flujos de trabajo
Compilaciones de Docker con GitHub Actions – 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

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

Probar tu despliegue de Vue.js »

¿En qué te puedo ayudar?

Automatiza tus compilaciones con GitHub Actions

Requisitos previos

Descripción general

Conecta tu repositorio de GitHub a Docker Hub

Paso 1: Generar credenciales de Docker Hub y establecer secretos en GitHub

Paso 2: Configurar el flujo de trabajo

Paso 3: Ejecutar el flujo de trabajo

Resumen

Recursos relacionados

Siguientes pasos