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

AWS Amplify es un conjunto de herramientas y servicios que nos permiten construir aplicaciones web y móviles escalables y seguras. En esta guía, te mostraré cómo desplegar un proyecto Next.js en AWS Amplify con múltiples ambientes, cambiando el script de ejecución en función de la rama que se despliega. Además, veremos cómo integrarlo con GitHub y apuntarlo a un dominio personalizado.

1. Preparación del proyecto NEXT.js

Para comenzar, asegúrate de tener un proyecto Next.js listo para desplegar. Tu package.json debe incluir los siguientes scripts:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

2. Configuración de AWS Amplify

Para iniciar, necesitamos una cuenta en AWS. Si aún no la tienes, puedes crear una aquí.

Una vez en AWS, dirígete a AWS Amplify y haz clic en Connect app. Luego, selecciona GitHub como tu repositorio de código fuente.

3. Integración con GitHub

Necesitarás autorizar a AWS Amplify para acceder a tus repositorios de GitHub. Una vez hecho esto, selecciona el repositorio y la rama que contiene tu proyecto Next.js.

4. Configuración de los scripts de build

Amplify te preguntará sobre cómo construir y desplegar tu aplicación. Aquí es donde puedes definir diferentes scripts de compilación para diferentes ramas.

Por defecto, Amplify utiliza el siguiente script de build:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Si tienes múltiples ramas y cada una necesita un comando de construcción diferente, puedes modificar el archivo amplify.yml para adaptarse a tus necesidades. Por ejemplo, si tienes una rama de desarrollo que requiere un comando de compilación diferente, podrías tener algo como esto:

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

En el ejemplo anterior, estamos usando la variable de entorno AWS_BRANCH para comprobar qué rama se está construyendo. Según eso, ejecutamos un comando de compilación diferente.

5. Crear múltiples ambientes

AWS Amplify te permite tener múltiples ambientes, cada uno correspondiente a una rama en tu repositorio de GitHub. Para crear un nuevo ambiente, haz clic en Add environment en el tablero de Amplify, elige una rama existente o crea una nueva, y sigue las instrucciones.

6. Apuntando a un dominio personalizado

Finalmente, para conectar tu dominio personalizado, navega a `App settings >

Domain management en el tablero de Amplify. Haz clic en Add domain`, introduce tu dominio, y sigue las instrucciones para verificarlo y conectarlo a tu aplicación.

Y ahí lo tienes, has desplegado tu aplicación Next.js en AWS Amplify con múltiples ambientes, cada uno correspondiente a una rama diferente en tu repositorio de GitHub, y has conectado tu dominio personalizado a tu aplicación.

Espero que esta guía te haya ayudado a comprender cómo aprovechar AWS Amplify para desplegar y gestionar tu aplicación Next.js. ¡Feliz codificación!