Configurar un pipeline en Azure DevOps para una aplicación de React con Node implica encadenar tareas que instalen dependencias, compilen el código y empaqueten el resultado listo para desplegar. Aquí verás cómo construir esa secuencia paso a paso, separando comandos, copiando artefactos y publicándolos como un .zip dinámico que luego usarás en la sección de releases.

Qué hace un pipeline básico de Azure Pipelines con React y Node

Un pipeline básico en Azure DevOps automatiza la instalación de Node, la instalación de dependencias y la compilación del proyecto cada vez que se hace un cambio en la rama asociada. En este caso, el pipeline está vinculado al branch master y usa Node 16.15 sobre un agente, que es una máquina virtual interna de Azure DevOps encargada de ejecutar todos los comandos.

¿Qué es un agente en Azure DevOps? Es una máquina virtual interna que ejecuta de forma automatizada los comandos definidos en el pipeline. Para usarlo, necesitas llenar un formulario de acceso que tarda entre 2 y 3 días hábiles.

La primera ejecución del pipeline corre tres pasos clave: inicializa el job, instala Node 16.15 y ejecuta los comandos npm install y npm run build. Cuando todo termina sin errores, Azure DevOps notifica que la ejecución fue satisfactoria [01:55].

Cómo separar npm install y npm run build en tareas distintas

Por defecto, el template de React con Node combina install y build en una sola tarea. Separarlos no es lo habitual, pero ayuda a entender cómo encadenar scripts dentro del archivo azure-pipelines.yml [04:18].

Para crear un nuevo script, agregas la palabra script, usas el carácter pipe y defines la lista de comandos a ejecutar. También conviene añadir un displayName para identificar el paso en los logs.

• Tarea 1: ejecutar npm install.
• Tarea 2: ejecutar npm run build con su propio displayName.
• Resultado: dos pasos secuenciales independientes en el log.

Así queda claro cómo el pipeline ejecuta un comando después del otro y puedes intervenir cualquier paso sin tocar los demás.

Cómo copiar y comprimir los archivos de build en Azure Pipelines

Después de compilar, necesitas mover el resultado a una ubicación que otras secciones de Azure DevOps puedan consumir. Esto se hace con dos tareas: copiar archivos y archivarlos en zip [05:30].

Cómo usar la tarea CopyFiles@2

La tarea CopyFiles@2 toma todos los archivos generados por npm run build y los lleva al directorio de staging del agente. Los parámetros clave son:

• Contents: usa ** dentro de la carpeta build para incluir todos los archivos.
• TargetFolder: apunta a la variable interna $(build.artifactStagingDirectory).

Las variables internas de Azure DevOps se invocan con el símbolo de peso y paréntesis. Esa convención es la que conecta tareas distintas con datos dinámicos del pipeline.

¿Qué es build.artifactStagingDirectory? Es una variable interna de Azure DevOps que apunta al directorio temporal del agente donde se almacenan los artefactos antes de publicarse.

Cómo configurar ArchiveFiles@2 para generar un zip dinámico

La tarea ArchiveFiles@2 comprime el contenido del staging en un archivo .zip con nombre dinámico [07:12]. Los inputs relevantes son:

• rootFolderOrFile: la misma carpeta de staging donde copiaste los archivos.
• includeRootFolder: en true para conservar la estructura.
• archiveType: puede ser zip, tar o tgz; aquí se usa zip.
• archiveFile: usa $(build.buildId).zip para que el nombre cambie en cada ejecución.
• replaceExistingArchive: en true para sobrescribir si ya existe.

El uso de build.buildId garantiza que cada compilación genere un archivo único, lo que evita colisiones entre ejecuciones y facilita rastrear qué .zip corresponde a qué build.

Cómo publicar artefactos para la sección de releases

La última tarea publica el .zip para que la sección de releases pueda tomarlo y desplegarlo en Azure [09:45]. Aquí Azure DevOps ofrece una ayuda visual: la barra lateral de tareas permite buscar publish artifact, completar el formulario y dejar que la herramienta inserte el YAML por ti.

• PathtoPublish: $(build.artifactStagingDirectory).
• ArtifactName: por defecto se llama drop.
• Input: el mismo AzurePipelines.

Esta opción visual es útil cuando estás aprendiendo la sintaxis o cuando una tarea tiene muchos parámetros opcionales. El YAML resultante queda igual que si lo escribieras a mano.

Qué herramientas adicionales puedes integrar al pipeline

Azure DevOps permite ir mucho más allá de instalar y compilar. Sobre la misma estructura del pipeline puedes sumar revisión de calidad y pruebas automatizadas [11:20].

• SonarQube para análisis de calidad de código.
• Pruebas unitarias y reportes de cobertura.
• Métricas sobre líneas de código y eficiencia.
• Integraciones con AWS o publicación directa en Azure.

En este flujo, la publicación final se delega a la sección de releases, manteniendo el pipeline de integración enfocado en construir y empaquetar.

Cada vez que haces commit en master, el pipeline se dispara automáticamente y ejecuta toda la secuencia: instala Node, corre npm install, compila con npm run build, copia los archivos, los comprime con el buildId y publica el artefacto drop. Una vez configurado, ese ciclo acompaña al proyecto durante toda su vida útil.

¿Has integrado SonarQube o pruebas unitarias en tu pipeline? Cuéntame en los comentarios qué tareas adicionales sumarías a esta configuración.