翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# Amplify デプロイのスキュー保護
<a name="skew-protection"></a>

デプロイスキュー保護は、ウェブアプリケーションのクライアントとサーバー間のバージョンスキューの問題を排除するために、Amplify アプリケーションで使用できます。Amplify アプリケーションにスキュー保護を適用すると、デプロイの発生時期に関係なく、クライアントが常に正しいバージョンのサーバー側アセットとやり取りできるようになります。

バージョンスキューは、ウェブデベロッパーにとって一般的な課題です。これは、ウェブブラウザが古いバージョンのアプリケーションを実行し、サーバーが新しいバージョンを実行している場合に発生します。この不一致により、アプリケーションのユーザーに予期しない動作、エラー、エクスペリエンスの低下が発生する可能性があります。Amplify デプロイスキュー保護機能は、ウェブブラウザで実行されているクライアントを特定のデプロイにピン留めします。これにより、Amplify は常にその特定のデプロイのアセットを提供し、クライアントとサーバーの同期を維持します。

Amplify のスキュー保護機能により、新しいデプロイをリリースする際のアプリケーションのユーザーのエラーを減らすことができます。また、後方互換性と前方互換性の問題の管理に費やす時間を短縮することで、デベロッパーのエクスペリエンスを向上させることもできます。

スキュー保護機能の詳細:

**サポートされるアプリケーションタイプ**  
Amplify がサポートする任意のフレームワークで作成された静的アプリケーションと SSR アプリケーションにスキュー保護を追加できます。アプリケーションは、Git リポジトリまたは手動デプロイからデプロイできます。  
`WEB_DYNAMIC` プラットフォームにデプロイされているアプリケーション (Next.js バージョン 11 以前) にスキュー保護を追加することはできません。

**時間**  
静的アプリケーションの場合、Amplify は 1 週間のデプロイを提供します。SSR アプリケーションの場合、最大 8 つ前までのデプロイに対してスキュー保護が保証されます。

**Cost**  
アプリケーションにスキュー保護を追加するために、追加コストはかかりません。

**パフォーマンスに関する考慮事項**  
アプリケーションでスキュー保護が有効になっている場合、Amplify は CDN キャッシュ設定を更新する必要があります。したがって、スキュー保護を有効にした後の最初のデプロイには最大 10 分かかることが予想されます。

**Topics**
+ [Amplify アプリケーションのデプロイスキュー保護の設定](configure-skew-protection.md)
+ [スキュー保護の仕組み](skew-protection-headers.md)

# Amplify アプリケーションのデプロイスキュー保護の設定
<a name="configure-skew-protection"></a>

Amplify コンソール、、または SDKs を使用して、アプリケーションのデプロイスキュー保護を追加 AWS Command Line Interfaceまたは削除できます。この機能はブランチレベルに適用されます。ブランチに対してスキュー保護が有効になった後に行われる新しいデプロイのみがスキュー保護されます。

 AWS CLI または SDKs を使用してデプロイスキュー保護を追加または削除するには、 `CreateBranch.enableSkewProtection` および `UpdateBranch.enableSkewProtection`フィールドを使用します。詳細については、「*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://console.aws.amazon.com/amplify/](https://console.aws.amazon.com/amplify/) で Amplify コンソールを開きます。

1. **[すべてのアプリ]** ページで、スキュー保護を有効にするデプロイ済みアプリの名前を選択します。

1. ナビゲーションペインで **[アプリの設定]** を選択してから、**[ブランチ設定]** を選択します。

1. **[ブランチ]** セクションで、更新するブランチの名前を選択します。

1. **[アクション]** メニューで、**[スキュー保護を有効にする]** を選択します。

1. 確認ウィンドウで、**[確認]** を選択します。ブランチでスキュー保護が有効になりました。

1. アプリケーションブランチを再デプロイします。スキュー保護が有効になった後に行われたデプロイのみがスキュー保護されます。

Amplify コンソールを使用してアプリケーションのブランチからスキュー保護を除去するには、次の手順に従います。

**Amplify アプリケーションのブランチからスキュー保護を除去する**

1. にサインイン AWS マネジメントコンソール し、[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 ルートの 1 つに基づいてコンテンツをレンダリングします。API ルートに提供するデプロイは、`process.env.AWS_AMPLIFY_DEPLOYMENT_ID` の値に設定されている `X-Amplify-Dpl` ヘッダーを使用して指定します。

```
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>
}
```