Guía rápida: CI/CD con GitHub Actions y Netlify para Ingenieros de Front-end

0
809

Índice

  1. Introducción
  2. Prerrequisitos
  3. Conceptos importantes
  4. Integración continua – GitHub actions
  5. Entrega continua – GitHub actions
  6. Despliegue continuo – Netlify
  7. Ejemplo practico I: siguiendo el flujo
  8. Ejemplo practico II: Sacar release
  9. Conclusión

1. Introducción

El objetivo principal de CI/CD es reducir el tiempo de comercialización que, de otro modo, solía llevar años debido a procesos rotos y una colaboración mínima entre el desarrollo y las operaciones.

A continuación verás una guía rápida y sencilla explicando algunos conceptos fundamentales que deberías de saber y además verlos en práctica, para ello vamos a utilizar los servicios de GitHub actions y Netlify.

2. Prerrequisitos

React app con TypeScript y las siguientes librerías:

  • Jest
  • esLint
  • Prettier

Para ello he creado un template base para que no tengas que complicarte creando todo desde cero:

<< react-template >>

3. Conceptos importantes

Integración continua (continuos integration en inglés o CI): consiste en hacer integraciones automáticas de un proyecto tan a menudo como sea posible. Los cambios del desarrollador se validan creando una compilación y ejecutando pruebas automatizadas contra la compilación. De este modo, se evitan los problemas de integración que pueden producirse cuando se espera al día de la publicación para fusionar los cambios en la rama de publicación.

La integración continua pone en gran énfasis en la automatización de las pruebas para comprobar que la aplicación no se rompe cada vez que se integran nuevos cambios en la rama principal.

Entrega continua (continuos delivery en inglés o CD): es una extensión de la integración continua, ya que despliega automáticamente todos los cambios de código en un entorno de pruebas y/o de producción después de la etapa de construcción.

Con esto queremos decir que, además de las pruebas automatizadas, tienes un proceso de lanzamiento automatizado y puedes desplegar tu aplicación en cualquier momento pulsando un botón.

Despliegue continuo (continuos deployment en inglés o CD): este va un paso más allá de la entrega continua. Con esta práctica, todos los cambios que superan todas las etapas de su canal de producción se liberan para sus clientes. No hay intervención humana, y solo una prueba fallida impedirá que un nuevo cambio se despliegue.

Como desarrolladores nos interesa estar más centrados en la creación de software, y ver nuestro trabajo lo antes posible después de haberlo terminado.

3.1. Esquema general CI/CD

3.2. ¿Cuál es la diferencia entre Entrega Continua y Despliegue Continuo?

La Entrega Continua se centra en la estrategia de lanzamiento y puesta en marcha, mientras que el Despliegue Continuo se centra en el despliegue en sí.

4. Integración continua – GitHub actions

Este workflow se ejecutará automáticamente cuando se cree una PR o se agreguen nuevos cambios a la rama master, y hará lo siguiente:

  1. Instalar las dependecias
  2. Ejecutar esLint
  3. Ejecutar prettier
  4. Ejecutar las pruebas (en este caso en concreto los test unitarios)

5. Entrega continua – GitHub actions

Este workflow solo se ejecutará manualmente cuando se quiera sacar versión y va a hacer lo siguiente:

  1. Ejecutar los pasos anteriores que vimos en CI (excluyendo el ESLint y formateador del código).
  2. Hacer la build de la aplicación.
  3. Crear una tag con los artefactos de la build.
  4. Sacar versión a partir de la tag generada.
  5. Preparar la siguiente versión (ej.: 0.0.1-SNAPSHOT.0)
  6. Finalmente, actualizar la rama en remoto con el SNAPSHOT para la siguiente versión.

6. Despliegue continuo – Netlify

Para este apartado no se necesita ninguna configuración de código sino que lo que haremos sería enlazar nuestro repositorio de GitHub con Netlify para cuando agreguemos un cambio en la rama master y luego de que pase el workflow de CI, se despliegue automáticamente.

Enlazar Netlify con el repositorio de GitHub

Pasos a realizar:

    1. Agregar un nuevo sitio

Agregar un nuevo sitio

En este aparado tenemos 3 opciones a elegir, pero la que nos interesa es la primera opción agregar un proyecto existente.

2. Conectar con el proveedor (en este caso GitHub)

Importar un proyecto desde un repositorio de git

3. Elegir un repositorio

Seleccionar repositorio

Después de dar los permisos necesarios, debemos elegir el repositorio deseado, el cual aparecerá en la lista de repositorios dependiendo del acceso dado.

4. Finalmente, agregamos las configuraciones de la build

Formulario de configuración de la build

Una vez indiquemos la rama, el comando para generar la build y el directorio que queremos publicar hacemos clic en desplegar sitio y ya estaría.

¡Buen trabajo!

7. Ejemplo practicó I: siguiendo el flujo

En este punto ya tenemos todo configurado, por lo tanto, veremos el flujo automático que tendrá nuestra aplicación una vez creamos PR y luego unifiquemos (merged) en master.

    1. Creamos PR a la rama master con las nuevas funcionalidades

crear PR

Automáticamente se ejecutará el workflow de CI y a su vez las comprobaciones de Netlify que incluso podrás ver un preview de los cambios realizados antes de mergear la PR.

comprobaciones

Después de que hayan pasado las comprobaciones y hayamos revisado todo mergeamos.

2. Después de mergear

Además de que se ejecuta nuevamente el workflow de CI por los cambios agregados a master, si nos vamos a Netlify podremos ver que nuestra app ya se esta desplegando:

netlify despliegues

APP desplegada:

despliegue en Netlify

¡Felicidades! 👏

8. Ejemplo practico II: Sacar release

Este paso lo he dejado para el final porque es manual, si revisamos nuevamente el esquema general nos daremos cuenta que forma parte de la Entrega Continua.

    1. Nos vamos a la parte de acciones

Ejecutamos el workflow de CD:

ejecutando el workflow para la release manualmente

2. Una vez ejecutado el workflow podremos ver que

Se ha preparado el package.json con el SNAPSHOT de la siguiente versión

package json actualizado con la siguiente version (SNAPSHOT)

Hay una nueva release disponible

release

¡Nueva versión disponible! 🎉

9. Conclusión

Como has podido ver, es bastante fácil empezar a configurar un entorno CI/CD y que además tu equipo se ahorra un montón de tiempo en tareas rutinarias que no son necesarias hacerlas manualmente nunca más.

Recuerda que esto es una guía introductoria así que te invito a que sigas investigando más a fondo sobre el tema.

Puedes dejar cualquier duda y/o sugerencia en la caja de comentarios, como también recomendaciones para otro tutorial que te gustaría sobre cualquier tecnología en concreto en el marco de Front-end.

Dejar respuesta

Please enter your comment!
Please enter your name here