Implementando CI/CD de bajo costo para proyectos en Angular

12 min readJan 12, 2024

Coautor: Ing. Javier Eduardo Mendoza Blandón

Requerimientos:

Una suscripción de Azure, puedes comenzar con Azure de forma gratuita.
Una organización de Azure DevOps en la cual tengas acceso a parallel jobs
Versión LTS de Node.js
Angular CLI
Git
Un plan de alojamiento activo en SmarterASP.NET
Un proyecto de Angular

Si en la organización de Azure Devops no tienes acceso a parallel jobs, puedes realizar la solicitud de forma gratuita tanto para proyectos privados como publicos en el este formulario. Toma en cuenta que dicha solicitud puede tardar entre 2 a 3 días hábiles.

¿Por qué utilizar CI/CD en tus proyectos?

La integración continua y la entrega/despliegue continuo (CI/CD) son esenciales para el día a día en los equipos de desarrollo ya que ofrecen una manera rápida y confiable de desarrollar, probar y desplegar aplicaciones de software.

Esto permite que los equipos de desarrollo de software puedan lanzar actualizaciones con frecuencia, asegurando una mayor calidad y reducción de costos.

Contexto

Existe la opción de crear CI/CD para equipos de desarrollo más pequeños utilizando Azure DevOps con hosting de SmarterASP.NET

Esta alternativa representa una manera rentable de mejorar la colaboración, optimizar los procesos de desarrollo y ofrecer la escalabilidad y seguridad necesarias para alojar aplicaciones Angular, ya sea para startups, pequeñas y medianas empresas, o proyectos personales.

Dado que no todos tienen los recursos para afrontar el costo elevado de implementar CI/CD en la nube de Azure o AWS, presento esta sólida alternativa basada en mi experiencia previa.

Comencemos

A la hora de compartir conociminento intento no omitir detalles o asumir que se tiene conocimiento del tema en cuestion por lo que dividí la implementación de la siguiente forma:

Parte 1: Desde el paso 0 hasta el 6 implementaremos algunos de los requisitos.

Parte 2: En el paso 7 y 8, crearemos un nuevo repositorio en Azure.

Parte 3: En el paso 9, crearemos (si es necesario) y subiremos nuestro proyecto de Angular al repositorio en Azure.

Parte 4: En el paso 10, Vamos a configurar las politicas que usaremos para los pull request dirigidos a nuestra rama principal.

Parte 5: Del paso 11 al 14, llevaremos a cabo la implementación de la Integración Continua (CI).

Parte 6: Del paso 15 al 16, incluiremos los grupos de tareas para simplificar el proceso de implementación continua.

Parte 7: Desde el paso 17, hasta el 23 implementaremos la Entrega Continua (CD).

Parte 8: En el paso 24 y 25, realizaremos las pruebas finales.

Siéntete libre de omitir aquellas partes que ya hayas abordado previamente en otros de mis artículos o en base a tus propias experiencias.

Parte 1 : Implementando 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 resultarte útil.

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

Paso 3: 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 Angular.

Nota: Reemplaza testAngularCICD con el nombre de tu proyecto o el nombre que sea de tu preferencia.

Paso 5: Después de crear el sitio web testAngularCICD, 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 Angular.

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

Paso 8: Agrega tu código de Angular al nuevo repositorio de Azure.

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

Recuerda usar tus credenciales de inicio de sesión del portal de Azure.

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

cd YourRepoName , this case => cd testAngularCICD

Paso 9.2: Si ya tienes tu proyecto Angular, puedes omitir este paso. Sin embargo, al trabajar en un proyecto Angular, es fundamental verificar que tengas instaladas las versiones correctas de Node.js y Angular CLI para garantizar la compatibilidad y un proceso de desarrollo y despliegue fluido. Ejecuta el siguiente comando en tu terminal o símbolo del sistema para verificar la versión instalada:

ng version

Paso 9.3: Crea una aplicación Angular en el directorio de tu elección ejecutando el siguiente comando en tu terminal o símbolo del sistema:

ng new testAngularCICD --strict false

testAngularCICD puede ser reemplazado por el nombre de tu aplicación Angular

Paso 9.4: Prueba tu aplicación localmente:

Copia todos los archivos de testAngularCICD fuera de la carpeta y luego borra la carpeta

Ejecuta el siguiente comando en tu terminal o símbolo del sistema para levantar la aplicación.

ng serve –o

Paso 9.5: Mueve tus archivos de código a la etapa de preparación (Stage) utilizando el comando git add.

Paso 9.6: Confirma tus cambios en el repositorio utilizando el comando git commit.

git commit -m “Initial app version 1”

Paso 9.7: Sube tus cambios al repositorio de Azure DevOps utilizando el comando git push.

You will have something like this if everything goes fine.

Paso 9.8: Crea una nueva rama y muevete a ella utilizando el comando git checkout -b nuevaRama.

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

Paso 10: Es fundamental que establezcas solicitudes de extracción (pull requests) como el método para fusionar cambios en la rama principal en Repositorios de Azure (o cualquier repositorio Git) por varias razones cruciales: revisión de código, colaboración, control sobre los cambios y versionado. Se recomienda un mínimo de 3 revisores (reviewers), aunque en este caso no es necesario ya que 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.3 y crea el siguiente archivo YAML: angular-build-pipeline.yaml

trigger:
- main
pool:
  vmImage: ubuntu-latest

variables:
  appName: 'ANGULARAPPNAME'  # Remove the leading slash  
steps:
- script: echo 'Starting Angular build --> $(System.DefaultWorkingDirectory) --> $(Build.ArtifactStagingDirectory)'
  displayName: '0. Building process'
- task: NodeTool@0
  inputs:
    versionSpec: '18.x'
  displayName: '1. Install Node.js'
- script: |
    npm install -g @angular/cli
    npm install
    npm run build
  displayName: '2. Npm cli, Install, Build'
- upload: $(System.DefaultWorkingDirectory)/dist/$(appName)
  artifact: drop
  displayName: '3. Upload files to Artifact'

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

Verfica que estes trabajando en el branch creado en el paso 9.8

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

Paso 12: Procede a realizar el envío de estos cambios, incluida la rama principal, a tu repositorio en Azure.

Haz click en aprobar y luego en completar

Ahora tenemos el archivo angular-build-pipeline.yaml en la rama principal. Esta configuración fue requerida debido a la política establecida 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

Haz clic en Job y, al completar el proceso, selecciona 1 artefacto producido.

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 da clic en el botón de Guardar

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

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 (_testAngularCICD).

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 en el grupo de tareas.

Puedes obtener esta información del paso 5 y 6

pPassword
pServiceUrl
pSiteName
pSourcePath => drop
pUserName

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

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

git add .

git commit -m “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.

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

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

H- 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