Desplegando proyectos en multiples frameworks SSR en AWS Amplify y múltiples ambientes - Parte 3: Nuxtjs

Amazon Web Services (AWS) ofrece Amplify, un conjunto de herramientas y servicios que pueden ayudarte a desarrollar aplicaciones seguras, escalables y flexibles. En este artículo, te enseñaré cómo desplegar un proyecto NUXT.js con TypeScript en AWS Amplify, con la capacidad de tener múltiples ambientes basados en la rama de Git desde la cual estás desplegando.

Para facilitar el proceso, este tutorial estará dividido en varios pasos claros y manejables.

Requisitos previos

• Un proyecto NUXT.js configurado con TypeScript.
• Una cuenta de AWS.
• Repositorio en GitHub del proyecto NUXT.js con TypeScript.

Paso 1: Configuración inicial de AWS Amplify

1. Accede a la consola de AWS y navega hasta AWS Amplify.
2. Haz clic en "Connect app" y selecciona GitHub como el proveedor de repositorio.
3. Autentica tu cuenta de GitHub si es necesario y selecciona el repositorio y la rama que deseas desplegar.

Paso 2: Configuración del Build

Aquí es donde vamos a indicarle a Amplify cómo construir nuestra aplicación. Amplify utiliza un archivo llamado amplify.yml para esto.

Crea un archivo amplify.yml en la raíz de tu proyecto con el siguiente contenido:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn generate
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Esta configuración está diciendo a Amplify que instale las dependencias con yarn install y luego genere la aplicación con yarn generate. Los artefactos de la compilación (el resultado) estarán en el directorio dist.

Paso 3: Desplegando múltiples ambientes

AWS Amplify permite tener diferentes "ambientes" para tu aplicación. Un ambiente es un entorno de despliegue único con su propio backend y recursos de AWS.

Para configurar un nuevo ambiente:

1. En la consola de Amplify, selecciona tu aplicación.
2. Haz clic en "All environments" en la parte superior de la página.
3. Haz clic en "Add environment" y sigue las instrucciones para crear un nuevo ambiente.

Para configurar múltiples entornos con diferentes configuraciones de compilación, debes modificar el archivo amplify.yml como sigue:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - if [ "${AWS_BRANCH}" = "main" ]; then yarn build:prod; else yarn build:dev; fi
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

En este caso, AWS Amplify utilizará la variable de entorno ${AWS_BRANCH} para determinar la rama actual y ejecutará el comando de compilación correspondiente.

Paso 4: Apuntamiento de un dominio personalizado

Finalmente, puedes apuntar tu dominio personalizado a tu aplicación de Amplify.

1. En la consola de Ampl

ify, selecciona tu aplicación.

1. Ve a la pestaña "Domain management".
2. Haz clic en "Add domain" y sigue las instrucciones para agregar tu dominio personalizado.

Es importante recordar que debes tener en cuenta los registros DNS que necesitarás agregar o modificar para que tu dominio personalizado apunte a tu aplicación de Amplify.

Y eso es todo. Ahora has configurado tu proyecto NUXT.js con TypeScript para desplegarse en AWS Amplify con diferentes configuraciones de compilación según la rama de git y apuntando a un dominio personalizado.