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

AWS Amplify es una herramienta de desarrollo que permite crear y desplegar aplicaciones móviles y web en la nube. En esta guía, desplegaremos un proyecto Gatsby en AWS Amplify con múltiples ambientes, cambiando el script de ejecución según la rama que se despliega. Para nuestro escenario, utilizaremos la integración con GitHub.

Requisitos Previos

1. Una cuenta de AWS.
2. Un repositorio GitHub con un proyecto Gatsby.
3. Un dominio personalizado.

Crear un App en AWS Amplify

1. Inicia sesión en tu cuenta de AWS y ve a la consola de AWS Amplify.
2. Haz clic en "Connect app" y luego selecciona "GitHub" como tu proveedor de repositorio.
3. En la pantalla de autorización de GitHub, proporciona las credenciales y selecciona el repositorio y la rama de tu proyecto Gatsby.

Configurar el Build Spec de Amplify

El archivo amplify.yml se usa para definir cómo AWS Amplify construye y despliega tu aplicación. Aquí es donde podemos definir diferentes scripts de compilación para diferentes ramas.

En la raíz de tu proyecto, crea un archivo llamado amplify.yml con el siguiente contenido:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - 'case $AWS_BRANCH in 
            "main") 
              npm run build:prod 
              ;; 
            "develop") 
              npm run build:dev 
              ;; 
            *) 
              npm run build:prod 
              ;; 
           esac'
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Este archivo amplify.yml ejecuta diferentes comandos de compilación en función de la rama que se está desplegando. Asegúrate de tener definidos estos scripts en tu package.json.

Crear Múltiples Ambientes

1. En la consola de AWS Amplify, selecciona la aplicación que acabas de crear.
2. Haz clic en "Branches" en el panel izquierdo.
3. Haz clic en "Connect branch" para conectar una nueva rama.
4. Sigue los mismos pasos que usaste para conectar tu rama principal, pero esta vez selecciona tu rama de desarrollo.

Cada rama que conectes en AWS Amplify será tratada como un entorno separado. AWS Amplify creará una URL única para cada ambiente, permitiéndote tener una versión separada de tu aplicación para cada rama.

Apuntar un Dominio Personalizado

1. En la consola de AWS Amplify, selecciona tu aplicación.
2. Haz clic en "Domain management" en el panel izquierdo.
3. Haz clic en "Add domain" y sigue los pasos para agregar tu dominio personalizado.
4. Una vez que hayas agregado tu dominio, puedes configurar el mapeo de rutas para apuntar diferentes subdominios a diferentes ambientes.

Con esto, tienes configurado un despliegue de múltiples ambientes para tu proyecto Gatsby en AWS Amplify. La integración con GitHub permite que cada cambio de código en tus ramas desencadene un nuevo despl

iegue automáticamente, haciendo que la actualización y el mantenimiento de tus aplicaciones sean fluidos y eficientes.