Desplegando un proyectos en multiples frameworks SPA en AWS Amplify y múltiples ambientes - Parte 1: Angular

En este artículo, aprenderemos cómo desplegar un proyecto de Angular en AWS Amplify con la capacidad de gestionar múltiples ambientes, y cómo cambiar las variables del environment.ts utilizando el comando de construcción de Amplify. Además, aprenderemos cómo cambiar el script de ejecución de acuerdo con la rama que se despliega, todo esto con una integración directa con GitHub. Al final, demostraremos cómo apuntar a un dominio personalizado.

Requisitos

Necesitarás lo siguiente:

Un proyecto de Angular.
Una cuenta de AWS.
Una cuenta de GitHub.
Un dominio personalizado (opcional).

Pasos Iniciales

Primero, necesitaremos configurar el proyecto de Angular para trabajar con múltiples ambientes. Angular CLI nos permite definir variables de ambiente en archivos separados. Estos archivos se encuentran generalmente en el directorio src/environments.

Por ejemplo, puedes tener environment.prod.ts para producción y environment.staging.ts para la etapa de pruebas.

El archivo environment.prod.ts podría verse algo así:

export const environment = {
  production: true,
  apiEndpoint: 'https://api.prod.misitio.com',
  // más variables de ambiente...
};

Y environment.staging.ts:

export const environment = {
  production: false,
  apiEndpoint: 'https://api.staging.misitio.com',
  // más variables de ambiente...
};

En el archivo angular.json, puedes definir scripts de compilación separados para cada ambiente en la sección "architect" -> "build" -> "configurations":

"configurations": {
  "production": {
    "fileReplacements": [{
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }],
    "optimization": true,
    "outputHashing": "all",
    // más configuraciones...
  },
  "staging": {
    "fileReplacements": [{
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.staging.ts"
    }],
    "optimization": false,
    // más configuraciones...
  }
}

Estos scripts permitirán a Amplify seleccionar el archivo de configuración adecuado en base al ambiente que se está desplegando.

Configurando AWS Amplify

Ve a la consola de AWS Amplify y haz clic en "Connect app".
Elige "GitHub" como el proveedor de tu repositorio.
Autentícate con GitHub y selecciona el repositorio y la rama para tu aplicación.
En la configuración del build, selecciona "Angular" como el marco de trabajo y luego modifica el archivo amplify.yml que se genera automáticamente.

Por defecto, el comando de build para una aplicación Angular en Amplify es ng build. Sin embargo, queremos cambiar esto para que utilice los scripts de compilación que hemos definido en base al ambiente. Podemos hacer esto utilizando variables de ambiente de Amplify:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - ng build --configuration=$ENV_NAME
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths

:
      - node_modules/**/*

Aquí, $ENV_NAME es una variable de ambiente que puedes definir en la consola de AWS Amplify, en "App settings" -> "Environment variables". Deberías crear una variable de ambiente ENV_NAME para cada ambiente que quieras manejar. El valor de cada variable debería ser el nombre de la configuración correspondiente que definiste en angular.json (es decir, "production", "staging", etc.).

Haz clic en "Next" y luego en "Save and deploy". Amplify ahora construirá y desplegará tu aplicación.

Configurando Dominios Personalizados

Para utilizar un dominio personalizado, ve a "App settings" -> "Domain management" en la consola de AWS Amplify. Aquí puedes conectar un dominio que hayas comprado a través de Route 53 u otro registrador de dominios. Sigue las instrucciones para verificar tu dominio, configurar registros de DNS y asignar subdominios a diferentes ambientes de tu aplicación.

¡Y eso es todo! Ahora tienes un proyecto de Angular configurado con AWS Amplify que soporta múltiples ambientes, integración directa con GitHub y dominios personalizados. Cada vez que hagas push a una de tus ramas de GitHub, Amplify construirá y desplegará automáticamente tu aplicación utilizando las variables de ambiente correspondientes.