# Automatiza tus compilaciones con GitHub Actions


## Requisitos previos

Completa todas las secciones anteriores de esta guía, comenzando con [Contenedorizar una aplicación Vue.js](/guides/vuejs/configure-github-actions/containerize/).

También debes tener:
- Una cuenta de [GitHub](https://github.com/signup).
- Una cuenta verificada de [Docker Hub](https://hub.docker.com/signup).

---

## Descripción general

En esta sección, configurarás un pipeline de CI/CD utilizando [GitHub Actions](https://docs.github.com/en/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](https://hub.docker.com).

---

## 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

1. Crea un Token de Acceso Personal (PAT) desde [Docker Hub](https://hub.docker.com)
   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.

2. Crea un repositorio en [Docker Hub](https://hub.docker.com/repositories/)
   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.

3. Crea un nuevo [repositorio de GitHub](https://github.com/new) para tu proyecto Vue.js

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

   En tu repositorio de GitHub recién creado:
   
   1. Navega a:
   **Settings → Secrets and variables → Actions → New repository secret**.

   2. 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.

5. 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:

   ```console
   $ 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:

   ```console
   $ git remote -v
   ```

   Deberías ver una salida similar a:

   ```console
   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.

6. 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.

      ```console
      $ 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.

      ```console
      $ 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`.

      ```console
      $ 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](https://git-scm.com/docs/git-add) – Prepara cambios (nuevos, modificados, eliminados) para la confirmación
> - [Git commit](https://git-scm.com/docs/git-commit) – Guarda una captura de tus cambios preparados
> - [Git push](https://git-scm.com/docs/git-push) – Sube confirmaciones locales a tu repositorio de GitHub
> - [Git remote](https://git-scm.com/docs/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.

1. Ve a tu repositorio en GitHub y selecciona la pestaña **Actions** en el menú superior.

2. 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`

   
3. Añade la siguiente configuración de flujo de trabajo al nuevo archivo:

```yaml
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](https://github.com/docker/build-push-action/blob/master/README.md).

---

### 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.

1. 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.

2. 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**.

3. 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](https://hub.docker.com/repositories).
   - 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] Protege tu rama main
> 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](/guides/gha/) – Aprende cómo GitHub Actions automatiza tus flujos de trabajo
- [Compilaciones de Docker con GitHub Actions](/build/ci/github-actions/) – Configura compilaciones de contenedores con GitHub Actions
- [Sintaxis de flujo de trabajo para GitHub Actions](https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions) – Referencia completa para escribir flujos de trabajo de GitHub
- [Referencia del archivo Compose](/compose/compose-file/) – Referencia de configuración completa para `compose.yaml`
- [Mejores prácticas para escribir Dockerfiles](/develop/develop-images/dockerfile_best-practices/) – Optimiza tu imagen para rendimiento y seguridad

---

## Siguientes pasos

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.