本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# Amplify 部署的倾斜保护
<a name="skew-protection"></a>

Amplify 应用程序可以使用部署倾斜保护功能来消除 Web 应用程序中客户端和服务器之间的版本倾斜问题。对 Amplify 应用程序应用倾斜保护后，无论何时进行部署，都可以确保客户端始终与正确版本的服务器端资源进行交互。

版本倾斜是 Web 开发者面临的一个常见挑战。当 Web 浏览器运行应用程序的过时版本而服务器运行新版本时，就会发生这种情况。这种差异可能会导致不可预测的行为和错误，并损害应用程序的用户体验。Amplify 部署倾斜保护功能会使在 Web 浏览器上运行的客户端固定为特定的部署。这样可以确保 Amplify 始终提供该特定部署的资源，从而保持客户端和服务器的同步。

随着您不断新部署，Amplify 的倾斜保护功能可以减少应用程序用户遇到的错误。此外还可以减少管理向后和向前兼容性问题所需的时间，从而提升开发者体验。

倾斜保护功能详情：

**支持的应用程序类型**  
您可以为使用 Amplify 支持的任何框架创建的静态和 SSR 应用程序添加倾斜保护。应用程序可以从 Git 存储库部署，也可以手动部署。  
您无法为部署到 `WEB_DYNAMIC` 平台（Next.js 版本 11 或更早版本）的应用程序添加倾斜保护。

**Duration**  
对于静态应用程序，Amplify 提供为期一周的部署倾斜保护。对于 SSR 应用程序，我们保证为不超过八个早期的部署提供倾斜保护。

**成本**  
向应用程序添加倾斜保护不会产生额外成本。

**性能注意事项**  
为应用程序启用倾斜保护后，Amplify 必须更新其 CDN 缓存配置。因此在启用倾斜保护后，预计首次部署最长会需要十分钟时间。

**Topics**
+ [为 Amplify 应用程序配置部署倾斜保护](configure-skew-protection.md)
+ [倾斜保护的工作原理](skew-protection-headers.md)

# 为 Amplify 应用程序配置部署倾斜保护
<a name="configure-skew-protection"></a>

您可以使用 Amplify 控制台、 AWS Command Line Interface或，为应用程序添加或移除部署偏斜保护。 SDKs此功能将在分支级别应用。只有在为分支启用倾斜保护后进行的新部署才会受到倾斜保护。

要使用或添加或移除部署偏差保护 SDKs，请使用`CreateBranch.enableSkewProtection`和`UpdateBranch.enableSkewProtection`字段。 AWS CLI 有关更多信息，请参阅 *Amplify API 参考*文档[UpdateBranch](https://docs.aws.amazon.com/amplify/latest/APIReference/API_UpdateBranch.html)中的[CreateBranch](https://docs.aws.amazon.com/amplify/latest/APIReference/API_CreateBranch.html)和。

如果要移除特定的部署以不再为其提供服务，请使用 `DeleteJob` API。有关更多信息，请参阅 *Amplify API 参考文档[DeleteJob](https://docs.aws.amazon.com/amplify/latest/APIReference/API_DeleteJob.html)*中的。



目前只能为已部署到 Amplify Hosting 的应用程序启用倾斜保护。请按照以下说明操作，通过 Amplify 控制台为分支添加倾斜保护。

**为 Amplify 应用程序的分支启用倾斜保护**

1. 登录 AWS 管理控制台 并打开 Amplify 控制台，网址为。[https://console.aws.amazon.com/amplify/](https://console.aws.amazon.com/amplify/)

1. 在**所有应用程序**页面上，选择要启用倾斜保护的已部署应用程序的名称。

1. 在导航窗格中，依次选择**应用程序设置**和**分支设置**。

1. 在**分支**部分中，选择需要更新的分支的名称。

1. 在**操作**菜单上，选择**启用倾斜保护**。

1. 在确认窗口中选择**确认**。现在已为该分支启用倾斜保护。

1. 重新部署应用程序的分支。只有在启用倾斜保护之后进行的部署才会受到倾斜保护。

请按照以下说明操作，通过 Amplify 控制台为应用程序的分支移除倾斜保护。

**为 Amplify 应用程序的分支移除倾斜保护**

1. 登录 AWS 管理控制台 并打开 Amplify 控制台，网址为。[https://console.aws.amazon.com/amplify/](https://console.aws.amazon.com/amplify/)

1. 在**所有应用程序**页面上，选择要为其移除倾斜保护的已部署应用程序的名称。

1. 在导航窗格中，依次选择**应用程序设置**和**分支设置**。

1. 在**分支**部分中，选择需要更新的分支的名称。

1. 在**操作**菜单上，选择**禁用倾斜保护**。现在已为该分支禁用倾斜保护，将只提供最新内容。

# 倾斜保护的工作原理
<a name="skew-protection-headers"></a>

在大多数情况下，\$1dpl cookie 的默认行为即可满足您的倾斜保护需求。但对于以下高级应用场景，建议使用 `X-Amplify-Dpl` 标头和 `dpl` 查询参数启用倾斜保护。
+ 同时在多个浏览器选项卡中加载您的网站
+ 使用服务 Worker 节点

在确定要提供给客户端的内容时，Amplify 会按以下顺序评估传入的请求：

1. **`X-Amplify-Dpl` 标头**：应用程序可以使用此标头将请求定向到特定的 Amplify 部署。可以使用 `process.env.AWS_AMPLIFY_DEPLOYMENT_ID` 的值来设置此请求标头。

1. **`dpl` 查询参数**：对于对指纹资源（.js 和.css 文件）的请求，Next.js 应用程序会自动设置 \$1dpl 查询参数。

1. **\$1dpl cookie**：这是所有受倾斜保护的应用程序的默认设置。对于特定的浏览器，会为每个与域交互的浏览器选项卡或实例发送相同的 Cookie。

   请注意，如果不同的浏览器选项卡加载了同一个网站的不同版本，则所有选项卡都会共享 \$1dpl cookie。对于此场景，使用 \$1dpl cookie 无法实现完全的倾斜保护，而应考虑使用 `X-Amplify-Dpl` 标头进行倾斜保护。

## X-Amplify-Dpl 标题示例
<a name="skew-protection-header-example"></a>

以下示例演示了通过 `X-Amplify-Dpl` 标头来访问倾斜保护功能的 Next.js SSR 页面的代码。该页面根据其一个 api 路由来呈现其内容。要提供给 api 路由的部署是使用 `X-Amplify-Dpl` 标头来指定的，其值设置为 `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 <div>
        {data ? JSON.stringify(data) : "Loading ... " }
    </div>
}
```