Configurando las pipelines de Bitbucket en tu proyecto front end

El desafío

Las pipelines de Bitbucket permiten configurar fácilmente un entorno de integración continua en tu proyecto. Teóricamente, solo necesitas:

• Habilitarlas. Para ello dirígete a: Portal de Bitbucket >> elegir proyecto >> Settings >> Pipelines Settings >> Enable Pipelines.

• Crear un fichero llamado bitbucket-pipelines.yml en la carpeta raíz de tu proyecto:

  • Indica la imagen Docker que se usará como entorno de compilación o build, por ejemplo: Ubuntu + nodejs. Bitbucket buscará esta imagen en el Docker-hub.

  • Indica cuando se lanzará la build, por ejemplo, en cada push.

  • Indica que scripts deben ejecutarse, por ejemplo: npm install y npm test (también puedes intercalar npm run build si quieres probar que el bundle se genera on éxito) .

• Hacer commit y subir dicho fichero (bitbucket-pipelines.yml) a tu rama master y ya estarás listo para empezar. Bitbucket disparará automáticamente una build cuando se den las condiciones específicas. Si la compilación fallara, se te notificará a través del correo electrónico aunque también puedes comprobarlo en tu panel de mandos de integración continua (CI).

Hasta aquí bien, sin embargo …

• Bitbucket factura por minutos de compilación, y por defecto tu integración se dispara en cada push, en cada rama. Debemos alcanzar un equilibrio de costes:

  • Lanzar la compilación en cada push hacia la rama master.

  • Lanzar la compilación en cada pull request.

• Poner en marcha un fichero YAML de configuración es un proceso propenso a errores, especialmente si no tienes tiempo para leer detenidamente la documentación. Por tanto, necesitamos una manera fácil de comprobar que el YAML generado es válido.

En este post veremos cómo configurar todos estos settings, partiendo de cero y avanzando paso a paso.

Paso 1: Habilitando pipes en nuestro proyecto

El proyecto donde habíamos empezado a configurar las pipelines es un proyecto web estándar (webpack + react + jest). Tenemos los siguientes scripts disponibles en el package.json:

• start: para arrancar el proyecto.

• test: para ejecutar los tests unitarios.

En el servidor de integración continua querremos lanzar la siguiente secuencia de comandos:

npm install
npm test

“También podemos añadir npm run build para asegurar que el bundle se genera de manera correcta.”

Paso 2: Habilitando las pipelines de Bitbucket

Para ello, tenemos que navegar hasta nuestro espacio en Bitbucket, elegir el proyecto deseado y desde ahí hacer click en Settings >> Pipelines Settings:

Y finalmente >> Enable Pipelines:

Ahora solo necesitaremos crear un fichero de configuración llamado bitbucket-pipelines.yml en la carpeta raíz de nuestro repositorio para poder lanzar la integración continua.

Paso 3: Lanzando la integración continua en cada push a master

Empecemos con el caso más simple: lanzar una nueva build siempre que un usuario dado haga push a master. En este escenario crítico debemos ser notificados tan pronto como master se rompa (en este caso no pasen la batería de pruebas unitarias). Creemos el fichero de configuración en la raiz de nuestro repositorio:

/bitbucket-pipelines.yml

image: node:10.15.0

pipelines:
  branches:
    master:
      - step:
          caches:
            - node
          script:
            - npm install
            - npm test

¿Qué estamos haciendo aquí?

• En primer lugar, indicando a las pipelines de Bitbucket que utilicen una imagen concreta del Docker-hub para el entorno de compilación. En este ejemplo, una instancia de linux que ya lleva pre-instalado nodejs 10. En este enlace encontrarás más información sobre la utilización de imágenes de Docker para entornos de integración.

• A continuación establecemos la configuración necesaria para indicar que sólo queremos lanzar una nueva compilación para la rama master.

• Finalmente, configuramos los scripts que participarán en dicho proceso. En nuestro caso, npm install para instalar los paquetes del proyecto y npm test para ejecutar los tests unitarios.

• Además, empleamos un parámetro para acelerar el proceso de compilación y ahorrarnos algunos minutos, y por tanto coste ($): chachear los paquetes npm de los que depende nuestro proyecto (observa la sentencia caches: node). Puedes ampliar la información en este enlace.

Hagamos commit y push de este fichero a nuestra rama master.

¡Estupendo! Ahora, cada vez que actualicemos nuestra rama master haciendo push, un nuevo build será lanzado y, si alguno de los tests falla, recibiremos un correo indicando el problema. También se puede verificar en el portal de Bitbucket, donde hay una sección disponible para comprobar el estado de la integración.

Paso 4: Lanzando un build en cada Pull Request

Hasta ahora genial pero, ¿no estaría incluso mejor si pudiésemos disparar un nuevo build cada vez que se solicite una pull request? De este modo, podemos detectar prematuramente fallos en el código antes de integrarlo en master.

A tal efecto, tan solo tendremos que añadir una nueva sección en el fichero de configuraciónYML anterior:

image: node:10.15.0

pipelines:
  pull-requests:
    "**":
      - step:
          caches:
            - node
          script:
            - npm install
            - npm test
  branches:
    master:
      - step:
          caches:
            - node
          script:
            - npm install
            - npm test

En este caso estamos ordenando lo siguiente:

• Para cada pull request,

• En cualquier rama,

• Ejecuta un nuevo build: npm install y npm test.

Una forma de afinar podría ser aplicar patrones fileglob para, por ejemplo, disparar la build solo en caso de ramas etiquetadas como “feature”. En tal caso, reemplazaríamos “**” con algo asi: “feature/*”.

Recursos

Configurar las pipelines de Bitbucket a través de ficheros YML puede parecer fácil, pero localizar un error no es tan sencillo. Bitbucket te provee de una herramienta de validación online.

Si necesitas más información sobre como afinar tu configuración para pull requests, puedes encontrarla en este enlace.

Para cualquier configuración específica, dirígete a la documentación oficial.

Resumiendo

La combinación Bitbucket pipelines + YAML es muy potente, pero podría llevarte algo de tiempo conocer los secretos de la tecnología. En este post intentamos cubrir un escenario común para enseñarte a configurar tu entorno de integración continua en pocos minutos.

Espero que hayas encontrado útil este artículo.