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

Question

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

Si je vais à www.mywebsite.com , cela fonctionne et si je clique sur la balise a pour accéder aux pages Projet et À propos, cela m'amène à la bonne page. Cependant, si je copie et envoie l'URL de la page ou que je vais directement au lien comme: www.mywebsite.com/projects , il renvoie 404.

Voici mon code App.js :

 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>
);
 

Answer 1

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 n'avez pas accès.

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

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

Answer 2

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

Answer 3

Dans le cas où ce compartiment S3 est servi à partir d'une distribution CloudFront:

Créer une page d'erreur personnalisée (AWS Docs) dans la distribution CloudFront que les routes des erreurs 404 pour index.html et renvoie 200 code de réponse. De cette façon, votre demande sera de gérer le routage.

Des Pages D'Erreur Personnalisées

Answer 4

Cas d'utilisation Cloudfront pour S3:

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

3b) AWS CloudFront - Pages d'Erreur Après la création de la distribution CloudFront, alors que son statut est En cours, passez à l'onglet Pages d'Erreurs. Gérer les codes de réponse 404 et 403 à Personnaliser Réponse d'Erreur.

Google recommande 1 semaine ou 604800 secondes de mise en cache. Ce que nous faisons ici est de mettre en place CloudFront pour gérer manque des pages html, ce qui se produit généralement lorsqu'un utilisateur saisit un chemin d'accès non valide ou, en particulier, lorsqu'ils actualisent un chemin autre que le chemin d'accès racine.

Lorsque cela se produit:

CloudFront seront à la recherche d'un fichier qui n'existe pas dans le compartiment S3; il est à seulement 1 fichier html dans le seau, et qui est le index.html pour le cas d'une Seule Page de l'Application, comme cet exemple de projet Une réponse 404 sera retourné et notre réponse d'erreur personnalisé programme d'installation de la détourner. Nous allons retourner un code de réponse de 200 et de la index.html la page à la place. Réagir routeur, qui sera chargé avec la index.html fichier, regardez l'url et le rendu de la page au lieu de la racine du chemin d'accès. Cette page sera en cache pour la durée de la durée de vie pour toutes les demandes à la requête de chemin. Pourquoi avons-nous besoin pour gérer 403 ainsi? C'est parce que ce code de réponse, au lieu de 404, est renvoyé par Amazon S3 pour les actifs qui ne sont pas présents. Par exemple, une url https://yourdomain.com/somewhere seront à la recherche d'un fichier appelé quelque part (sans l'extension) qui n'existe pas.

PS. Il a utilisé pour être de retour 404, mais il semble être de retour 403 maintenant, de toute façon il est préférable de traiter à la fois des codes de réponse).

Answer 5

Pourquoi ça arrive

Votre problème est que vous voulez passer la responsabilité à l'acheminement de vos réagir application/javascript. Le lien sera de travailler en raison de réagir pouvez écouter cliquez sur le lien et tout simplement la mise à jour de la route dans la barre d'adresse du navigateur. Toutefois, si vous allez à un endroit où votre script (index.html et la bundle.js et partout ou votre code d'application est situé) n'est pas chargé, puis le JavaScript n'est jamais chargé et n'a aucune chance de répondre à la demande. Au lieu de cela, quelle que soit exécute votre serveur va prendre soin de la demande, regardez s'il y a une ressource à cet endroit, et retourner une erreur 404 ou tout autre chose qu'il trouve.

La solution

Comme mentionné dans les commentaires, c'est la raison pour laquelle vous avez besoin de rediriger 404-les erreurs à l'emplacement exact où votre application est placé. Ce n'est rien de spécifique à Amazon, c'est une exigence générale pour configurer votre réagissent app.

Pour résoudre le problème, vous devez savoir ce que gère le routage sur votre serveur et comment le configurer. Par exemple, si vous avez un serveur Apache, une .fichier htaccess pourrait prendre soin de la question de ce genre:

<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 redirection introuvable erreurs à l'index.html. Gardez à l'esprit qu'il pourrait affecter d'autres règles de routage qui sont sur votre serveur, de sorte que cette configuration est la plus simple, si votre réagissent application dispose d'une place sur son propre, ne pas interférer avec d'autres trucs.