Configuración y uso del ambiente de staging en Angular

La configuración de ambientes en Angular es una práctica fundamental para el desarrollo profesional de aplicaciones. Conocer cómo implementar un ambiente de staging permite a los equipos de desarrollo realizar pruebas finales antes de liberar código a producción, garantizando así la calidad del producto final. Este paso intermedio es crucial para detectar problemas que podrían afectar la experiencia del usuario en el ambiente de producción.

¿Qué es el ambiente de staging y para qué sirve?

El ambiente de staging representa un paso intermedio entre desarrollo y producción. Aunque su implementación puede variar según el equipo de ingeniería, generalmente sirve como una fase previa a la liberación de una versión a producción.

Este ambiente permite que:

• El product manager o stakeholders revisen la aplicación antes de su lanzamiento
• Se prueben nuevas funcionalidades sin afectar el ambiente de producción
• El equipo de QA realice pruebas manuales en un entorno similar al de producción
• Se utilice una API y base de datos específicas para staging, evitando modificar datos reales

El objetivo principal es verificar que todo funcione correctamente en un entorno que simula el de producción, pero sin los riesgos asociados a trabajar directamente con datos y sistemas en vivo.

¿Cómo configurar un ambiente de staging en Angular?

La configuración de un ambiente de staging en Angular requiere modificar algunos archivos manualmente, ya que Angular no proporciona un comando específico como ng generate staging que realice estos cambios automáticamente.

Creación del archivo de ambiente

El primer paso es crear un nuevo archivo de ambiente para staging:

1. Crear un archivo environment.staging.ts similar a los existentes para desarrollo y producción
2. Configurar las variables específicas para el ambiente de staging:

export const environment = {
  production: true,
  apiUrl: 'https://staging.api.escuela.js'
};

Observa que production está configurado como true. Esto es porque queremos que Angular aplique todas las optimizaciones de producción (minificación, code splitting, etc.), pero apuntando a una API de staging.

Modificación del archivo angular.json

El siguiente paso es modificar el archivo angular.json para incluir la configuración del nuevo ambiente:

1. Localizar la sección projects > [nombre-proyecto] > architect > build > configurations
2. Agregar una nueva configuración para staging entre development y production:

"staging": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.staging.ts"
    }
  ]
}

3. También hay que configurar el servicio para poder ejecutarlo localmente:
4. Localizar la sección projects > [nombre-proyecto] > architect > serve > configurations
5. Agregar la configuración de staging:

"staging": {
  "browserTarget": "[nombre-proyecto]:build:staging"
}

Esta configuración permite que cuando ejecutemos el servidor con la opción de staging, utilice la configuración de build que acabamos de crear.

Ejecutando la aplicación en ambiente de staging

Una vez configurado el ambiente, podemos ejecutar la aplicación en modo staging de dos maneras:

Para desarrollo local con configuración de staging:

ng serve -c staging

Angular mostrará una alerta indicando que estás ejecutando en modo desarrollo pero con configuraciones de producción. Esto es normal y esperado.

Para generar un build de staging para despliegue:

ng build -c staging

Este comando generará los archivos optimizados para producción pero utilizando las variables de ambiente de staging, que luego pueden ser desplegados en un servidor específico para pruebas.

¿Cómo integrar el ambiente de staging en el flujo de trabajo?

El ambiente de staging se integra perfectamente en el flujo de trabajo de desarrollo moderno:

• Los equipos de DevOps pueden automatizar el proceso de build y despliegue en el ambiente de staging como parte de la integración continua
• El equipo de QA puede realizar pruebas en un entorno que refleja fielmente el de producción
• Los stakeholders pueden revisar nuevas funcionalidades antes de su lanzamiento oficial
• Los desarrolladores pueden verificar que sus cambios funcionan correctamente en un entorno similar al de producción

La ventaja principal es poder detectar problemas que solo aparecerían en producción, pero sin afectar a los usuarios finales.

La configuración de ambientes en Angular es una habilidad esencial para cualquier desarrollador que trabaje en proyectos profesionales. Dominar esta técnica te permitirá crear flujos de trabajo más robustos y seguros. ¿Has implementado ambientes de staging en tus proyectos? Comparte tu experiencia en los comentarios.