¡Bienvenidos! En este artículo vamos a explorar cómo usar GitHub Actions para la integración continua y la implementación continua (CI/CD) en un proyecto de Nuxt.js 3.

¿Qué son las GitHub Actions?

GitHub Actions es una plataforma de CI/CD integrada en GitHub. Te permite automatizar tareas en tu repositorio, como la construcción y prueba de tu código, y la implementación de tu aplicación. Con GitHub Actions, puedes crear flujos de trabajo que se activan por eventos como la creación de solicitudes de extracción, la creación de etiquetas, o simplemente al realizar un commit en una rama determinada.

Preparación del entorno

Para usar GitHub Actions en tu proyecto de Nuxt.js 3, debes tener una cuenta de GitHub y un repositorio en GitHub. Si no tienes una cuenta, puedes registrarte gratuitamente en el sitio web de GitHub. Si aún no has creado un repositorio, puedes hacerlo desde la página de inicio de GitHub.

Además, debes tener Node.js y NPM instalados en tu computadora para poder ejecutar los comandos necesarios. Si aún no los tienes instalados, puedes descargar Node.js y NPM desde el sitio web oficial de Node.js.

Configuración de GitHub Actions

El primer paso para configurar GitHub Actions es crear un archivo de flujo de trabajo (workflow file) en tu repositorio. Para hacer esto, crea un archivo con el nombre main.yml en la carpeta .github/workflows/ en la raíz de tu repositorio.

Este archivo de flujo de trabajo define cómo GitHub Actions debe construir, probar y desplegar tu aplicación de Nuxt.js 3. Aquí hay un ejemplo de cómo se puede configurar un flujo de trabajo básico:

name: CI/CD

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3.7.0
        with:
          deploy_key: ${{ secrets.ACCESS_TOKEN }}
          publish_dir: ./dist

En este ejemplo, el flujo de trabajo se activa cuando se realiza un push en la rama main. El flujo de trabajo se ejecuta en una máquina virtual de Ubuntu, donde se realizan las siguientes acciones:

Se clona el repositorio en la máquina virtual.
Se instalan las dependencias de NPM.
Se construye el proyecto con el comando npm run build.
Se despliega la aplicación en GitHub Pages utilizando la acción peaceiris/actions-gh-pages.

Es importante tener en cuenta que debes reemplazar la ACCESS_TOKEN con tu propia clave de acceso personal de GitHub. Puedes crear una clave de acceso personal en la sección "Settings" de tu cuenta de GitHub. Luego, debes agregar esta clave como un secreto en tu repositorio, utilizando la sección "Settings" y la opción "Secrets". Despliegue de la aplicación

Una vez que hayas configurado GitHub Actions en tu repositorio, la aplicación se construirá y se desplegará automáticamente cada vez que se realice un push en la rama main.

Para acceder a la aplicación desplegada, ve a la página de GitHub Pages de tu repositorio. Si has configurado todo correctamente, deberías ver tu aplicación en línea.

Conclusión

GitHub Actions es una plataforma poderosa y fácil de usar para la integración continua y la implementación continua. En este artículo, hemos visto cómo configurar GitHub Actions para un proyecto de Nuxt.js 3 y cómo desplegar automáticamente la aplicación en GitHub Pages. Si aún no has utilizado GitHub Actions en tus proyectos, te recomiendo que lo pruebes y veas cómo puede automatizar tus flujos de trabajo y mejorar la calidad de tu código. ¡Buena suerte!