Utilisation des redirections

Les redirections permettent à un serveur web de réacheminer la navigation d'une URL vers une autre. Les redirections sont souvent utilisées pour personnaliser l'apparence d'une URL, pour éviter les liens brisés, pour déplacer l'emplacement d'hébergement d'une application ou d'un site sans modifier son adresse et pour remplacer l'URL demandée par le formulaire requis par une application Web.

Types de redirections

Amplify prend en charge les types de redirection suivants dans la console.

Redirection permanente (301)

Les redirections 301 sont conçues pour les modifications durables apportées à la destination d'une adresse web. L'historique de classement du moteur de recherche de l'adresse d'origine s'applique à la nouvelle adresse de destination. La redirection se produit côté client, une barre de navigation de navigateur affiche ainsi l'adresse de destination après la redirection.

Les raisons courantes d'utilisation de redirections 301 incluent les suivantes :

• Pour éviter un lien brisé lorsque l'adresse d'une page change.

• Pour éviter un lien brisé lorsqu'un utilisateur fait une faute de frappe prévisible dans une adresse.

Redirection temporaire (302)

Les redirections 302 sont conçues pour les modifications temporaires apportées à la destination d'une adresse web. L'historique de classement de l'adresse d'origine dans les moteurs de recherche ne s'applique pas à la nouvelle adresse de destination. La redirection se produit côté client, une barre de navigation de navigateur affiche ainsi l'adresse de destination après la redirection.

Les raisons courantes d'utilisation de redirections 302 incluent les suivantes :

• Pour fournir une destination de détour lorsque des réparations sont effectuées sur l'adresse d'origine.

• Fournir des pages de test pour la comparaison A/B d'une interface utilisateur.

  Note

  Si votre application renvoie une réponse 302 inattendue, l'erreur est probablement due aux modifications que vous avez apportées à la redirection et à la configuration personnalisée de l'en-tête de votre application. Pour résoudre ce problème, vérifiez que vos en-têtes personnalisés sont valides, puis réactivez la règle de réécriture 404 par défaut pour votre application.

Réécriture (200)

Les redirections 200 (réécritures) sont conçues pour afficher le contenu de l'adresse de destination comme s'il était servi à partir de l'adresse d'origine. L'historique de classement du moteur de recherche continue à s'appliquer à l'adresse d'origine. La redirection se produit côté serveur, une barre de navigation de navigateur affiche ainsi l'adresse d'origine après la redirection. Les raisons courantes d'utilisation de redirections 200 incluent les suivantes :

• Pour rediriger l'ensemble d'un site vers un nouvel emplacement d'hébergement sans modifier l'adresse du site.

• Pour rediriger l'ensemble du trafic vers une application web monopage (SPA) vers sa page index.html pour traitement par une fonction de routeur côté client.

Introuvable (404)

Les redirections 404 se produisent lorsqu'une demande pointe vers une adresse qui n'existe pas. La page de destination d'une redirection 404 s'affiche au lieu de celle demandée. Les raisons courantes d'une redirection 404 incluent les suivantes :

• Pour éviter un message de lien brisé lorsqu'un utilisateur saisit une URL incorrecte.

• Pour pointer des requêtes de pages inexistantes d'une application web vers sa page index.html pour traitement par une fonction de routeur côté client.

Création et modification de redirections

Vous pouvez créer et modifier des redirections pour une application dans la console Amplify. Avant de commencer, vous aurez besoin des informations suivantes concernant les différentes parties d'une redirection.

Une adresse originale

Adresse demandée par l'utilisateur.

Une adresse de destination

L'adresse qui diffuse réellement le contenu que l'utilisateur voit.

Un type de redirection

Les types incluent une redirection permanente (301), une redirection temporaire (302), une réécriture (200) ou une redirection introuvable (404).

Un code de pays à deux lettres (facultatif)

Une valeur que vous pouvez inclure pour segmenter l'expérience utilisateur de votre application par région géographique.

Pour créer une redirection dans la console Amplify

1. Connectez-vous à la console Amplify AWS Management Console et ouvrez-la.

2. Choisissez l'application pour laquelle vous souhaitez créer une redirection.

3. Dans le volet de navigation, choisissez Hosting, puis Rewrites and redirections.

4. Sur la page Réécritures et redirections, choisissez Gérer les redirections.

5. La procédure d'ajout d'une redirection varie selon que vous souhaitez ajouter des règles individuellement ou effectuer une modification en bloc :

   • Pour créer une redirection individuelle, choisissez Ajouter une réécriture.

     1. Pour Adresse source, entrez l'adresse d'origine demandée par l'utilisateur.

     2. Pour Adresse cible, entrez l'adresse de destination qui affiche le contenu à l'utilisateur.

     3. Pour Type, choisissez le type de redirection dans la liste.

     4. (Facultatif) Pour le code de pays, entrez une condition de code de pays à deux lettres.

   • Pour modifier les redirections en bloc, choisissez Ouvrir l'éditeur de texte.

     1. Ajoutez ou mettez à jour manuellement des redirections dans l'éditeur JSON de réécritures et de redirections.

6. Choisissez Enregistrer.

Ordre des redirections

Les redirections sont appliquées du haut de la liste vers le bas. Assurez-vous que votre ordre donne l'effet voulu. Par exemple, avec l'ordre de redirections suivant, toutes les requêtes d'un chemin donné sous /docs/ sont redirigées vers le même chemin sous /documents/, sauf /docs/specific-filename.html qui redirige vers /documents/different-filename.html :

/docs/specific-filename.html /documents/different-filename.html 301
/docs/<*> /documents/<*>

L'ordre de redirections suivant ignore la redirection de specific-filename.html vers different-filename.html :

/docs/<*> /documents/<*>
/docs/specific-filename.html /documents/different-filename.html 301

Paramètres Query (Requête)

Vous pouvez utiliser les paramètres de requête pour mieux contrôler vos correspondances d'URL. Amplify transmet tous les paramètres de requête vers le chemin de destination pour les redirections 301 et 302, avec les exceptions suivantes :

• Si l'adresse d'origine inclut une chaîne de requête définie sur une valeur spécifique, Amplify ne transmet pas les paramètres de requête. Dans ce cas, la redirection s'applique uniquement aux demandes adressées à l'URL de destination avec la valeur de requête spécifiée.

• Si l'adresse de destination de la règle correspondante comporte des paramètres de requête, les paramètres de requête ne sont pas transférés. Par exemple, si l'adresse de destination de la redirection esthttps://example-target.com?q=someParam, les paramètres de requête ne sont pas transmis.

Redirections et réécritures simples

Cette section inclut des exemples de code pour les scénarios de redirection courants.

Note

La correspondance du domaine d'adresse d'origine ne fait pas la distinction majuscules/minuscules.

Vous pouvez utiliser l'exemple de code suivant pour rediriger définitivement une page spécifique à une nouvelle adresse.

Adresse d'origine	Adresse de destination	Type de redirection	Code pays
/original.html	/destination.html	permanent redirect (301)

^{JSON [{"source": "/original.html", "status": "301", "target": "/destination.html", "condition": null}]}

Vous pouvez utiliser l'exemple de code suivant pour rediriger n'importe quel chemin dans un dossier vers le même chemin dans un autre dossier.

Adresse d'origine	Adresse de destination	Type de redirection	Code pays
/docs/<*>	/documents/<*>	permanent redirect (301)

^{JSON [{"source": "/docs/<*>", "status": "301", "target": "/documents/<*>", "condition": null}]}

Vous pouvez utiliser l'exemple de code suivant pour rediriger l'ensemble du trafic vers index.html en tant que réécriture. Dans ce scénario, la réécriture permet d'indiquer à l'utilisateur qu'il a accédé à l'adresse d'origine.

Adresse d'origine	Adresse de destination	Type de redirection	Code pays
/<*>	/index.html	rewrite (200)

^{JSON [{"source": "/<*>", "status": "200", "target": "/index.html", "condition": null}]}

Vous pouvez utiliser l'exemple de code suivant pour utiliser une réécriture afin de modifier le sous-domaine qui est présenté à l'utilisateur.

Adresse d'origine	Adresse de destination	Type de redirection	Code pays
https://mydomain.com	https://www.mydomain.com	rewrite (200)

^{JSON [{"source": "https://mydomain.com", "status": "200", "target": "https://www.mydomain.com", "condition": null}]}

Vous pouvez utiliser l'exemple de code suivant pour rediriger vers un autre domaine avec un préfixe de chemin.

Adresse d'origine	Adresse de destination	Type de redirection	Code pays
https://mydomain.com	https://www.mydomain.com/documents	temporary redirect (302)

^{JSON [{"source": "https://mydomain.com", "status": "302", "target": "https://www.mydomain.com/documents/", "condition": null}]}

Vous pouvez utiliser l'exemple de code suivant pour rediriger les chemins d'un dossier introuvable vers une page 404 personnalisée.

Adresse d'origine	Adresse de destination	Type de redirection	Code pays
/<*>	/404.html	not found (404)

^{JSON [{"source": "/<*>", "status": "404", "target": "/404.html", "condition": null}]}

Redirections pour les applications Web à page unique (SPA)

La plupart des frameworks SPA prennent en charge HTML5 History.pushState () pour modifier l'emplacement du navigateur sans lancer de requête au serveur. Cela fonctionne pour les utilisateurs qui commencent leur transition à partir de la racine (ou /index.html), mais échoue pour les utilisateurs qui accèdent directement à une autre page.

L'exemple suivant utilise des expressions régulières pour configurer une réécriture 200 pour tous les fichiers dans index.html, à l'exception des extensions de fichier spécifiées dans l'expression régulière.

Adresse d'origine	Adresse de destination	Type de redirection	Code pays
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>	/index.html	200

^{JSON [{"source": "</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>", "status": "200", "target": "/index.html", "condition": null}]}

Réécriture du proxy inversé

L'exemple suivant utilise une réécriture pour transférer du contenu provenant d'un autre emplacement afin que l'utilisateur sache que le domaine n'a pas changé.

Adresse d'origine	Adresse de destination	Type de redirection	Code pays
/images/<*>	https://images.otherdomain.com/<*>	rewrite (200)

^{JSON [{"source": "/images/<*>", "status": "200", "target": "https://images.otherdomain.com/<*>", "condition": null}]}

Barres obliques et URL propres

Pour créer des structures d'URL propres telles que about au lieu de about.html, des générateurs sur site statiques tels que Hugo génèrent des répertoires pour les pages avec un index.html (/about/index.html). Amplify crée automatiquement des URL propres en ajoutant une barre oblique lorsque cela est nécessaire. Le tableau ci-dessous présente différents scénarios :

Entrées utilisateur dans le navigateur	URL dans la barre d'adresse	Document affiché
/about	/about	/about.html
/about (when about.html returns 404)	/about/	/about/index.html
/about/	/about/	/about/index.html

Espaces réservés

Vous pouvez utiliser l'exemple de code suivant pour rediriger des chemins dans une structure de dossiers vers une structure correspondante dans un autre dossier.

Adresse d'origine	Adresse de destination	Type de redirection	Code pays
/docs/<year>/<month>/<date>/<itemid>	/documents/<year>/<month>/<date>/<itemid>	permanent redirect (301)

^{JSON [{"source": "/docs/<year>/<month>/<date>/<itemid>", "status": "301", "target": "/documents/<year>/<month>/<date>/<itemid>", "condition": null}]}

Chaînes de requête et paramètres de chemin

Vous pouvez utiliser l'exemple de code suivant pour rediriger un chemin vers un dossier avec un nom qui correspond à la valeur d'un élément de la chaîne de requête dans l'adresse d'origine :

Adresse d'origine	Adresse de destination	Type de redirection	Code pays
/docs?id=<my-blog-id-value	/documents/<my-blog-post-id-value>	permanent redirect (301)

^{JSON [{"source": "/docs?id=<my-blog-id-value>", "status": "301", "target": "/documents/<my-blog-id-value>", "condition": null}]}

Note

Amplify transmet tous les paramètres de chaîne de requête au chemin de destination pour les redirections 301 et 302. Toutefois, si l'adresse d'origine inclut une chaîne de requête définie sur une valeur spécifique, comme illustré dans cet exemple, Amplify ne transmet pas les paramètres de requête. Dans ce cas, la redirection s'applique uniquement aux demandes adressées à l'adresse de destination avec la valeur de requête spécifiéeid.

Vous pouvez utiliser l'exemple de code suivant pour rediriger tous les chemins introuvables à un niveau donné d'une structure de dossiers vers index.html dans un dossier spécifique.

Adresse d'origine	Adresse de destination	Type de redirection	Code pays
/documents/<folder>/<child-folder>/<grand-child-folder>	/documents/index.html	not found (404)

^{JSON [{"source": "/documents/<x>/<y>/<z>", "status": "404", "target": "/documents/index.html", "condition": null}]}

Redirections basées sur les régions

Vous pouvez utiliser l'exemple de code suivant pour rediriger des requêtes en fonction de la région.

Adresse d'origine	Adresse de destination	Type de redirection	Code pays
/documents	/documents/us/	temporary redirect (302)	<US>

^{JSON [{"source": "/documents", "status": "302", "target": "/documents/us/", "condition": "<US>"}]}

Expressions génériques dans les redirections et les réécritures

Vous pouvez utiliser l'expression générique<*>, dans l'adresse d'origine pour une redirection ou une réécriture. Vous devez placer l'expression à la fin de l'adresse d'origine et elle doit être unique. Amplify ignore les adresses d'origine qui incluent plusieurs expressions génériques, ou les utilise à un emplacement différent.

Voici un exemple de redirection valide avec une expression générique.

Adresse d'origine	Adresse de destination	Type de redirection	Code pays
/docs/<*>	/documents/<*>	permanent redirect (301)

Les deux exemples suivants illustrent des redirections non valides avec des expressions génériques.

Adresse d'origine	Adresse de destination	Type de redirection	Code pays
/docs/<*>/content	/documents/<*>/content	permanent redirect (301)
/docs/<*>/content/<*>	/documents/<*>/content/<*>	permanent redirect (301)