Je rencontre un problème avec mon projet Angular 6 hébergé sur un compartiment S3 avec Cloudfront. À chaque actualisation, le projet semble perdu et je suis redirigé vers une page qui dit:
Qu'est-ce qui peut causer cela? Lorsque je rafraîchis sur mon serveur local, je suis simplement déconnecté et redirigé vers la page de connexion. Je pensais que cela pourrait être un problème avec les paramètres de mon compartiment S3, alors j'ai téléchargé le projet dont je savais qu'il était correctement configuré (j'avais un projet Angular 5 qui n'avait pas le problème d'actualisation). Mais, la même chose s'est produite, donc il semble que c'est quelque chose dans mon projet.
Serait-ce la manière dont je compile les fichiers? J'utilise 'ng build'
Toute aide est appréciée! Merci beaucoup.
4 Réponses :
Dans votre bucket s3, les fichiers créés doivent avoir un accès "public"
Si vous venez de modifier les autorisations, la réplication des modifications dans les zones de disponibilité s3 peut prendre quelques minutes et le cache cloudfront lit les nouvelles autorisations
Cela dépend de la structure de votre projet AWS S3. Je suppose que vous avez donné un accès public aux fichiers (liste de contrôle d'accès) avec la stratégie de compartiment appropriée et que vous avez placé la construction dans le répertoire racine.
Assurez-vous que dans les propriétés du bucket (hébergement de site statique) vous avez ajouté index.html pour le champ du document d'erreur.
Assurez-vous également d'ajouter des pages d'erreur dans votre distribution cloudfront, créez 2 réponses d'erreur personnalisées pour les codes 403 et 404 qui pointent vers votre index.html et renvoient un code de réponse de 200.
Modifier: voici un lien vers lequel se référer https://hackernoon.com/ hébergement-statique-de-sites-de-réaction-sur-aws-s3-cloudfront-avec-ssl-924e5c134455
Il existe deux possibilités:
(1) Si votre Angular sur AWS S3 est rendu côté client, chaque fois que vous actualisez votre site Web, votre navigateur enverra une demande à AWS CloudFront pour acquérir le fichier à partir d'AWS S3.
par exemple. Le rechargement de https://yourdomain.com/contact enverra en fait une demande au compartiment AWS S3> répertoire 'contact' > index.html, qui n'existe pas car la page que vous consultez est purement générée côté client.
Solution: distribution CloudFront> Pages d'erreur> Créer une réponse d'erreur personnalisée> Créez vos réponses personnalisées pour l'erreur 400 , 403, 404.
Par exemple, une réponse d'erreur personnalisée pour l'erreur 400:
HTTP Error Code: 400 Bad Request Error Caching Minimum TTL: 300 Customize Error Response: Yes Response Page Path: /index.html HTTP Response Code: 200 OK
(2) Si votre Angular est rendu côté serveur , vous devez ensuite utiliser votre point de terminaison AWS S3 comme `` Nom du chemin d'origine '' au lieu de la saisie semi-automatique à partir de la liste déroulante AWS. Pour plus de détails, vous pouvez vous référer à: Prerender Angular et Host It sur AWS S3
Je viens de définir index.html sur Document d'erreur dans l'hébergement de site Web statique et cela fonctionne pour moi.