Implementando CI/CD de bajo costo para proyectos en React

12 min readApr 24, 2024

Co-autor: Ing. Javier Eduardo Mendoza Blandón

Si deseas ver el artículo en LinkedIn, haz clic aquí.

Bienvenidos, esta guía está diseñada para enseñarte todo lo que necesitas saber sobre cómo implementar CI/CD de bajo costo para proyectos de React, en solo 25 sencillos pasos.

Requerimientos:

Una suscripción de Azure, puedes comenzar con Azure de forma gratuita.
Una organización de Azure DevOps con acceso a trabajos paralelos
Versión LTS de Node.js.
Git.
Plan de alojamiento activo de SmarterASP.NET.

Si tu organización no tiene acceso a trabajos paralelos, puedes solicitar trabajos paralelos de forma gratuita para proyectos públicos o privados utilizando este formulario. Tu solicitud tardará de 2 a 3 días hábiles.

¿Por qué CI/CD?

La integración continua y la entrega/despliegue continuo (CI/CD) son importantes porque ofrecen una forma rápida y confiable de desarrollar, probar y desplegar aplicaciones de software.

CI/CD permite a los equipos de desarrollo de software entregar actualizaciones de software con frecuencia, garantizando una mayor calidad y reduciendo costos.

Contexto

La implementación de procesos de Integración Continua y Despliegue Continuo (CI/CD) es crucial para los equipos de desarrollo de software modernos, ya que fomenta la colaboración, eficiencia y garantiza lanzamientos de alta calidad. Sin embargo, para equipos de desarrollo más pequeños con limitaciones presupuestarias, configurar pipelines de CI/CD en plataformas como Azure o AWS puede resultar económicamente desafiante.

Como solución, propongo aprovechar Azure DevOps en conjunto con el alojamiento de SmarterASP.NET. Esta combinación ofrece un enfoque rentable para implementar pipelines de CI/CD adaptados a las necesidades de startups, pequeñas y medianas empresas y proyectos personales.

Comencemos

A la hora de compartir conocimientos con otras personas, prefiero no asumir u omitir detalles.

Por lo que divido la implementación en las siguientes partes:

Parte 1: Implementación de requisitos, desde el paso 0 al 6.

Parte 2: Crear un nuevo repositorio de Azure, desde el paso 7 al 8.

Parte 3: Crear y subir el proyecto de React al repositorio de Azure creado, desde el paso 8 al 9.

Parte 4: Configuración de políticas de rama para aplicar las solicitudes de extracción hacia la rama principal, desde el paso 10 al 10.

Parte 5: Implementación de Integración Continua — CI, desde el paso 11 al 14.

Parte 6: Creando un grupo de tareas para optimizar el proceso de Implementación Continua — CD, desde el paso 15 al 16.

Parte 7: Implementación de Entrega Continua — CD, desde el paso 17 al 23.

Parte 8: Prueba final, desde el paso 24 al 25.

Puedes omitir aquellas partes que hayas completado previamente por ti mismo en otros artículos o tus propias experiencias.

Parte 1: Implementación de requisitos

Paso 0: Si prefieres un video en lugar de la documentación oficial mencionada anteriormente sobre cómo crear una cuenta, organización o proyecto en Azure DevOps, estos videos pueden ser útiles para ti.

https://www.youtube.com/watch?v=A91difri0BQ
https://www.youtube.com/watch?v=705enJzR2cY
https://www.youtube.com/watch?v=Ii70yZ7pmJs

Paso 1: Si prefieres un video sobre cómo crear una cuenta en SmarterASP.NET, este video puede ser útil para ti.

Paso 2: Si prefieres la documentación oficial de Smarter ASP.NET acá puedes encontrarla.

Paso 3: Por favor, verifica si tu organización tiene trabajos paralelos. Aquí te explico cómo comprobar la configuración de trabajos paralelos directamente.

Paso 4: Si has creado o tienes tu cuenta en Smarter, necesitarás crear un nuevo sitio web donde puedas implementar tu aplicación React.

Reemplaza “testreactcicd” con el nombre que prefieras.

Paso 5: Después de crear el sitio web “testreactcicd”, deberás activar el sitio web creado anteriormente en el paso 4.

Paso 6: Por favor, anota estos datos ya que los necesitarás en el proceso de implementación continua (CD pipeline).

pServiceUrl => your web deploy Service URL
pSiteName => your web deploy site name
pUserName => your web deploy user name
pPassword => your web deploy password
pSourcePath => drop

Consejo: Una recomendación en términos de seguridad sería modificar la contraseña de este sitio, ya que comúnmente coincide con la de la cuenta de inicio de sesión, lo cual es una mala práctica.

Parte 2 : Creando un nuevo repositorio en Azure

Paso 7: Necesitarás crear un repositorio en Azure para subir tu proyecto de React.

Parte 3: Creación y carga del proyecto de React en el repositorio de Azure

Paso 8: Deberás añadir tu código de React al nuevo repositorio de Azure creado.

Paso 9: Clona el repositorio en tu máquina local utilizando herramientas de línea de comandos de Git, el símbolo del sistema o Git Bash.

Nota: Recuerda ingresar tus credenciales de inicio de sesión en el portal de Azure si se solicitan.

Paso 9.1: Cambia tu directorio de trabajo al repositorio local.

Paso 9.2: Si tienes tu propio proyecto de React, puedes omitir este paso.

Crea una aplicación de React en el directorio de tu elección.

Abre tu terminal y ejecuta el siguiente comando para crear una nueva aplicación de React:

npx create-react-app testreactcicd

“testreactcicd” puede ser reemplazado por el nombre de la aplicación de React requerido/deseado.

Paso 9.3: Prueba tu aplicación de React localmente: Ejecútala usando tu localhost.

Copia todos los archivos de “testreactcicd” fuera de la carpeta y luego borra la carpeta.

Abre tu terminal o símbolo del sistema y ejecuta:

npm start

Tu aplicación estará disponible en http://localhost:3000/ de forma predeterminada.

Paso 9.4: Agrega tus archivos de código al repositorio de stage usando el comando “git add”.

Paso 9.5: Haz commit a tus cambios en el repositorio usando el comando “git commit”.

Paso 9.6: Sube tus cambios al repositorio de Azure DevOps usando el comando “git push”. Tendrás algo así si todo sale bien.

Paso 9.7: Crea una nueva rama y cámbiate a ella usando el comando “git checkout -b branchTwo”.

Parte 4: Configuración de políticas de rama para aplicar las solicitudes de extracción hacia la rama principal

Paso 10: Es fundamental establecer solicitudes de extracción como la forma de fusionar cambios en la rama principal en Repositorios de Azure (o cualquier repositorio Git) por varias razones, por ejemplo: Revisión de código, Colaboración, Control sobre los cambios, control de versiones.

Esa es la configuración básica para hacerlo.

El número mínimo de revisores debe ser de al menos 3, pero esto es una prueba.

Parte 5: Implementando Integración Continua (CI)

La Implementación Continua (CI) con archivos YAML para proyectos de Angular en Azure DevOps proporciona una serie de beneficios significativos, tales como la configuración como código, estandarización, automatización, pruebas en paralelo, flexibilidad, escalabilidad, integración con el ecosistema de Azure, compatibilidad multiplataforma, gestión de artefactos, seguridad y cumplimiento normativo.

Paso 11: Abre en Visual Studio Code tu proyecto Angular existente o creado en el paso 9.2 y crea el siguiente archivo YAML: react-build-pipeline.yaml

trigger:
- main

pool:
  vmImage: ubuntu-latest

variables:
  appName: 'REACTAPPNAME'  # Remove the leading slash  

steps:
- script: echo 'Starting React build --> $(System.DefaultWorkingDirectory) --> $(Build.ArtifactStagingDirectory)'
  displayName: '0. Building process'

- task: NodeTool@0
  inputs:
    versionSpec: '18.x'
  displayName: '1. Install Node.js'

- script: npm ci
  displayName: '2. Npm Install CI'

- script: |
    npm run build
  displayName: '3. Npm Build'

- upload: $(System.DefaultWorkingDirectory)/build/
  artifact: drop
  displayName: '4. Upload files to Artifact'

- script: rm -rf ./path/to/unused/files
  displayName: '5. Cleanup Unused Files'

Nota: Reemplaza REACTAPPNAME con el nombre de tu aplicación React ubicado en el archivo package.json.

Por favor verifica que estás en la rama creada en el paso 9.7.

Nota: Acá te dejo un enlace con la explicacion detallada del archivo YAML creado anteriormente.

Paso 12: Ahora deberás subir estos cambios y la rama principal a tu repositorio de Azure.

Ahora tenemos el archivo “react-build-pipeline.yaml” en la rama principal.

¿Por qué necesitas hacerlo de esta manera? Recuerda, se configuró una política de rama en el paso 10.

Paso13: Debes crear tu primer pipeline, dirígetea Pipelines en la barra de navegación izquierda y luego haz clic en el botón Crear Pipeline.

Paso 14: Selecciona Azure Repos Git YAML para crear tu primer pipeline.

Paso 14.1: Selecciona el repositorio creado en el paso 7.

Selecciona el archivo YAML existente de Azure Pipelines.

Seleccional el archivo YAML creado en el paso 11

Si todo va bien, deberías tener algo similar a esto.

La compilación del código se ha completado con éxito.

Verifica el artefacto que contiene los archivos generados por el proyecto publicado y anota la ruta drop, ya que la necesitaremos más adelante en el pipeline de implementación continua (CD).

Parte 6: Creando un grupo de tareas para optimizar el proceso de Implementación Continua (CD).

Ahora necesitas importar un grupo de tareas creado por mí para simplificar todo el proceso de implementación de cualquier aplicación desarrollada en Angular y alojada en SmarterASP. Puedes encontrar este grupo de tareas en mi repositorio público de GitHub. Si deseas aprender cómo crear un grupo de tareas desde cero, aquí tienes la documentación oficial.

Paso 15: Descarga el grupo de tareas desde el repositorio de GitHub mencionado anteriormente.

Paso 16: Importaremos el grupo de tareas descargado anteriormente a los grupos de tareas del proyecto.

Elimina el “- Copy” del nombre y luego haz clic en el botón de guardar.

Con esto el grupo de tareas está listo para ser utilizado en cada aplicación Angular que despleguemos en el alojamiento de SmarterASPNet.

Parte 7: Implementando Entrega Continua (CD)

Paso 17: Necesitas crear un segundo pipeline, navegar a la página de pestañas de lanzamientos y crear un nuevo pipeline de lanzamiento.

Selecciona una plantilla de Trabajo vacío y luego haz clic en Aplicar.

Anotamos el nombre de nuestro primer entorno, en mi caso será Desarrollo (Development)

Paso 18: Realiza las siguientes tareas:

Cambia le nombre del Pipeline.

Agrega el artefacto, creado anteriormente.

Nota: Debes seleccionar la fuente (build pipeline) y NO modificar el campo Alias de origen (_testReactCICD).

Paso 19: Habilita el disparador (trigger) de despliegue continuo. Esto ejecutará los trabajos de etapas posteriores al construir el pipeline.

Paso 20: Añade el grupo de tareas importado previamente para gestionar el despliegue.

Paso 21: Ingresa los valores de las variables necesarias en el grupo de tareas seleccionado.

Por favor, elimina “$(pPassword)” del nombre para mostrar del grupo de tareas.

Puedes obtener esta información del paso 5 y 6.

pPassword
pServiceUrl
pSiteName
pSourcePath
pUserName

Haz clic en guardad (Save)

Nota: Si decides no utilizar el grupo de tareas creado por mí y prefieres crearlo desde cero mediante código, en este artículo siguiendo los pasos desde el 26.3 hasta el 27, encontrarás dos formas de hacerlo. Es posible que necesites realizar algunos ajustes menores.

Paso 22: Probando el pipeline creado anteriormente

Espera hasta que finalice el proceso de despliegue

Si todo sale bien, deberías tener algo similar a esto.

¡Felicidades, has finalizado con éxito todas las tareas!.

Paso 23: Verifica si tu aplicación React se ha desplegado correctamente en el e SmarterASPNet.

Para esto ve a los siguientes sitios e ingresa tus credenciales:

https://www.smarterasp.net/
https://member5-3.smarterasp.net/account/loginform

Has completado exitosamente esta implementación.

Part 8: Pruebas finales

Nota: Después de haber completado la implementación, este será un paso habitual en tu proceso.

Paso 24: Realicemos una última prueba para asegurarnos de que todo el esfuerzo invertido en crear este flujo de CI/CD está funcionando como se espera.

A- Vamos a traer todos los cambios en la rama principal.

git pull origin main

B- Creamos otra rama en Git con el nombre que prefieras.

git checkout -b mytesttwo

C- Abre tu proyecto Angular en Visual Studio Code y realiza un cambio en tu código.

Hice dos cambios, uno con el título y el otro con un pequeño párrafo.

D- Guarda, añade y sube los cambios al repositorio de Azure.

git add .

git commit -m “react app version 2 to test CICD”

git push origin mytestwo: mytesttwo

E- Crea la solicitud de extracción (pull request) en el repositorio de Azure.

Debes añadir revisores opcionales y obligatorios, y deberías añadir los elementos de trabajo asociados con este cambio, pero esto es un artículo de taller, pero si necesitas hacerlo, hazlo.

F- Automáticamente, al completar la solicitud de extracción, se activará el pipeline de CI.

Espera hasta que finalice el proceso de construcción.

H- Al finalizar el pipeline de CI y de forma automática, se activará el pipeline de CD.

G- Repite el paso 23 para verificar si los cambios se encuentran en el alojamiento de SmarterASPNet.

Eso es todo, amigos. Esperaré tus comentarios, ideas o consejos. No dudes en compartirlos, por favor. Gracias.

Un agradecimiento especial al coautor de este artículo: Ing. Javier Eduardo Mendoza Blandón