Implementando Multi-Ambiente con `amplify.yml` en la Implementación de Angular 17 con SSR en AWS Amplify

La implementación de diferentes ambientes (como desarrollo, pruebas y producción) es esencial para un flujo de trabajo de desarrollo eficiente y seguro. AWS Amplify permite una configuración detallada para múltiples ambientes utilizando el archivo amplify.yml. A continuación, te muestro cómo configurar este archivo para manejar múltiples entornos en tu proyecto Angular con SSR.

Configuración del archivo amplify.yml

Cuando trabajas con AWS Amplify, el archivo amplify.yml controla el proceso de construcción y despliegue de tu aplicación. Para configurar múltiples ambientes, puedes definir variables de entorno y comandos específicos para cada fase del despliegue. Aquí tienes un ejemplo de cómo estructurar tu amplify.yml:

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm install
        build:
          commands:
            - npm run build:ssr
      artifacts:
        baseDirectory: dist/mi-aplicacion-angular
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
    appRoot: mi-aplicacion-angular

Este es un archivo de configuración básico. Ahora, vamos a añadir soporte para múltiples ambientes.

Múltiples Ambientes

Para manejar diferentes ambientes, puedes utilizar variables de entorno dentro de tu aplicación Angular y referenciarlas en tu archivo amplify.yml. AWS Amplify permite definir estas variables para cada entorno directamente desde la consola de Amplify.

Aquí tienes cómo puedes modificar el archivo amplify.yml para utilizar variables de entorno:

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm install
            - 'if [ "$AMPLIFY_ENV" = "production" ]; then npm run config:prod; else npm run config:dev; fi'
        build:
          commands:
            - npm run build:ssr
      artifacts:
        baseDirectory: dist/mi-aplicacion-angular/browser
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
    appRoot: mi-aplicacion-angular

En este ejemplo, $AMPLIFY_ENV es una variable de entorno que puedes configurar en AWS Amplify para cada ambiente. Los comandos npm run config:prod y npm run config:dev deben ser scripts definidos en tu package.json que configuren tu aplicación para cada entorno respectivamente.

Configuración en la Consola de Amplify

Para definir las variables de entorno en AWS Amplify:

1. Ve a tu aplicación en la consola de Amplify.
2. Selecciona "Configuración de la aplicación" y luego "Variables de entorno".
3. Define AMPLIFY_ENV con valores como development, production, etc., según tus ambientes.

Conclusión

Al configurar tu archivo amplify.yml y utilizar las funcionalidades de AWS Amplify, puedes facilitar el manejo de múltiples ambientes para tu aplicación Angular con SSR. Esto no solo mejora la organización y la seguridad de tu flujo de trabajo de desarrollo, sino que también asegura que cada entorno esté correctamente configurado con las variables y configuraciones adecuadas.

Siguiendo estos pasos, podrás desplegar eficientemente tu aplicación Angular en diferentes ambientes, maximizando la eficiencia y la efectividad de tus prácticas de CI/CD.