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

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)

# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: CI

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the master branch
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  test:
    name: Test
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '15.14.0'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci
        env:
          CI: true

      - name: Run esLint
        run: npm run lint

      - name: Run prettier
        run:  npm run prettier

      - name: Run the tests and generate coverage report
        run: npm run test:unit:coverage

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.

# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: CD
on:
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
    env:
      NODE_ENV: test

    steps:
      - name: Clone repository
        uses: actions/checkout@v2

      - name: Use Node.js 15
        uses: actions/setup-node@v2
        with:
          node-version: '15.14.0'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci
        env:
          CI: true

      - name: Run the tests
        run: npm run test

        # When we need to make commits it is important to set up the Git User
      - name: Configure Git User
        run: |
          git config user.email "actions@github.com"
          git config user.name "GitHub Actions"

        # Get version number and save it in a variable
      - name: Get package version
        run: echo "::set-output name=tag-version::$(jq '.version' package.json | sed 's/-SNAPSHOT.0//' | xargs npm version --no-git-tag-version | sed 's/v//')"
        id: version
        shell: bash

      - name: Build
        run: npm run build

        # Allows you to release using an already created tag, if the given tag does not exist it will fail
      - name: Create GitHub Release
        uses: ncipollo/release-action@v1
        with:
          generateReleaseNotes: true
          tag: ${{ steps.version.outputs.tag-version }}
          token: ${{ secrets.GITHUB_TOKEN }}

        # Prepare prerelease with the preid SNAPSHOT (ex.: 0.0.0-SNAPSHOT.0)
      - name: Create SNAPSHOT
        run:  npm version prerelease --preid SNAPSHOT --no-git-tag-version

      - name: Update version in remote
        run: |
          git add package.json
          git add package-lock.json
          git commit -m "Update SNAPSHOT"
          git push

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

3. Elegir un 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

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. 1. Creamos PR a la rama master con las nuevas funcionalidades

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.

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:

APP desplegada:

¡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. 1. Nos vamos a la parte de acciones

Ejecutamos el workflow de CD:

2. Una vez ejecutado el workflow podremos ver que

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

Hay una nueva release disponible

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