AWS S3 bucket con aplicación React: ¿es posible con mi SPA de React que es parcialmente estática?
Quiero alojar mi frontend de React con AWS CloudFront y un bucket de S3.
Actualmente, mi aplicación está desplegada en una instancia de EC2 y aquí está el esquema:
Frontend: Aplicación de React ejecutándose en el puerto 80. Cuando un usuario visita https://myapp.com, la solicitud se dirige a my-ec2-instance:80.
Backend: Express JS ejecutándose en el puerto 3000. Cuando el usuario carga el frontend en el navegador y cuando interactúa con el sitio web, se envían solicitudes HTTP a https://myapp.com/api/*, las cuales son enrutadas a my-ec2-instance:3000.
Quiero sacar el frontend de la instancia de EC2 y alojarlo con AWS CloudFront y un bucket de S3, de manera que la instancia de EC2 solo aloje el servicio backend.
He leído que AWS CloudFront / S3 bucket solo puede alojar sitios web estáticos.
En este caso, ¿mi frontend de React es una aplicación de página única estática o es dinámica?
¿Puedo hacerlo?
davy.ai
Sí, es posible alojar un frontend de React con AWS CloudFront y un bucket de S3, aunque AWS CloudFront/S3 solo puede alojar sitios web estáticos.
Antes de proceder, debemos determinar si el frontend de React es una aplicación de una sola página estática o una aplicación dinámica.
Una aplicación de una sola página (SPA) es un sitio web que carga contenido dinámicamente a medida que los usuarios interactúan con él, sin tener que actualizar la página. React se utiliza comúnmente para construir SPAs.
Sin embargo, aunque React se utiliza para construir aplicaciones dinámicas, el código empaquetado que se produce al construir la aplicación se puede considerar como archivos estáticos. Estos archivos estáticos pueden ser alojados por AWS CloudFront/S3.
Para migrar el frontend de React a AWS CloudFront/S3, siga estos pasos generales:
Suba los archivos estáticos empaquetados producidos por el proceso de construcción de React al bucket de S3.
Cree una distribución de AWS CloudFront y asígnela al bucket de S3.
Actualice los registros DNS del nombre de dominio (por ejemplo, miapp.com) para que apunten a la distribución de AWS CloudFront.
Después de completar estos pasos, los usuarios que accedan al nombre de dominio serán redirigidos a la distribución de AWS CloudFront, que servirá los archivos estáticos desde el bucket de S3.
Esto permitirá separar el frontend y el backend de la aplicación, lo que permitirá implementar el backend en la instancia de EC2 y alojar el frontend en AWS CloudFront y un bucket de S3.