Rediriger toutes les demandes HTTP AWS S3 vers index.html pour AngularJS HTML5Mode

Question

Comment puis-je rediriger toutes les demandes vers mon site Web statique AWS S3 vers index.html afin de pouvoir utiliser le mode HTML5 d'AngularJS?

J'ai récemment appris (à mon plaisir sans fin) qu'il est possible d'utiliser AngularJS sans le # dans l'URL en utilisant HTML5 Mode. Cependant, je sais de this answer que cela nécessite une certaine configuration sur le serveur, puisque toutes les demandes doivent être redirigées vers le bon fichier html (dans ce cas, index.html) pour que cela fonctionne. J'utilise l'hébergement Web statique d'AWS S3 pour mon site. J'ai essayé d'ajouter ceci à mes règles redirection:

<RoutingRules> 
    <RoutingRule> 
     <Redirect> 
      <ReplaceKeyWith>/</ReplaceKeyWith> 
     </Redirect> 
    </RoutingRule> 
</RoutingRules> 

et

<RoutingRules> 
    <RoutingRule> 
     <Redirect> 
      <ReplaceKeyWith>index.html</ReplaceKeyWith> 
     </Redirect> 
    </RoutingRule> 
</RoutingRules> 

mais je reçois des problèmes avec trop de redirections.

Existe-t-il un moyen de faire le type de redirection nécessaire dans AWS S3 avec l'hébergement de site Web statique?

Answer 1

Vous pouvez utiliser AWS CloudFront pour votre cas d'utilisation. Configurez le compartiment S3 derrière CloudFront et ajoutez index.html comme route par défaut. Toujours si la page est actualisée dans une route angulaire (par exemple/home), AWS CloudFront recherchera un fichier /home.html dans S3 et retournera 404: Réponse non trouvée. Cependant, il existe une solution de contournement pour cela, où vous pouvez configurer une réponse d'erreur personnalisée pour le code d'erreur 404: Not Found HTTP vers le chemin de la page de réponse /index.html.

Pour plus de détails, voir le billet de blog Using AWS CloudFront to serve an SPA hosted on S3.