Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.
# Protection antioblique pour les déploiements d'Amplify
La protection contre le décalage de déploiement est disponible pour les applications Amplify afin d'éliminer les problèmes de distorsion de version entre le client et le serveur dans les applications Web. Lorsque vous appliquez une protection antiasymétrique à une application Amplify, vous pouvez vous assurer que vos clients interagissent toujours avec la bonne version des ressources côté serveur, quel que soit le moment du déploiement.
L'asymétrie des versions est un défi courant pour les développeurs Web. Cela se produit lorsqu'un navigateur Web exécute une version obsolète d'une application et que le serveur en exécute une nouvelle. Cet écart peut entraîner un comportement imprévisible, des erreurs et une expérience dégradée pour l'utilisateur de l'application. La fonctionnalité de protection asymétrique du déploiement d'Amplify associe les clients exécutés sur des navigateurs Web à un déploiement spécifique. Cela garantit qu'Amplify gère toujours les actifs pour ce déploiement particulier, en synchronisant le client et le serveur.
La fonction de protection asymétrique d'Amplify peut réduire les erreurs pour les utilisateurs de votre application lorsque vous lancez de nouveaux déploiements. Cela peut également améliorer l'expérience des développeurs en réduisant le temps passé à gérer les problèmes de compatibilité descendante et descendante.
Détails de la fonction de protection antioblique :
**Types d'applications pris en charge**
Vous pouvez ajouter une protection antioblique aux applications statiques et SSR créées avec n'importe quel framework pris en charge par Amplify. Les applications peuvent être déployées à partir d'un référentiel Git ou d'un déploiement manuel.
Vous ne pouvez pas ajouter de protection antiasymétrique à une application déployée sur la `WEB_DYNAMIC` plate-forme (Next.js version 11 ou antérieure).
**Duration**
Pour les applications statiques, Amplify effectue des déploiements d'une semaine. Pour les applications SSR, nous garantissons une protection asymétrique pour un maximum de huit déploiements précédents.
**Cost**
L'ajout d'une protection antiasymétrique à une application n'entraîne aucun coût supplémentaire.
**Considération de performance**
Lorsque la protection asymétrique est activée pour une application, Amplify doit mettre à jour ses configurations de cache CDN. Par conséquent, vous devez vous attendre à ce que votre premier déploiement après l'activation de la protection antiasymétrique prenne jusqu'à dix minutes.
**Topics**
+ [Configuration de la protection contre les distorsions de déploiement pour une application Amplify](configure-skew-protection.md)
+ [Comment fonctionne la protection antiasymétrique](skew-protection-headers.md)
# Configuration de la protection contre les distorsions de déploiement pour une application Amplify
Vous pouvez ajouter ou supprimer une protection contre les distorsions de déploiement pour une application à l'aide de la console Amplify, AWS Command Line Interface du, ou du. SDKs La fonctionnalité est appliquée au niveau de la branche. Seuls les nouveaux déploiements, effectués après l'activation de la protection asymétrique pour une succursale, seront protégés contre l'asymétrie.
Pour ajouter ou supprimer une protection contre les distorsions de déploiement à l'aide des champs AWS CLI ou SDKs, utilisez les `UpdateBranch.enableSkewProtection` champs `CreateBranch.enableSkewProtection` et. Pour plus d'informations, consultez [CreateBranch](https://docs.aws.amazon.com/amplify/latest/APIReference/API_CreateBranch.html)et consultez la [UpdateBranch](https://docs.aws.amazon.com/amplify/latest/APIReference/API_UpdateBranch.html)documentation de *référence de l'API Amplify*.
Si vous souhaitez supprimer un déploiement spécifique afin qu'il ne soit plus desservi, utilisez l'`DeleteJob`API. Pour plus d'informations, consultez la [DeleteJob](https://docs.aws.amazon.com/amplify/latest/APIReference/API_DeleteJob.html)documentation de *référence de l'API Amplify*.
Pour le moment, vous ne pouvez activer la protection asymétrique que sur une application déjà déployée sur Amplify Hosting. Suivez les instructions suivantes pour ajouter une protection antioblique à une branche à l'aide de la console Amplify.
**Activer la protection antioblique pour la branche d'une application Amplify**
1. Connectez-vous à la console Amplify AWS Management Console et ouvrez-la à l'adresse. [https://console.aws.amazon.com/amplify/](https://console.aws.amazon.com/amplify/)
1. Sur la page **Toutes les applications**, choisissez le nom de l'application déployée pour activer la protection asymétrique.
1. Dans le volet de navigation, choisissez **Paramètres de l'application**, puis **Paramètres de la branche**.
1. Dans la section **Branches**, choisissez le nom de la branche à mettre à jour.
1. Dans le menu **Actions**, choisissez **Activer la protection antioblique**.
1. Dans la fenêtre de confirmation, choisissez **Confirmer**. La protection antioblique est désormais activée pour la branche.
1. Redéployez votre branche d'application. Seuls les déploiements effectués après l'activation de la protection antiasymétrique sont protégés contre l'asymétrie.
Suivez les instructions ci-dessous pour supprimer la protection antiasymétrique d'une branche d'une application à l'aide de la console Amplify.
**Supprimer la protection antioblique d'une branche d'une application Amplify**
1. Connectez-vous à la console Amplify AWS Management Console et ouvrez-la à l'adresse. [https://console.aws.amazon.com/amplify/](https://console.aws.amazon.com/amplify/)
1. Sur la page **Toutes les applications**, choisissez le nom de l'application déployée dont vous souhaitez supprimer la protection antiasymétrique.
1. Dans le volet de navigation, choisissez **Paramètres de l'application**, puis **Paramètres de la branche**.
1. Dans la section **Branches**, choisissez le nom de la branche à mettre à jour.
1. Dans le menu **Actions**, choisissez **Désactiver la protection antioblique**. La protection antiasymétrique est désormais désactivée pour la branche et seul le contenu le plus récent sera diffusé.
# Comment fonctionne la protection antiasymétrique
Dans la plupart des cas, le comportement par défaut du cookie \$1dpl répondra à vos besoins de protection asymétrique. Toutefois, dans les scénarios avancés suivants, il est préférable d'activer la protection antioblique à l'aide des paramètres `X-Amplify-Dpl` d'en-tête et de `dpl` requête.
+ Chargement de votre site Web dans plusieurs onglets de navigateur en même temps
+ Recours à des travailleurs de service
Amplify évalue la demande entrante dans l'ordre suivant lors de la détermination du contenu à diffuser au client :
1. **`X-Amplify-Dpl`en-tête** — Les applications peuvent utiliser cet en-tête pour diriger les demandes vers un déploiement Amplify spécifique. Cet en-tête de demande peut être défini en utilisant la valeur de`process.env.AWS_AMPLIFY_DEPLOYMENT_ID`.
1. **`dpl`paramètre de requête** — Les applications Next.js définiront automatiquement le paramètre de requête \$1dpl pour les demandes relatives aux actifs comportant des empreintes digitales (fichiers .js et .css).
1. cookie **\$1dpl — Il s'agit du cookie** par défaut pour toutes les applications protégées par asymétrie. Pour un navigateur spécifique, le même cookie est envoyé pour chaque onglet ou instance de navigateur qui interagit avec un domaine.
Sachez que si différentes versions d'un site Web sont chargées dans différents onglets du navigateur, le cookie \$1dpl est partagé par tous les onglets. Dans ce scénario, il n'est pas possible d'obtenir une protection totale contre l'asymétrie avec le cookie \$1dpl et vous devriez envisager d'utiliser l'`X-Amplify-Dpl`en-tête pour la protection antiasymétrique.
## X-Amplify-Dpl exemple d'en-tête
L'exemple suivant illustre le code d'une page SSR Next.js qui accède à la protection antiasymétrique via l'en-tête. `X-Amplify-Dpl` La page affiche son contenu en fonction de l'une de ses routes API. Le déploiement à desservir à la route de l'API est spécifié à l'aide de l'`X-Amplify-Dpl`en-tête, qui est défini sur la valeur de`process.env.AWS_AMPLIFY_DEPLOYMENT_ID`.
```
import { useEffect, useState } from 'react';
export default function MyPage({deploymentId}) {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/hello', {
headers: {
'X-Amplify-Dpl': process.env.AWS_AMPLIFY_DEPLOYMENT_ID
},
})
.then(res => res.json())
.then(data => setData(data))
.catch(error => console.error("error", error))
}, []);
return
{data ? JSON.stringify(data) : "Loading ... " }
}
```