Manejo de solicitudes de extracción de emergencia utilizando colas de fusión

Manejar solicitudes de extracción de emergencia ha sido un tema de debate en la comunidad de desarrolladores desde la aparición de las prácticas Ágil y DevOps.

En tales escenarios, necesitamos un sistema que pueda priorizar estas ‘solicitudes urgentes’ sobre las PR regulares y nos permita posponer algunas verificaciones de CI si es necesario.

Una buena estrategia puede ser implementar una cola de fusión separada por completo, que nos permita adelantarnos a la cola predeterminada incluso antes de que las pruebas de CI hayan pasado y acelerar nuestros arreglos urgentes a producción.

En este artículo, crearemos dos colas de fusión con Mergify activadas por etiquetas de PR. Configuraremos una para PR regulares y otra para manejar PR de emergencia.

Entonces, ¡enfundémonos las mangas y comencemos! 

Para esta demostración, vamos a inicializar una aplicación simple React. Y para CI, utilizaremos CircleCI.

Crearemos dos colas de fusión:

• predeterminada: Todas las PR pasarán por ella regularmente. Requiere verificaciones CircleCI antes de procesar.
• urgente: Esta cola es solo para las PR que tienen la etiqueta urgente en la PR. Esto permite que las PR avancen al frente de las PR en la cola predeterminada sin ejecutar verificaciones de CircleCI.

Con tal configuración, una solicitud de extracción con la etiqueta urgente entrará en la cola antes de que el CI se ejecute en ella.

Estará al frente de la cola predeterminada. Mergify actualizará la solicitud de extracción con su rama base si es necesario, esperará a que el CI pase y luego fusionará la solicitud de extracción.

Desde la perspectiva del equipo de desarrollo también, este es un proceso bastante simple. El desarrollador solo necesita agregar una etiqueta urgente al crear la PR para acelerar el proceso.

Configuración de Nuestro Proyecto

Comencemos con la configuración de nuestro proyecto. Crearíamos una nueva aplicación react utilizando create-react-app.

mkdir emergency-pr-demo
cd emergency-pr-demo
git init
npx create-react-app .

Para referencia, esta será nuestra estructura de proyecto final después de agregar nuestra configuración de CI y Mergify.

emergency-pr-demo/
├── .circleci
│   └── config.yml
├── README.md
├── package-lock.json
├── package.json
├── .gitignore
├── .mergify.yml
├── .vscode
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

Creación de Configuración de CI

Para ejecutar nuestras pruebas, utilizaremos CircleCI. Es fácil de configurar y comenzar.

Aquí, crearemos un archivo config.yml en un nuevo directorio .circleci en la raíz de nuestro proyecto.

Crearemos un trabajo simple build_and_test que primero nos ayudará a verificar si nuestro proyecto se está construyendo como se espera y luego ejecutará las pruebas unitarias con el comando npm run test.

version: 2.1
orbs:
  node: circleci/[email protected]

jobs:
  build_and_test:
    executor: node/default
    steps:
      - checkout
      - node/install-packages:
          pkg-manager: npm
      - run:
          command: npm run test
          name: Run tests
      - run:
          command: npm run build
          name: Build app
      - persist_to_workspace:
          root: ~/project
          paths:
            - .

workflows:
  test_my_app:
    jobs:
      - build_and_test

Creación de Configuración de Mergify

Ahora es el momento de crear nuestro archivo de configuración Mergify.

Mergify es una herramienta que automatiza el proceso de fusionar solicitudes de pull en repositorios de código según reglas y condiciones predefinidas.

Necesitamos definir dos colas en nuestro archivo de configuración según lo planeado: urgente y default.

Ambos tienen las mismas merge_conditions, check-success=ci/circleci: build_and_test, lo que significa que el código debe pasar con éxito la verificación build_and_test en CircleCI antes de poder ser fusionado.

La sección pull_request_rules describe cómo deben manejarse las solicitudes de extracción. Colocaremos nuestra PR en la cola urgente si tiene la etiqueta urgente. De lo contrario, entrará en la cola predeterminada.

.mergify.yml

queue_rules:
  - name: urgent
    merge_conditions:
      - "check-success=ci/circleci: build_and_test"

  - name: default
    merge_conditions:
      - "check-success=ci/circleci: build_and_test"

pull_request_rules:
  - name: move to urgent queue when label urgent
    conditions:
      - base=main
      - label=urgent
    actions:
      queue:
        name: urgent

  - name: merge using the default queue after running the CI checks
    conditions:
      - base=main
      - "check-success=ci/circleci: build_and_test"
      - label!=urgent
    actions:
      queue:
        name: default

Configuración del Repositorio

No, procederemos a crear un nuevo repositorio en GitHub. 

Después de esto, necesitaremos hacer un primer commit y empujar nuestro código utilizando los siguientes comandos:

git add .
git commit -m "Initial commit"
git remote add origin <REPO_URL>
git push -u origin master

A continuación, necesitaremos configurar CircleCI. Para ello, visitaremos el Panel de CircleCI, luego iremos a la sección de proyectos y configuraremos nuestro proyecto.

También necesitaremos especificar nuestra rama main. CircleCI detectará automáticamente nuestro archivo config en este caso.

Podemos instalar Mergify en nuestra cuenta de GitHub visitando dashboard.mergify.com o github.com/apps/mergify/installations/new y accediendo con nuestra cuenta de GitHub.

Luego, podríamos seleccionar los repositorios a los que queremos otorgar acceso a Mergify.

Una vez configurado, podríamos ver ambas colas en el Panel de control de Mergify.

Elevando el Primer PR (PR Regular)

Ahora empecemos creando nuestro primer PR. Primero crearíamos una nueva rama regular-pr

git checkout -b regular-pr
git add .

Solo para fines demostrativos, ahora agregaremos una clase en el archivo App.css.

.Regular-change-class {
    background-color: white;
}

Después de esto, haríamos un commit y enviaríamos nuestras modificaciones a GitHub.

git commit -m 'regular CSS change'
git push --set-upstream origin regular-pr

Luego, elevaremos una Solicitud de Extracción sin etiquetas.

Elevando el Segundo PR (PR Urgente)

Ahora crearíamos una nueva rama urgent-pr, para nuestras modificaciones.

git checkout main
git branch -b urgent-pr

Primero, haremos un commit, donde crearemos un nuevo componente Urgent.js.

import React from "react";

export default function Urgent() {
  return <div>This is an Urgent Change</div>;
}

Ahora, enviaremos esta rama (urgent-pr) a nuestro repositorio de GitHub.

git add .
git commit -m 'Create a component for Urgent change'
git push --set-upstream origin urgent-pr

Entonces, iremos a nuestro repositorio y elevaremos una nueva PR desde la rama urgent-pr hasta la rama main y añadiremos una nueva etiqueta urgent.

Mergify automáticamente coloca el segundo PR en la cola urgent y luego ejecuta las verificaciones de CI y lo fusiona con la rama main.

Luego, fusiona automáticamente el primer PR.

Puedes consultar el repositorio de GitHub aquí para referencia: github.com/hugoescafit/emergency-pr-demo

Conclusión

¡Eso es todo por esta vez!

En este tutorial, hemos explorado el proceso de configurar dos colas de fusión distintas, por defecto y urgente, con la ayuda de Mergify y de configurar verificaciones de CI con la ayuda de CircleCI. También hemos visto cómo priorizar las PR de emergencia sobre las regulares.

Existen diversas otras soluciones para la gestión de solicitudes de extracción de emergencia, como crear una rama especial de hotfix para ello, tener revisores dedicados e incluso anular manualmente las verificaciones. Pero las colas de fusión son una de las mejores y más fáciles de implementar para manejar este problema.

Visita Mergify para comenzar a agregar colas de fusión a tu aplicación!