web-dev-qa-db-fra.com

réagir routeur ne fonctionne pas dans un seau aws s3

J'ai déployé mon React website build/ dossier dans un compartiment AWS S3.

Si je vais à www.mywebsite.com, ça marche et si je clique sur la balise a pour aller aux pages Projet et A propos, cela me mène à la bonne page. Cependant, si je copie et envoie l’URL de la page ou si je vais directement au lien du type: www.mywebsite.com/projects, il retourne 404.

Voici mon App.js code:

const App = () => (
    <Router>
        <div>
            <NavBar/>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route exact path="/projects" component={Projects}/>
                <Route exact path="/about" component={About}/>
                <Route component={NoMatch}/>
            </Switch>
        </div>
    </Router>
);
javascriptreactjsamazon-web-servicesamazon-s3
20
Viet

Répondez pour fermer la question. J'ai résolu ce problème grâce au commentaire d'Alan Friedman ci-dessus:

Vous devez rediriger les erreurs (404 dans ce cas) vers la racine index.html - 7 juillet à 0:34

10
Viet

Je ne sais pas si vous l'avez déjà résolu. J'ai eu le même problème.

C'est parce qu'AWS S3 recherche ce dossier (projets) à partir duquel vous ne disposez pas.

Pointez simplement le document d'erreur sur index.html.

enter image description here

Cela a fonctionné pour moi. Vous pouvez gérer les pages d'erreur dans react-router.

36
A.R Naseef

pourquoi ça arrive

Votre problème est que vous souhaitez laisser la responsabilité du routage à votre application/JavaScript. Le lien fonctionnera car Reaction peut écouter le clic sur le lien et simplement mettre à jour l'itinéraire dans la barre d'adresse du navigateur. Toutefois, si vous allez dans un emplacement où votre script (index.html et bundle.js ou quel que soit le code de votre application) ne soit pas chargé, le code JavaScript n'est jamais chargé et n'a aucune chance de gérer la demande. Au lieu de cela, quelle que soit l'exécution de votre serveur, celui-ci se chargera de la requête, vérifiera s'il existe une ressource à cet endroit et renverra une erreur 404 ou tout autre résultat trouvé.

La solution

Comme mentionné dans les commentaires, c'est la raison pour laquelle vous devez rediriger les erreurs 404 vers l'emplacement exact où votre application est placée. Ce n'est pas spécifique à Amazon, c'est une exigence générale pour configurer votre application de réaction.

Pour résoudre le problème, vous devez savoir ce qui gère le routage sur votre serveur et comment le configurer. Par exemple, si vous avez un serveur Apache, un fichier .htaccess pourrait résoudre le problème de la manière suivante:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

Ce fichier permet au serveur de rediriger les erreurs non trouvées dans le fichier index.html. N'oubliez pas que cela peut affecter d'autres règles de routage se trouvant sur votre serveur. Cette configuration est donc la plus simple possible si votre application de réaction dispose d'un emplacement propre et n'interfère pas avec d'autres éléments.

4
Gegenwind

J'ai rencontré ce problème malgré l'utilisation de la configuration décrite dans la réponse acceptée, mais si vous obtenez toujours des erreurs 403 ET que vous utilisez AWS Cloudflare Manager, vous pouvez créer une page d'erreur dans l'onglet "Pages d'erreur" des paramètres de distribution. , avec la configuration suivante:

Error Code: 404,
Customize Error Response: Yes, 
Response Page Path: /index.html, 
HTTP Response Code: 200

Image de la page d'erreur Config pour passer la gestion de la route au routeur du navigateur

Cela a fonctionné pour moi bien que je ne sois absolument pas au courant de la bonne administration du serveur, j'espère que quelqu'un me dira s'il s'agit d'un problème majeur, s'il est fortuit.

2
Dank

Cas d'utilisation de Cloudfront vers S3:

https://hackernoon.com/hosting-static-react-websites-on-aws-s3-cloudfront-with-ssl-924e5c134455

3b) AWS CloudFront - Pages d'erreur Après avoir créé la distribution CloudFront, son statut étant En cours, passez à l'onglet Pages d'erreur. Gérez les codes de réponse 404 et 403 avec l'option Personnaliser la réponse d'erreur.

Google recommande une mise en cache d'une semaine ou 604800 secondes. Ce que nous faisons ici est de configurer CloudFront pour gérer les pages HTML manquantes, ce qui se produit généralement lorsqu'un utilisateur entre un chemin non valide ou, en particulier, lorsqu'il actualise un chemin autre que le chemin racine.

Quand cela se produit:

CloudFront recherchera un fichier qui n'existe pas dans le compartiment S3; il y a seulement 1 fichier html dans le compartiment et il s'agit du fichier index.html dans le cas d'une application à une seule page comme dans cet exemple de projet. Une réponse 404 sera renvoyée et notre configuration de réponse d'erreur personnalisée le piratera. Nous renverrons un code de réponse 200 et la page index.html à la place. Le routeur React, qui sera chargé avec le fichier index.html, examinera l’URL et affichera la page correcte à la place du chemin racine. Cette page sera mise en cache pour la durée de la TTL pour toutes les demandes sur le chemin demandé. Pourquoi devons-nous également gérer 403? C'est parce que ce code de réponse, au lieu de 404, est renvoyé par Amazon S3 pour les actifs non présents. Par exemple, une URL de https://votredomaine.com/somewhere recherchera un fichier appelé quelque part (sans extension) qui n'existe pas.

PS Auparavant, il en retournait 404, mais il semble en avoir maintenant 403; Dans tous les cas, il est préférable de gérer les deux codes de réponse).

1
Flávio Vieira