本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

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

Amplify 應用程式可以使用部署扭曲保護，以消除 Web 應用程式中用戶端和伺服器之間的版本扭曲問題。當您將偏斜保護套用至 Amplify 應用程式時，無論部署何時發生，都可以確保您的用戶端一律與正確的伺服器端資產版本互動。

版本扭曲是 Web 開發人員的常見挑戰。當 Web 瀏覽器執行過時版本的應用程式，且伺服器執行新的應用程式時，就會發生這種情況。此差異可能會導致無法預測的行為、錯誤，以及應用程式使用者的降級體驗。Amplify 部署扭曲保護功能會將在 Web 瀏覽器上執行的用戶端釘選至特定部署。這可確保 Amplify 始終為該特定部署提供資產，保持用戶端和伺服器同步。

Amplify 的扭曲保護功能可在您發佈新部署時減少應用程式使用者的錯誤。它也可以透過減少管理回溯和轉送相容性問題所花費的時間來改善開發人員體驗。

偏斜保護功能詳細資訊：

**支援的應用程式類型**  
您可以將偏斜保護新增至使用 Amplify 支援的任何架構建立的靜態和 SSR 應用程式。您可以從 Git 儲存庫或手動部署部署應用程式。  
您無法將偏斜保護新增至部署到`WEB_DYNAMIC`平台的應用程式 (Next.js 11 版或更早版本）。

**持續時間**  
對於靜態應用程式，Amplify 提供一週的部署。對於 SSR 應用程式，我們保證最多可提供八個先前部署的偏斜保護。

**Cost**  
將偏斜保護新增至應用程式無需額外費用。

**效能考量**  
為應用程式啟用偏斜保護時，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 新增 AWS CLI 或移除部署扭曲保護，請使用 `CreateBranch.enableSkewProtection`和 `UpdateBranch.enableSkewProtection` 欄位。如需詳細資訊，請參閱 *Amplify API 參考*文件中的 [CreateBranch](https://docs.aws.amazon.com/amplify/latest/APIReference/API_CreateBranch.html) 和 [UpdateBranch](https://docs.aws.amazon.com/amplify/latest/APIReference/API_UpdateBranch.html)。

如果您想要移除特定部署，使其不再提供服務，請使用 `DeleteJob` API。如需詳細資訊，請參閱 *Amplify API 參考*文件中的 [DeleteJob](https://docs.aws.amazon.com/amplify/latest/APIReference/API_DeleteJob.html)。



目前，您只能在已部署至 Amplify Hosting 的應用程式上啟用偏斜保護。使用以下指示，使用 Amplify 主控台將偏斜保護新增至分支。

**啟用 Amplify 應用程式分支的偏斜保護**

1. 登入 AWS 管理主控台 ，並在 https：//[https://console.aws.amazon.com/amplify/](https://console.aws.amazon.com/amplify/) 開啟 Amplify 主控台。

1. **在所有應用程式**頁面上，選擇要啟用扭曲保護的應用程式名稱。

1. 在導覽窗格中，選擇**應用程式設定**，然後選擇**分支設定**。

1. 在**分支**區段中，選擇要更新的分支名稱。

1. 在**動作**功能表中，選擇**啟用偏斜保護**。

1. 在確認視窗中，選擇**確認**。分支現在已啟用偏斜保護。

1. 重新部署您的應用程式分支。只有啟用偏斜保護之後進行的部署才會受到偏斜保護。

使用以下指示，使用 Amplify 主控台從應用程式分支移除偏斜保護。

**從 Amplify 應用程式分支移除偏斜保護**

1. 登入 AWS 管理主控台 ，並在 https：//[https://console.aws.amazon.com/amplify/](https://console.aws.amazon.com/amplify/) 開啟 Amplify 主控台。

1. **在所有應用程式**頁面上，選擇要移除扭曲保護的已部署應用程式名稱。

1. 在導覽窗格中，選擇**應用程式設定**，然後選擇**分支設定**。

1. 在**分支**區段中，選擇要更新的分支名稱。

1. 在**動作**功能表中，選擇**停用偏斜保護**。分支的偏斜保護現在已停用，而且只會提供最新的內容。

# 扭曲保護的運作方式
<a name="skew-protection-headers"></a>

在大多數情況下，\$1dpl Cookie 的預設行為將滿足您的扭曲保護需求。不過，在下列進階案例中，使用 `X-Amplify-Dpl`標頭和`dpl`查詢參數更能啟用偏斜保護。
+ 同時在多個瀏覽器索引標籤中載入您的網站
+ 使用 服務工作者

Amplify 在決定要提供給用戶端的內容時，會依下列順序評估傳入請求：

1. **`X-Amplify-Dpl` 標頭** – 應用程式可以使用此標頭將請求導向特定 Amplify 部署。您可以使用 的值來設定此請求標頭`process.env.AWS_AMPLIFY_DEPLOYMENT_ID`。

1. **`dpl` 查詢參數** – Next.js 應用程式會自動為對指紋資產 (.js 和 .css 檔案） 的請求設定 \$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>
}
```