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

AWS Amplify es una serie de herramientas y servicios que puede ayudar a los desarrolladores web y móviles a crear aplicaciones escalables y completas. AWS Amplify facilita el despliegue y la actualización de aplicaciones web, incluyendo aplicaciones React creadas con TypeScript. En este artículo, aprenderás cómo desplegar una aplicación React con TypeScript en AWS Amplify con múltiples ambientes a través del comando de construcción y cómo conectarlo con GitHub para la integración continua y la entrega (CI/CD).

Antes de comenzar, debes tener un proyecto de React creado con TypeScript y subido a un repositorio de GitHub. También necesitas una cuenta de AWS y debes haber configurado AWS Amplify.

1. Conectar tu repositorio de GitHub con AWS Amplify

1. Inicia sesión en tu consola de AWS y ve a AWS Amplify.
2. Haz clic en 'Connect App'.
3. Selecciona 'GitHub' como el proveedor de repositorio.
4. Autentica tu cuenta de GitHub y selecciona el repositorio y la rama que deseas conectar.

2. Configuración del entorno de compilación

Aquí es donde especificamos el comando de compilación dependiendo de la rama que se despliega. Para hacer esto, necesitas crear un archivo amplify.yml en la raíz de tu repositorio. Este archivo debe tener un contenido similar al siguiente:

version: 1
backend:
  phases:
    build:
      commands:
        - '# No Backend'
frontend:
  phases:
    preBuild:
      commands:
        - if [ "${AWS_BRANCH}" = "master" ]; then npm install && npm run build:prod; fi
        - if [ "${AWS_BRANCH}" = "dev" ]; then npm install && npm run build:dev; fi
    build:
      commands:
        - '# No build commands'
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

En este ejemplo, si la rama es "master", se ejecutará el comando npm run build:prod y si la rama es "dev", se ejecutará el comando npm run build:dev.

3. Crear múltiples ambientes

Ahora, tienes que configurar diferentes entornos en AWS Amplify. Puedes hacer esto desde la consola de AWS Amplify:

1. Ve a tu aplicación en AWS Amplify.
2. Haz clic en 'All apps', luego en tu aplicación y finalmente en 'Backend environments'.
3. Haz clic en 'Add environment' y sigue las instrucciones para crear un nuevo entorno.

4. Asignar un dominio personalizado

Para asignar un dominio personalizado a tu aplicación:

1. Navega a tu aplicación en AWS Amplify y haz clic en 'Domain management' en el menú de la izquierda.
2. Haz clic en 'Add domain' y sigue las instrucciones para agregar tu dominio personalizado.
3. Después de agregar tu dominio, puedes configurar las rutas a tus diferentes entornos.

¡Y eso es todo! Ahora deberías ser capaz de desplegar tu proyecto de React con TypeScript en AWS Amplify con múltiples ambientes, utilizando diferentes comandos de compilación dependiendo de la rama que se despliegue, todo

conectado con GitHub para CI/CD. Además, también puedes asignar un dominio personalizado a tu aplicación.