En esta guía vamos a ver a fondo cómo desplegar una aplicación ReactJS en AWS Amplify. Te mostraré cómo configurar una aplicación ReactJS local en AWS Cloud9 y subirla a AWS Amplify para producción. También incluiré los pasos para desplegar la app desde un repositorio de GitHub.
Te explicaré cómo usar AWS Amplify para alojar la app con Amazon S3 y CloudFront, logrando una distribución ágil de la aplicación web. Y para cerrar con broche de oro, te mostraré cómo asignarle un dominio personalizado a tu app.
¿Por qué usar AWS Amplify? AWS Amplify es un conjunto de herramientas y servicios que ayudan a los desarrolladores a crear y desplegar aplicaciones web y móviles full-stack en AWS. Con AWS Amplify puedes crear en minutos un backend con autenticación, datos, almacenamiento y mucho más. También puedes construir visualmente la interfaz de frontend con la integración de diseño a código de Figma y conectar la UI con el backend en pocos clics.
Amplify es compatible con una amplia variedad de frameworks web y está construido sobre la nube segura y escalable de AWS. Así que, ya sea que estés empezando o lleves años programando, AWS Amplify te puede facilitar mucho la vida.
Requisitos previos del tutorial
Para este tutorial necesitarás:
- Una cuenta de AWS.
- Una cuenta de GitHub para alojar repositorios de Git.
- Conocimientos básicos del uso de Git CLI para enviar commits a un repositorio remoto.
- Un dominio personalizado (opcional).
Crear un entorno de AWS Cloud9
AWS Cloud9 es un IDE potente basado en la nube que les permite a los desarrolladores escribir, ejecutar y depurar código desde el navegador. Es ideal para aplicaciones serverless y ReactJS, y soporta varios lenguajes sin necesidad de instalaciones locales.
En este paso vamos a crear un entorno en AWS Cloud9 y lo usaremos para crear una aplicación ReactJS local.
Abre la consola de AWS Cloud9 en https://console.aws.amazon.com/cloud9/.
Empezaremos creando un entorno de Cloud9. Se ejecutará en una instancia T3.small de Amazon Linux 2. Configuraremos el acceso a la instancia subyacente con AWS Systems Manager. Esto nos permitirá conectarnos por SSH a la instancia sin necesidad de abrir puertos de entrada en su grupo de seguridad. Durante la configuración, Cloud9 crea roles IAM para acceder a los servicios de AWS en tu nombre.
Desde la página del entorno, selecciona tu instancia de Cloud9 y haz clic en el enlace Open. Listo, ya estás conectado a tu IDE de Cloud9.
Antes de crear la app de ReactJS, verifica que tu instancia esté ejecutando Node.js versión 12.x y npm versión 6.x o superior.
React utiliza estas versiones para lograr un rendimiento y una compatibilidad óptimos al construir interfaces de usuario.
Crear una app ReactJS local
Vamos a configurar una aplicación React en AWS Cloud9 para hacer pruebas locales. Desde el directorio '~/environment' vamos a crear un nuevo proyecto de React llamado "cloud-wanderer-blog". Ejecuta los siguientes comandos:
$ npx create-react-app cloud-wanderer-blog
$ cd cloud-wanderer-blog
$ npm start
Para iniciar la app de React, ubícate en el directorio del proyecto 'cloud-wander-blog' y ejecuta el comando 'npm start'.
AWS Cloud9 no usa localhost para acceder a tus aplicaciones en ejecución. En su lugar, ofrece una función de vista previa desde el propio IDE de Cloud9.
En el menú superior del IDE de AWS Cloud9 selecciona Preview > Preview Running Application. Se abrirá una nueva pestaña en tu entorno con la app de React en ejecución.
Crear un repositorio en GitHub y agregarlo a Cloud9
Inicia sesión en tu cuenta de GitHub y selecciona 'New repository' desde el botón '+' en la esquina superior derecha. Este repositorio almacenará los archivos y la configuración de la aplicación React. A mi nuevo repositorio lo llamé cloud-wanderer.
No marques 'Add a README file', porque al instalar React en Cloud9 ya se creó el archivo README.
Sube tu aplicación React desde Cloud9 al nuevo repositorio remoto en GitHub. Puedes agregar los archivos desde GitHub o usar Git CLI en tu instancia de Cloud9.
Consulta el siguiente enlace de GitHub para ver cómo subir archivos: https://docs.github.com/en/repositories/working-with-files/managing-files/adding-a-file-to-a-repository
Ten en cuenta que cuando inicialicé mi repositorio Git local en Cloud9 se creó una rama 'master'. Para mantener la coherencia con mi repositorio remoto en GitHub y dejarlo listo a futuro, renombré mi rama local de 'master' a 'main'. Este cambio de 'master' a 'main' forma parte de una iniciativa más amplia para promover un lenguaje más inclusivo.
Instalar Amplify CLI
Con nuestro entorno de staging ya listo en Cloud9, vamos a configurar un entorno de producción en AWS Amplify. Para configurar la app de Amplify, instalé el Amplify CLI desde '~/home/ec2-user' en mi instancia de Cloud9. Para que el Amplify CLI pueda abrir archivos y enlaces hacia la consola de administración de AWS, instalé xdg-utils.
$ cd
$ sudo yum install xdg-utils -y
$ npm install -g @aws-amplify/cli
Configurar Amplify CLI
Para configurar Amplify CLI en tu máquina local, hay que conectarlo con tu cuenta de AWS. Para esto usamos 'amplify configure'. Haz clic en el enlace que aparece para iniciar sesión en la consola de AWS.
Vuelve a la terminal de Cloud9 y especifica la región de AWS. Yo elegí la región eu-west-1.
Amplify CLI te pedirá crear un usuario IAM. Haz clic en el enlace de creación de usuario, que abrirá la página de creación de usuarios IAM. Ingresa un nombre de usuario y haz clic en Next. Puedes ponerle el nombre que quieras, pero yo lo llamaré "amplify-cli-admin". Haz clic en el botón Next.
Selecciona Attach policies directly y elige AdministratorAccess-Amplify como política de permisos.
En la página de revisión, comprueba que todo esté en orden y haz clic en Create user.
Esto te llevará a la página con la lista de usuarios. Selecciona el usuario que acabas de crear. En la página de detalles del usuario, abre la pestaña Security credentials. Desplázate hacia abajo hasta Access keys y haz clic en Create access keys.
Para el caso de uso, selecciona la opción Command Line Interface (CLI). Acepta la advertencia y haz clic en Next.
Descarga una copia del archivo CSV con las claves de acceso del usuario IAM. Guarda el archivo en un lugar seguro.
Vuelve a la consola de Cloud9 y presiona Enter. Ingresa los valores de la Access key y la Secret access key. Deja el valor por defecto para el nombre del perfil. Con esto queda configurado el Amplify CLI en la región seleccionada y con las credenciales de seguridad.
Inicializar la app de Amplify
Ejecuta el comando 'amplify init' para crear un nuevo proyecto de Amplify. Esto deja lista la aplicación React para Amplify. Amplify es lo suficientemente inteligente como para sugerir una configuración por defecto a partir del directorio cloud-wanderer-blog. Puedes aceptar esos valores presionando 'Y' o rechazarlos y definir tus propias preferencias presionando 'N'.
$ cd ~/environment/cloud-wanderer-blog/
$ amplify init
Para autenticarte, elige AWS Profile. Selecciona el perfil por defecto que configuraste en el paso anterior. De lo contrario, elige Access Keys e ingresa manualmente los IDs de Access Key y Secret Access Key.
Ve a la consola de Amplify y revisa la app de Amplify desplegada desde el Amplify CLI.
Conectar Amplify con el repositorio de GitHub
Ahora vamos a conectar nuestra app de Amplify con el repositorio de GitHub. Esto facilita mucho el proceso de CI/CD.
Desde la consola de Amplify, abre la pestaña del entorno de hosting de la app de Amplify.
Autoriza a Amplify a conectarse con tu repositorio de GitHub. Agrega el repositorio y la rama de GitHub.
En Build settings selecciona 'dev' como entorno. Crea un rol IAM para que Amplify pueda acceder a tus recursos. Amplify detecta automáticamente la configuración de build por defecto. Si tienes una configuración distinta, puedes editar el script Yaml.
Una vez listo, revisa la configuración y haz clic en Save and deploy para finalmente desplegar la aplicación.
El proceso de aprovisionamiento, build y despliegue tomará unos minutos.
La aplicación de Amplify ya queda disponible desde el enlace del endpoint.
Probar el despliegue continuo
A continuación vamos a probar el despliegue continuo. Para este paso modifiqué App.js, la página de inicio de React, enlazándola con una segunda página. Hice una vista previa para verificar el cambio localmente.
Usando Git CLI en Cloud9 envié el cambio al repositorio de GitHub. AWS Amplify detectó automáticamente esos cambios e inició un nuevo proceso de build y despliegue.
Una vez completado, recarga la app de Amplify en el navegador y verás los cambios.
El VISIT Cloud Wanderer BLOG queda enlazado a la nueva página.
Desplegar CloudFront para alojar contenido estático
Usar Amazon CloudFront es clave para la velocidad de tu sitio web. CloudFront cachea tu contenido en las ubicaciones Edge de AWS y lo entrega a tus usuarios con mayor rapidez.
CloudFront se puede agregar desde Amplify usando S3 como servidor de origen. La salvedad de este método es que no se puede modificar la distribución de CloudFront, ya que al usar la consola de Amplify los recursos se despliegan en una cuenta administrada por AWS.
Otra opción es desplegar CloudFront desde el Amplify CLI.
El comando 'amplify add hosting' configura un bucket de S3 y una distribución de CloudFront para cachear tu contenido estático. Podrás acceder y administrar tanto el bucket de S3 como la distribución de CloudFront desde tu cuenta de AWS.
Ejecuta el comando 'amplify add hosting'. Selecciona Amazon CloudFront and S3. Ingresa un nombre para el bucket de S3.
Sube tus cambios ejecutando 'amplify publish'. Esto carga los artefactos del build y el contenido estático al nuevo bucket de S3. CloudFront servirá el contenido estático desde las ubicaciones Edge para mejorar los tiempos de carga.
Con AWS CLI podemos listar los objetos del bucket de S3 recién creado:
$ aws s3 ls s3://cloud-wanderer-bucket-dev - region eu-west-1
Al desplegar CloudFront y S3 se agregan nuevas configuraciones al directorio de Amplify. Estos cambios deben confirmarse y enviarse a tu repositorio remoto en GitHub.
Comportamiento de caché de CloudFront
Usa Curl para verificar que CloudFront esté cacheando el contenido estático.
En la salida de Curl, fíjate en el header x-cache. 'Hit from cloudfront' indica que CloudFront está cacheando el contenido. En cambio, 'Miss from cloudfront' significa que tu contenido no se está cacheando.
No te preocupes si en el primer intento aparece 'Miss from cloudfront'. Para que el contenido se pueda cachear, primero hay que acceder a él al menos una vez.
Agregar un dominio personalizado
Tu endpoint por defecto de Amplify se ve similar a https://main.d335ddgrzlw9s5.amplifyapp.com/
Para que sea más fácil acceder a tu app de Amplify, vamos a configurarla con un dominio personalizado.
Para este paso voy a agregar el dominio 'cloudwanderer.life' a mi app de Amplify. Compré el dominio 'cloudwanderer.life' en GoDaddy.
Abre la consola de Route 53 en https://console.aws.amazon.com/route53/
Haz clic en Hosted Zones. Elige Create Hosted Zone. Ingresa tu nombre de dominio y haz clic en Create. Cuando creas una hosted zone, Route 53 le asigna automáticamente cuatro name servers a la zona.
En tu cuenta de hosting (GoDaddy, Google Domains), actualiza el DNS con los name servers de Route 53. Así se le da a Route 53 el control del DNS del dominio.
Ten en cuenta que la propagación del DNS puede tardar hasta 48 horas en surtir efecto en todo internet, debido a los valores TTL (Time to Live) configurados en los servidores DNS de todo el mundo.
Desde la consola de Amplify ya podemos servir nuestra aplicación de Amplify usando el dominio personalizado cloudwanderer.life
En la consola de Amplify, haz clic en Domain Management en el menú izquierdo. Luego haz clic en el botón Add Domain.
Aquí, el menú desplegable te muestra el dominio alojado en Route53. Elige ese dominio y haz clic en Configure domain.
Amplify creará registros CNAME en Route53 para verificar la propiedad del dominio.
Esto configurará la app de Amplify con tu dominio (este proceso tarda entre 5 y 20 minutos).
Una vez listo, podrás acceder a tu app de Amplify desde tu dominio personalizado.
En este tutorial te mostré cómo usar el Amplify CLI para construir y desplegar una aplicación de React. Primero creamos una app de React local en Cloud9. Luego instalamos y configuramos el Amplify CLI. Después desplegamos la app de React en Amplify usando el Amplify CLI.
Vimos cómo conectar la app de React en Amplify con GitHub. Para mejorar el rendimiento de la app, la configuramos con CloudFront. Por último, le asignamos a nuestra app de Amplify un dominio personalizado.
¡Espero que este tutorial te haya sido útil y te deseo mucho éxito con el despliegue de tu aplicación!