Antes de comenzar, asegúrese de tener los siguientes requisitos previos:

• Una cuenta de AWS
• Node.js y npm instalados en su máquina
• Una aplicación React creada con create-react-app o una herramienta similar
• La CLI de AWS Amplify instalada en su máquina

Paso 1: inicialice el proyecto Amplify

Primero, navegue al directorio raíz de su aplicación React y ejecute el siguiente comando para inicializar el proyecto Amplify:

amplify init

Esto le hará algunas preguntas para configurar su proyecto Amplify. Siga las indicaciones para especificar el nombre del proyecto, el entorno y otros detalles. Asegúrese de seleccionar “JavaScript” como marco de interfaz.

Paso 2: conecte la aplicación a la consola de Amplify

A continuación, debemos conectar la aplicación a la consola de Amplify para que pueda implementarse y alojarse. Ejecute el siguiente comando para hacer esto:

amplify console

Esto abrirá la consola de Amplify en su navegador y le pedirá que inicie sesión en su cuenta de AWS. Siga las indicaciones para completar el proceso de inicio de sesión y conecte su aplicación a la consola de Amplify.

Paso 3: agregue alojamiento al proyecto Amplify

Ahora que nuestra aplicación está conectada a la consola de Amplify, debemos agregar alojamiento al proyecto de Amplify. Ejecute el siguiente comando para hacer esto:

amplify add hosting

Esto le pedirá que seleccione un entorno de implementación y especifique la configuración de compilación para su aplicación. Asegúrese de seleccionar “Producción” como entorno y especifique el comando de compilación y el directorio de salida para su aplicación. Para un proyecto create-react-app, el comando de compilación es npm run-script build y el directorio de salida es build.

Paso 4: implementar la aplicación

Con el alojamiento agregado al proyecto Amplify, ahora estamos listos para implementar la aplicación. Ejecute el siguiente comando para hacer esto:

amplify publish

Esto creará e implementará su aplicación en la consola de Amplify. Una vez que se complete la implementación, verá un mensaje que indica la URL de su aplicación. Puede visitar esta URL para ver su aplicación en vivo en la web.

Paso 5: personaliza la configuración de alojamiento

La consola de Amplify proporciona una serie de opciones de personalización para la configuración de alojamiento de su aplicación. Puede acceder a estas opciones haciendo clic en la pestaña “Alojamiento” en la consola de Amplify.

Algunas de las opciones que puede personalizar incluyen:

• Nombre de dominio: puede especificar un nombre de dominio personalizado para su aplicación.
  • Haga clic en la pestaña “Dominios personalizados” y siga las indicaciones para agregar y verificar su dominio
• Certificados SSL/TLS: puede proteger su aplicación con un certificado SSL/TLS
  • Haga clic en la pestaña “Certificados SSL/TLS” y siga las indicaciones para solicitar y validar un certificado.
• Redirecciones y reescrituras: puede configurar redirecciones y reescrituras para su aplicación
  • Haga clic en la pestaña “Redirecciones y reescrituras” y especificando las reglas que desea aplicar.

Paso 6: Supervisar y actualizar la aplicación

Una vez que su aplicación esté implementada, puede monitorear su rendimiento y realizar actualizaciones según sea necesario. La consola de Amplify proporciona una serie de herramientas y características disponibles para monitorear y actualizar una aplicación React implementada en AWS Amplify.

Aquí hay una explicación más detallada de cada uno de estos:

• Implementación continua

Con la implementación continua, cualquier cambio que realice en el código base de su aplicación se implementará automáticamente en la consola de Amplify. Esto significa que tan pronto como envíe un cambio a su repositorio de Git, la consola de Amplify recogerá el cambio y comenzará una nueva implementación. Esto facilita mantener su aplicación actualizada sin tener que activar manualmente una nueva implementación cada vez que realiza un cambio.

• Control de versiones

La consola Amplify se integra con Git, lo que le permite realizar un seguimiento de los cambios en su base de código y retroceder a versiones anteriores si es necesario. Esto es útil si realiza un cambio en su código que rompe su aplicación, ya que puede volver fácilmente a una versión anterior para solucionar el problema.

• Pruebas

La consola de Amplify incluye una herramienta de prueba integrada que le permite probar su aplicación en diferentes dispositivos y navegadores. Esto ayuda a garantizar que su aplicación sea compatible con una amplia gama de plataformas y que los usuarios puedan acceder a ella con diferentes dispositivos y navegadores.

• Configuración de compilación personalizada

Puede personalizar la configuración de compilación para su aplicación modificando el archivo amplify.yml en el directorio raíz de su proyecto. Este archivo define las dependencias y los pasos de compilación para su aplicación, y puede actualizarlo para especificar configuraciones personalizadas o agregar funciones adicionales.

• Variables de entorno

Las variables de entorno se utilizan para almacenar datos confidenciales, como claves de API o credenciales de bases de datos, de forma segura. La consola de Amplify le permite administrar las variables de su entorno desde la interfaz web, lo que facilita su actualización según sea necesario. Esto es útil si necesita cambiar sus claves API o actualizar las credenciales de su base de datos, ya que puede hacerlo sin modificar su base de código.

Conclusión

En este artículo, hemos visto cómo implementar una aplicación React en AWS Amplify. Al seguir los pasos descritos anteriormente, puede alojar fácilmente su aplicación en la web y aprovechar las numerosas funciones y herramientas que ofrece la plataforma Amplify. Ya sea que esté creando una aplicación web simple o una aplicación empresarial compleja, AWS Amplify facilita la puesta en marcha de su aplicación de forma rápida y segura.

Gracias por llegar hasta aquí, si encuentras esto útil no olvides dejar un👍🏼y suscribirse para recibir más contenido.

Si le interesa, puede echar un vistazo a algunos de los otros artículos que he escrito recientemente sobre AWS y Laravel:

• Todo lo que necesita saber para comenzar con Amazon SQS
• Cómo usar IP estática para AWS Lambda