Hébergement de site Web statique S3 achemine tous les chemins d'accès à Index.html

Question

Je suis à l'aide de S3 pour héberger une application javascript qui va utiliser HTML5 pushStates. Le problème est que si l'utilisateur signets tout de l'Url, il ne va pas résoudre quoi que ce soit. Ce dont j'ai besoin est la capacité de prendre toutes les demandes d'url et de servir jusqu'à la racine index.html dans mon compartiment S3, plutôt que de simplement faire la redirection. Puis mon javascript de l'application a pu analyser l'URL et le servir à la bonne page.

Est-il possible de dire à S3 pour servir la index.html pour toutes demandes d'URL au lieu de faire des redirections? Ce serait semblable à la configuration d'apache pour gérer toutes les demandes entrantes en servant un seul index.html comme dans cet exemple: http://stackoverflow.com/a/10647521/1762614. J'aimerais vraiment éviter de manquer un serveur web juste pour gérer ces routes. Faisant tout de S3 est très attrayant.

Answer 1

La façon dont j'ai été en mesure d'obtenir ce travail est comme suit:

Dans le de Modifier les Règles de Redirection de la section de la S3 de la Console de votre domaine, ajouter les règles suivantes:

<RoutingRules>
  <RoutingRule>
    <Condition>
    <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals >
     </Condition>
    <Redirect>
      <HostName>yourdomainname.com</HostName>
      <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

Ceci va rediriger tous les chemins qui aboutissent à une 404 non trouvé à la racine de votre domaine avec un hash-bang version de la trajectoire. Donc http://yourdomainname.com/posts vous redirigera vers http://yourdomainname.com/#!/postes il n'y a pas de fichier /posts.

Pour utiliser HTML5 pushStates cependant, nous avons besoin de prendre cette demande et d'établir manuellement la bonne pushState basé sur le hachage-bang chemin. Afin de l'ajouter à la partie supérieure de votre index.html fichier:

<script>
  history.pushState({}, "entry page", location.hash.substring(1));
</script>

Cette chope le hachage et la transforme en HTML5 pushState. À partir de ce point vous pouvez utiliser pushStates non-hash-bang chemins dans votre application.

Answer 2

Je cherchais une réponse à cette question moi-même. S3 semble ne prendre en charge que les redirections; vous ne pouvez pas simplement réécrire l'URL et renvoyer en mode silencieux une ressource différente. J'envisage d'utiliser mon script de génération pour simplement faire des copies de mon index.html dans tous les emplacements de chemin requis. Peut-être que cela fonctionnera pour vous aussi.

Answer 3

La solution de Mark n’est pas mauvaise, mais il existe une solution encore plus simple. Dans les propriétés de votre compartiment dans le document d'erreur, utilisez simplement le même fichier que le document d'index . Les frameworks JavaScript tels que Backbone, AngularJS, etc., fonctionneront tels quels et l'actualisation de la page sera entièrement prise en charge.