Integración continua con Github Actions workflow para este Proyecto

mar, 9 may 2023

Cada un proyecto es un mundo y sus prioridades también lo son, pero lo que tienen en común es que todos necesitan ser desplegados y probados. Esta parte siempre se puede hacer de forma manual, pero acaba siendo algo repetitivo y tedioso. Por eso es conveniente automatizarlo, y para eso existen las herramientas de integración continua y despliegue continuo.

En este caso vamos a usar las Github Actions para automatizar el despliegue de este proyecto en Vercel, pero también hacer una serie de tareas previas como son los testing, el formateo del código y la generación de la documentación.

Diseño

Lo que más tiempo puede llevar es, planificar como va ser tu pipeline, osea que tareas vas a ejecutar y en que orden. En mi caso me puse a dibujar en escalidraw como podría ser mi flujo de tareas y tras varios intentos uno fue el que más me convenció. Una vez tienes esta parte mas o menos pensada lo que tienes que hacer es ir a tu proyecto y crear una carpeta en la siguiente ruta .github/workflows una vez dentro puedes crear el archivo con el nombre que desees con el formato .yml en mi caso tengo dos pre-deploy.yml y post-deploy.yml, aquí no voy a entrar en detalle de como funciona el formato .yml, pero si que voy a explicar que hace cada uno de los jobs que tengo en cada uno de los workflows.

Primero ejecuto los jobs de cancel redundacy, code checking, testing y documentation en paralelo y si todo va bien, versionado y despliegue en pre-producción. Después de ver que todo fue bien y se desplegó correctamente en pre-producción, hago mis pruebas manuales sobre el featuring desarrollado o sobre el bugfixing y tras revisar que todo esta correctamente y no hay ningún problema, puedo tomar la decisión de desplegar o no en producción. Para ello solo sería necesario crear una pull request para mergear la rama de develop en master y mergearla pero, en mi workflow no acaban aquí los jobs. Después de todo esto y una vez mergeado en producción se ejecuta un último test de performance usando lighthouse y generando un reporte pagina por pagina que publico una vez el job ha finalizado.

Aquí se puede ver de una forma más gráfica:

Este es un fragmento del aspecto que tiene mi workflow de pre-deploy:

pre-deploy.yml

name: Workflow Pre-Deploy
on:
    push:
        branches: [dev]
jobs:
    cancel_redundancy:
        name: Cancel Redundant Workflow Runs
        runs-on: ubuntu-latest
        steps:
            - name: Cancel previous redundant workflow runs
              uses: styfle/cancel-workflow-action@0.11.0
              with:
                  access_token: ${{ secrets.TOKEN_GITHUB }}
    code_checking:
        name: Linting
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v3
            - uses: actions/setup-node@v3
              with:
                  node-version: 18
                  cache: yarn
            - name: Install dependencies
              run: |
                  echo "//npm.pkg.github.com/:_authToken=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc
                  echo "@xabierlameiro:registry=https://npm.pkg.github.com/" >> ~/.npmrc
                  yarn install --frozen-lockfile
            - name: Linter
              run: yarn run lint

Workflow completo en mi github

Resultados

Cada uno de estos reportes dispone de su propio repositorio en github y es ahí donde se publican los resultados de cada uno de los test.

Aquí puedo ver el resultado de mis jobs cada vez que hago cambios en mi proyecto:

Conclusiones

Cada vez que desarrollo un nuevo componente en React, o creo una página nueva con Nextjs tengo la seguridad de que una batería de pruebas comprueba a fondo que lo que he añadido a mi proyecto no ha roto nada del trabajo anterior. Esto es así en parte, ya que tu eres el que tiene que crear los test en las partes más delicadas y criticas de tu aplicativo.

Puedes encontrar todo este código en mi repositorio de github y si te ha gustado este contenido puedes ayudarme con una ⭐️ ¡ Gracias !