0
1K
VistasEnrutador Vue.js: modo historial y AWS S3 (RoutingRules)
Tengo una aplicación Vue.js funcionando con Amazon S3 y Cloudflare.
Cuando abro el índice y busco /dashboard, todo funciona bien. Pero cuando abro una ruta como tablero directamente en una nueva pestaña o actualizo la página, recibo el siguiente error de S3:
404 Not Found Code: NoSuchKey Message: The specified key does not exist. Key: unternehmen RequestId: 6514F8A1F4C29235 HostId: +BVrPLJSGdzSYogzWZ4GMBXkgkdSJWRVJVhcSs4EI/lmMUR422aCtCxpBGU6AMe5VkS1UbEn/Lc=Solo lea que el problema es el modo de historial de Vue.js: https://router.vuejs.org/de/essentials/history-mode.html
Me gustaría resolver el problema con una regla de enrutamiento en mi Amazon S3 Bucket. ¿Cómo se vería Apache RewriteRule para S3?
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule>Intenté lo siguiente pero no funciona:
<RoutingRules> <RoutingRule> <Condition> <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals> </Condition> <Redirect> <HostName>domain.com</HostName> <ReplaceKeyWith>index.html</ReplaceKeyWith> </Redirect> </RoutingRule> </RoutingRules>Si lo hago así, solo obtengo mi encabezado y pie de página, pero nada más.
¡Gracias!
3 Respuestas
Responde la pregunta0
Sé que esta respuesta llega tarde, pero en caso de que alguien más esté buscando otra forma de resolver esto en la nube, no es necesario crear páginas personalizadas en s3 que redireccionen 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.
0
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: 
0
Estoy alojando un PWA estático hecho en Vue en S3 usando "Alojamiento de sitio 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 depósito S3. Ver imagen a continuación: 
Para mi depósito 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" ya que no activa la ruta correcta.
Espero que ayude.
Saludos, alex