Implementando Multi-Ambiente con `amplify.yml` en la Implementación de Angular 17 con SSR en AWS Amplify
Gustavo Ramirez
Posted on March 4, 2024
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:
- Ve a tu aplicación en la consola de Amplify.
- Selecciona "Configuración de la aplicación" y luego "Variables de entorno".
- Define
AMPLIFY_ENV
con valores comodevelopment
,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.
Posted on March 4, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.