EmilianoDecember 28, 2024

Cómo Usar GitHub Actions para CI/CD y Desplegar en GitHub Pages

En este post exploraremos cómo configurar un flujo de trabajo de CI/CD utilizando GitHub Actions para un proyecto de Vue.js, asegurando que el despliegue en GitHub Pages solo se realice cuando las pruebas unitarias sean exitosas.
Esto es especialmente útil para mantener la calidad del código y automatizar tareas repetitivas como correr tests, construir el proyecto y desplegar.

¿Por qué usar CI/CD?

Integrar CI/CD permite automatizar las verificaciones de calidad del código (como las pruebas unitarias), asegurarse de que solo se despliegue código funcional y reducir los errores manuales al automatizar el proceso de despliegue.
De esta manera, cada vez que se realice un cambio en el código, se verificará automáticamente si todo está funcionando correctamente antes de que se realice un despliegue a producción.
En este flujo de trabajo, configuraremos GitHub Actions para realizar las siguientes acciones:

  1. Instalar dependencias y ejecutar pruebas unitarias (npm run test:unit).
  2. Construir el proyecto (npm run build) solo si las pruebas pasan.
  3. Desplegar en GitHub Pages automáticamente desde la rama main.

Configuración del workflow

El archivo de configuración del flujo de trabajo (pipeline) en GitHub Actions se ve así:

.github/workflows/deploy.yml

name: CI/CD Pipeline for Vue.js

on:
  push:
    branches:
      - main  

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:

    - name: Checkout code
      uses: actions/checkout@v3

    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 16

    - name: Install dependencies
      run: npm install

    - name: Run unit tests
      run: npm run test:unit

    - name: Build Vue.js project
      run: npm run build

    - name: Deploy to GitHub Pages
      if: ${{ success() }}  # Desplegar solo si los tests pasan
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist

¿Cómo funciona?

Cuando se hace un push a la rama main, GitHub Actions comienza el proceso con varias etapas. Primero, instala las dependencias necesarias con npm install. Luego, ejecuta las pruebas unitarias del proyecto usando npm run test:unit. Si las pruebas pasan correctamente, se ejecuta la construcción del proyecto con npm run build, generando los archivos de producción en la carpeta dist. Si todo ha ido bien, el proyecto se despliega automáticamente en GitHub Pages.

Configuración de permisos

Es importante asegurarse de que GitHub Actions tenemos los permisos necesarios para realizar el despliegue. Para esto:

  1. Debemos ir a la configuración del repositorio en GitHub.
  2. Acceder a la sección Settings > Actions > General.
  3. En el apartado Workflow permissions, seleccionamos la opción Read and Write permissions y guardamos los cambios.

Esto permite que el token secrets.GITHUB_TOKEN usado en el workflow tenga acceso para realizar el push a la rama gh-pages. Si esto no se configura correctamente, podríamos recibir errores como 403 Forbidden al intentar hacer el despliegue.

Ejemplo práctico

Supongamos que tenemos un proyecto Vue.js con un componente llamado Counter.vue, que se ve así:

components/Counter.vue

<script setup lang="ts">
import { ref } from "vue";

const count = ref(0);

function increment() {
  count.value ++;
};
</script>

<template>
  <div>
    <button @click="increment">Increment</button>
    <p>{{ count }}</p>
  </div>
</template>

Para probar este componente, crearemos una prueba unitaria con @vue/test-utils :

__test__/components/Counter.test.ts

import { mount } from '@vue/test-utils';
import Counter from '@/components/Counter.vue';

describe('Counter.vue', () => {
  it('increments the count when button is clicked', async () => {
    const wrapper = mount(Counter);
    expect(wrapper.text()).toContain('0');
    await wrapper.find('button').trigger('click');
    expect(wrapper.text()).toContain('1');
  });
});

Este archivo de prueba se ejecutará durante el proceso de CI, y si alguna de las pruebas falla, el flujo de trabajo se detendrá antes de llegar al despliegue. Esto garantiza que solo se despliegue código que pase todas las pruebas.

Beneficios

Usar GitHub Actions para CI/CD y GitHub Pages ofrece múltiples ventajas. Principalmente, automatiza el proceso de verificación y despliegue de manera que siempre se haga de forma controlada y sin intervención manual. Esto mejora la calidad del proyecto y permite detectar errores rápidamente. Además, como el flujo está automatizado, no es necesario realizar pasos manuales, lo que ahorra tiempo y reduce el riesgo de cometer errores.

Other posts