Te recomendamos que pruebes esta respuesta en un ambiente controlado antes de pasarlo a producción, saludos.
Solución:
Cuando tu visitas http://mywebsite.com la solicitud llegará al index.html archivo en S3. Luego puede hacer clic en un botón e ir a http://mywebsite.com/stats que es una ruta interna de su aplicación React. Por lo tanto, no activará ninguna solicitud de backend.
Pero si recargas la página, http://mywebsite.com/stats se enviará a S3 ya que su navegador no sabe que está ejecutando una aplicación React.
S3 devolverá el error 403 con index.html y Cloudfront le enviará el error.
La solución es usar una función edge lambda en cloudfront. Aquí un ejemplo:
const path = require('path')
exports.handler = (evt, ctx, cb) =>
const request = evt.Records[0].cf
if (!path.extname(request.uri))
request.uri = '/index.html'
cb(null, request)
Fuente: https://hackernoon.com/how-to-host-a-single-page-application-with-aws-cloudfront-and-lambda-edge-39ce7b036da2
Amazon CloudFront puede ser complicado con su configuración y la depuración de un código de error; rastrearlo hasta su causa raíz puede llevar varias horas. Sin embargo, es posible que desee realizar las siguientes comprobaciones antes de acceder a los registros.
¡Nombre del cubo!
Los nombres de los depósitos deben coincidir con los nombres del sitio web que está alojando.
Por ejemplo, para albergar tu-dominio.com sitio web en Amazon S3, crearía un depósito llamado tu-dominio.com.
Para alojar un sitio web bajo www.tu-dominio.comle pondrías nombre al balde www.tu-dominio.com.
Es una buena práctica crear depósitos tanto para su-dominio.com como para www.su-dominio.com.
Use la lógica existente en su configuración/ajustes para cualquiera de estos cubos y utilícelo para atender el static sitio web. Utilice el otro depósito para redirigir la solicitud al depósito original.
Honestamente, esto no le causaría ningún problema ya que integró su sistema con Amazon CloudFront, que se puede configurar para usar un depósito de Amazon S3 de cualquier nombre.
Con Amazon CloudFront, los usuarios que visiten su dominio obtendrán datos directamente de la distribución de CloudFront que, a su vez, almacena en caché el contenido de nuestro depósito S3.
Configuración de los Ajustes de Origen de la distribución.
Al crear una distribución con Amazon CloudFront, tome nota del punto de enlace de Amazon S3 asociado con el nombre de dominio de origen. Asegúrese de utilizar el punto final del sitio web y NO el punto final REST. No utilice el punto de enlace sugerido automáticamente por CloudFront.
Hay una diferencia en el comportamiento como se explica en la documentación oficial de Amazon Web Services
4XX ¡Código de error!
Desde los registros de su consola, sugiere que la instancia de distribución está tratando de acceder a un elemento, página o recurso prohibido y, por lo tanto, el código de estado 403.
Mientras que el 404 es simplemente el resultado de una página no encontrada. Sin embargo, después de la redirección de error, como se manejó en su configuración, el usuario es redirigido a index.html donde se encuentra con el 403.
Más información sobre: Cómo CloudFront procesa y almacena en caché los códigos de estado HTTP 4xx y 5xx desde su origen
Otros sospechosos habituales incluyen las configuraciones de almacenamiento en caché para la distribución de Amazon CloudFront, la configuración de AWS Route53 y Amazon Certificate Manager.
Como se mencionó al principio, puede ser bastante desconcertante rastrear tales errores. Háganos saber si lo anterior ayuda. Además, le agradecería mucho si pudiera publicar actualizaciones sobre sus investigaciones y hallazgos.
Gracias por leer
Te mostramos reseñas y puntuaciones
Si entiendes que ha sido provechoso este post, sería de mucha ayuda si lo compartes con más entusiastas de la programación y nos ayudes a difundir nuestro contenido.