Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés. # Protección contra la distorsión para las implementaciones de Amplify Hay disponible protección contra distorsión en la implementación de las aplicaciones de Amplify para eliminar los problemas de distorsión de versiones entre el cliente y los servidores en las aplicaciones web. Al aplicar una protección contra distorsión a una aplicación de Amplify, es posible asegurarse de que los clientes siempre interactúen con la versión correcta de los activos del lado del servidor, independientemente de cuándo se produzca la implementación. La distorsión de versiones es un desafío común para los desarrolladores web. Se produce cuando un navegador web ejecuta una versión desactualizada de una aplicación y el servidor ejecuta una versión nueva. Esta discrepancia puede provocar un comportamiento impredecible, errores y una experiencia degradada para el usuario de la aplicación. La característica de protección contra la distorsión de implementación de Amplify vincula a los clientes que ejecutan en navegadores web a una implementación específica. Esto garantiza que Amplify siempre brinde los activos para esa implementación en particular, lo cual mantiene al cliente y al servidor sincronizados. La característica de protección contra distorsión de Amplify puede reducir los errores de los usuarios de la aplicación a medida que se lanzan nuevas implementaciones. También puede mejorar la experiencia del desarrollador al reducir el tiempo dedicado a administrar problemas de compatibilidad con versiones anteriores y posteriores. Detalles de la característica de protección contra distorsión: **Tipos de aplicaciones compatibles** Puede añadir protección contra distorsión a las aplicaciones estáticas y de SSR creadas con cualquier marco compatible con Amplify. Las aplicaciones se pueden implementar desde un repositorio de Git o mediante una implementación manual. No se puede añadir una protección contra distorsión a una aplicación que esté implementada en la plataforma `WEB_DYNAMIC` (Next.js, versión 11 o anterior). **Duración** Para las aplicaciones estáticas, Amplify ofrece una semana de implementaciones. En el caso de las aplicaciones de SSR, garantizamos una protección contra distorsiones en hasta ocho implementaciones anteriores. **Costo** No se aplica ningún costo adicional por agregar la protección contra distorsión a una aplicación. **Consideraciones sobre el rendimiento** Cuando la protección contra distorsión está habilitada para una aplicación, Amplify debe actualizar sus configuraciones en la memoria caché de CDN. Por lo tanto, es de esperar que la primera implementación después de habilitar la protección contra distorsión tarde hasta diez minutos. **Topics** + [Configuración de la protección contra distorsión de implementación para una aplicación de Amplify](configure-skew-protection.md) + [Cómo funciona la protección contra distorsión](skew-protection-headers.md) # Configuración de la protección contra distorsión de implementación para una aplicación de Amplify Puede añadir o eliminar la protección contra el sesgo de despliegue de una aplicación mediante la consola Amplify, AWS Command Line Interface la o la. SDKs La característica se aplica a nivel de la ramificación. Solo las nuevas implementaciones, que se realicen después de activar la protección contra distorsión para una ramificación, estarán protegidas contra la distorsión. Para añadir o eliminar la protección contra el sesgo de despliegue mediante los campos AWS CLI o SDKs, utilice los `CreateBranch.enableSkewProtection` campos y. `UpdateBranch.enableSkewProtection` Para obtener más información, consulta [CreateBranch](https://docs.aws.amazon.com/amplify/latest/APIReference/API_CreateBranch.html)y consulta [UpdateBranch](https://docs.aws.amazon.com/amplify/latest/APIReference/API_UpdateBranch.html)la documentación de *referencia de la API Amplify*. Si se quiere eliminar una implementación específica para que deje de estar disponible, use la API de `DeleteJob`. Para obtener más información, consulta [DeleteJob](https://docs.aws.amazon.com/amplify/latest/APIReference/API_DeleteJob.html)la documentación de *referencia de la API Amplify*. En este momento, solo se puede habilitar la protección contra distorsión en una aplicación que ya esté implementada en Amplify Hosting. Utilice las siguientes instrucciones para agregar la protección contra distorsión a una ramificación mediante la consola de Amplify. **Habilite la protección contra distorsión para la ramificación de una aplicación de Amplify** 1. Inicie sesión en la consola Amplify Consola de administración de AWS y ábrala en. [https://console.aws.amazon.com/amplify/](https://console.aws.amazon.com/amplify/) 1. En la página **Todas las aplicaciones**, elija el nombre de la aplicación implementada para activar la protección contra distorsión. 1. En el panel de navegación, elija **Configuración de la aplicación** y, a continuación, **Configuración de ramificación**. 1. En la sección **Ramificación**, elija el nombre de la ramificación que desea actualizar. 1. En el menú **Acciones**, seleccione **Habilitar la protección contra distorsión**. 1. En la ventana de confirmación, elija **Confirmar**. La protección contra distorsión ahora está habilitada para la ramificación. 1. Vuelva a implementar la ramificación de aplicaciones. Solo las implementaciones que se realicen después de activar la protección contra distorsión estarán protegidas contra la distorsión. Utilice las siguientes instrucciones para agregar la protección contra distorsión desde una ramificación de una aplicación mediante la consola de Amplify. **Quite la protección contra distorsión de la ramificación de una aplicación de Amplify** 1. Inicie sesión en la consola Amplify Consola de administración de AWS y ábrala en. [https://console.aws.amazon.com/amplify/](https://console.aws.amazon.com/amplify/) 1. En la página **Todas las aplicaciones**, elija el nombre de la aplicación implementada de la que desee eliminar la protección contra distorsión. 1. En el panel de navegación, elija **Configuración de la aplicación** y, a continuación, **Configuración de ramificación**. 1. En la sección **Ramificación**, elija el nombre de la ramificación que desea actualizar. 1. En el menú **Acciones**, seleccione **Deshabilitar protección contra distorsión**. La protección contra distorsión ahora está deshabilitada para la ramificación y solo se mostrará el contenido más reciente. # Cómo funciona la protección contra distorsión En la mayoría de los casos, el comportamiento predeterminado de la cookie \$1dpl se adaptará a sus necesidades de protección contra distorsión. Sin embargo, en las siguientes situaciones avanzadas, es mejor habilitar la protección contra la distorsión mediante el parámetro de encabezado `X-Amplify-Dpl` y de consulta `dpl`. + Cargar su sitio web en varias pestañas del navegador al mismo tiempo + Uso de trabajadores de servicio Amplify evalúa la solicitud entrante en el siguiente orden al determinar el contenido que se va a ofrecer al cliente: 1. **Encabezado de `X-Amplify-Dpl`**: las aplicaciones pueden usar este encabezado para dirigir las solicitudes a una implementación específica de Amplify. Este encabezado de solicitud se puede configurar con el valor de `process.env.AWS_AMPLIFY_DEPLOYMENT_ID`. 1. **Parámetro de consulta `dpl`**: las aplicaciones de Next.js establecerán automáticamente el parámetro de consulta \$1dpl para las solicitudes de activos con huellas digitales (archivos .js y .css). 1. **Cookie \$1dpl**: es la opción predeterminada para todas las aplicaciones protegidas contra la distorsión. Para un navegador específico, se envía la misma cookie a cada pestaña o instancia del navegador que interactúa con un dominio. Tenga en cuenta que si en distintas pestañas del navegador se cargan diferentes versiones de un sitio web, todas las pestañas compartirán la cookie \$1dpl. En esta situación, no es posible lograr una protección total contra la distorsión con la cookie \$1dpl y se debería pensar en la posibilidad de usar el encabezado `X-Amplify-Dpl` para protegerla. ## X-Amplify-Dpl ejemplo de encabezado En el siguiente ejemplo, se muestra el código de una página SSR de Next.js que accede a la protección contra distorsión a través del encabezado `X-Amplify-Dpl`. La página renderiza su contenido en función de una de sus rutas de API. La implementación que se utilizará en la ruta de la API se especifica mediante el encabezado `X-Amplify-Dpl`, que se establece en el valor 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 ... " }
} ```