Solución:
Sé que esta respuesta llega tarde, pero en caso de que alguien más esté buscando otra forma de resolver esto en Cloudfront, no es necesario crear páginas personalizadas en s3 que redireccionan a los usuarios cuando no se encuentran las páginas. En lugar de hacerlo, se pueden crear respuestas de error personalizadas en la nube para la distribución.
Esto siempre redirigirá a /index.html en caso de que no se encuentre un archivo y eso hará que se active la ruta de la aplicación.
Estoy alojando una PWA estática hecha en Vue en S3 usando “Alojamiento de sitios web estático” y funciona como se esperaba. Lo que hice fue bastante simple, agregué esto:
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>403</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<ReplaceKeyWith></ReplaceKeyWith>
</Redirect>
</RoutingRule>
</RoutingRules>
A las Propiedades del bucket de S3. Vea la imagen a continuación:
Para mi bucket de S3, cada vez que intente acceder a un archivo que no existe, recibirá un 403 (prohibido) en lugar de un 404. Es por eso que cambié el HttpErrorCodeReturnedEquals a 403. También reemplacé el ReplaceKeyWith con una cadena vacía como “index.html” no activa la ruta correcta.
Espero que ayude.
Saludos, Alex
Si usa alojamiento estático en AWS S3 y esta es una aplicación SPA (React, Vue, Angular, etc.), debe configurar index.html como página de error:
