Implementando Multi-Ambiente con `amplify.yml` en la Implementación de Angular 17 con SSR en AWS Amplify
Published: 2024-03-04 13:30:10

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`:

```yaml
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:

```yaml
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.