As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá. # Proteção contra distorções para implantações do Amplify A proteção contra distorção de implantação está disponível para as aplicações do Amplify para eliminar problemas de distorção de versão entre clientes e servidores em aplicações da Web. Ao aplicar proteção de distorção a uma aplicação do Amplify, é possível garantir que seus clientes sempre interajam com a versão correta dos ativos do lado do servidor, independentemente de quando a implantação ocorrer. A distorção de versão é um desafio comum para desenvolvedores da Web. Ela ocorre quando um navegador da Web está executando uma versão desatualizada de uma aplicação e o servidor está executando uma nova. Essa discrepância pode causar comportamento imprevisível, erros e uma experiência degradada para o usuário da aplicação. O recurso de proteção de distorção de implantação do Amplify vincula os clientes em execução em navegadores da web a uma implantação específica. Isso garante que o Amplify sempre forneça os ativos dessa implantação específica, mantendo o cliente e o servidor sincronizados. O recurso de proteção contra distorções do Amplify pode reduzir os erros dos usuários da sua aplicação à medida que você lança novas implantações. Também pode melhorar a experiência do desenvolvedor ao reduzir o tempo gasto no gerenciamento de problemas de compatibilidade com versões anteriores e futuras. Detalhes do recurso de proteção contra distorções: **Tipos de aplicação compatíveis** É possível adicionar a proteção contra distorção a aplicações estáticas e de SSR criadas com qualquer estrutura com suporte pelo Amplify. As aplicações podem ser implantadas a partir de um repositório Git ou de uma implantação manual. Você não pode adicionar proteção contra distorções a uma aplicação implantado na plataforma `WEB_DYNAMIC` (Next.js versão 11 ou anterior). **Duração** Para aplicações estáticas, o Amplify oferece uma semana de implantações. Para aplicações de SSR, garantimos proteção contra distorções para até oito implantações anteriores. **Custo** Não há custo adicional para adicionar a proteção contra distorções a uma aplicação. **Considerações sobre a performance** Quando a proteção de distorção está ativada para uma aplicação, o Amplify deve atualizar suas configurações de cache de CDN. Portanto, é necessário esperar que sua primeira implantação depois de ativar a proteção contra distorções leve até dez minutos. **Topics** + [Configuração da proteção contra distorções de implantação para uma aplicação do Amplify](configure-skew-protection.md) + [Como funciona a proteção contra distorções](skew-protection-headers.md) # Configuração da proteção contra distorções de implantação para uma aplicação do Amplify Você pode adicionar ou remover a proteção contra distorção de implantação de um aplicativo usando o console do Amplify, AWS Command Line Interface o ou o. SDKs O recurso é aplicado no nível da ramificação. Somente novas implantações, feitas após a ativação da proteção contra distorção em uma ramificação, serão protegidas contra distorções. Para adicionar ou remover a proteção contra distorção de implantação usando os campos AWS CLI ou SDKs, use os `UpdateBranch.enableSkewProtection` campos `CreateBranch.enableSkewProtection` e. Para obter mais informações, consulte [CreateBranch](https://docs.aws.amazon.com/amplify/latest/APIReference/API_CreateBranch.html)e [UpdateBranch](https://docs.aws.amazon.com/amplify/latest/APIReference/API_UpdateBranch.html)na documentação de *referência da API Amplify*. Se você quiser remover uma implantação específica para que ela não seja mais atendida, use a API `DeleteJob`. Para obter mais informações, consulte a [DeleteJob](https://docs.aws.amazon.com/amplify/latest/APIReference/API_DeleteJob.html)documentação de *referência da API Amplify*. No momento, você só pode ativar a proteção contra distorções em uma aplicação que já esteja implantada no Amplify Hosting. Use as instruções a seguir para adicionar a proteção contra distorções a uma ramificação usando o console do Amplify. **Ative a proteção contra distorções para uma ramificação de uma aplicação do Amplify** 1. Faça login no Console de gerenciamento da AWS e abra o console do Amplify em. [https://console.aws.amazon.com/amplify/](https://console.aws.amazon.com/amplify/) 1. Na página **Todas as aplicações**, escolha o nome da aplicação implantada para habilitar a proteção contra distorções. 1. No painel de navegação, escolha **Configurações da aplicação**, e, em seguida, escolha **Configurações da ramificação**. 1. Na seção **Ramificações**, escolha o nome da ramificação a ser atualizada. 1. No menu **Ações**, escolha **Habilitar proteção contra distorções**. 1. Na janela de confirmação, escolha **Confirmar**. A proteção contra distorções agora está habilitada para a ramificação. 1. Reimplante sua ramificação da aplicação. Somente implantações feitas após a ativação da proteção contra distorções serão protegidas contra distorções. Use as instruções a seguir para remover a proteção contra distorções de uma ramificação de uma aplicação usando o console do Amplify. **Remova a proteção contra distorções de uma ramificação de uma aplicação do Amplify** 1. Faça login no Console de gerenciamento da AWS e abra o console do Amplify em. [https://console.aws.amazon.com/amplify/](https://console.aws.amazon.com/amplify/) 1. Na página **Todas as aplicações**, escolha o nome da aplicação implantada para remover a proteção contra distorções. 1. No painel de navegação, escolha **Configurações da aplicação**, e, em seguida, escolha **Configurações da ramificação**. 1. Na seção **Ramificações**, escolha o nome da ramificação a ser atualizada. 1. No menu **Ações**, escolha **Desabilitar proteção contra distorções**. A proteção contra distorções agora está desabilitada para a ramificação e somente o conteúdo mais recente será veiculado. # Como funciona a proteção contra distorções Na maioria dos casos, o comportamento padrão do cookie \$1dpl atenderá às suas necessidades de proteção contra distorções. No entanto, nos cenários avançados a seguir, a proteção contra distorções será melhor ativada usando o cabeçalho `X-Amplify-Dpl` e o parâmetro de consulta `dpl`. + Carregamento do seu site em várias guias do navegador ao mesmo tempo + Uso de trabalhadores de serviço O Amplify avalia a solicitação recebida na ordem a seguir ao determinar o conteúdo a ser veiculado ao cliente: 1. **Cabeçalho `X-Amplify-Dpl`**: as aplicações podem usar esse cabeçalho para direcionar solicitações para uma implantação específica do Amplify. Esse cabeçalho de solicitação pode ser definido usando o valor de `process.env.AWS_AMPLIFY_DEPLOYMENT_ID`. 1. **Parâmetro de consulta `dpl`**: as aplicações Next.js definirão automaticamente o parâmetro de consulta \$1dpl para solicitações de ativos com impressão digital (arquivos.js e .css). 1. **Cookie \$1dpl**: esse é o padrão para todas as aplicações protegidas contra distorções. Para um navegador específico, o mesmo cookie é enviado para cada guia ou instância do navegador que interage com um domínio. Lembre-se de que, se diferentes guias do navegador tiverem versões diferentes de um site carregadas, o cookie \$1dpl será compartilhado por todas as guias. Nesse cenário, não é possível obter proteção total contra distorções com o cookie \$1dpl e é necessário considerar o uso do cabeçalho `X-Amplify-Dpl` para proteção contra distorções. ## X-Amplify-Dpl exemplo de cabeçalho O exemplo a seguir demonstra o código de uma página de SSR do Next.js que acessa a proteção contra distorções por meio do cabeçalho `X-Amplify-Dpl`. A página renderiza seu conteúdo com base em uma de suas rotas de API. A implantação para servir à rota da API é especificada usando o cabeçalho `X-Amplify-Dpl`, que é definido com o valor `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 ... " }
} ```