スキュー保護の仕組み - AWS Amplify ホスティング
X-Amplify-Dpl ヘッダーの例

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

スキュー保護の仕組み

ほとんどの場合、_dpl Cookie のデフォルトの動作は、スキュー保護のニーズに対応します。ただし、次のような高度なシナリオでは、X-Amplify-Dpl ヘッダーと dpl クエリパラメータを使用してスキュー保護を有効にするほうが適しています。

  • 複数のブラウザタブにウェブサイトを同時にロードする

  • サービスワーカーを使用する

Amplify は、クライアントに提供するコンテンツを決定するときに、受信リクエストを次の順序で評価します。

  1. X-Amplify-Dpl ヘッダー – アプリケーションはこのヘッダーを使用して、特定の Amplify デプロイにリクエストを送信できます このリクエストヘッダーは、process.env.AWS_AMPLIFY_DEPLOYMENT_ID の値を使用して設定できます。

  2. dpl クエリパラメータ – Next.js アプリケーションは、フィンガープリントされたアセット (.js ファイルと .css ファイル) へのリクエストに対して _dpl クエリパラメータを自動的に設定します。

  3. _dpl Cookie – これは、スキュー保護されたすべてのアプリケーションのデフォルトです。特定のブラウザの場合、ドメインとやり取りするブラウザタブまたはインスタンスごとに同じ Cookie が送信されます。

    異なるブラウザタブに異なるバージョンのウェブサイトがロードされている場合、_dpl Cookie はすべてのタブで共有されることに注意してください。このシナリオでは、_dpl Cookie で完全なスキュー保護を達成することはできません。スキュー保護に X-Amplify-Dpl ヘッダーを使用することを検討する必要があります。

X-Amplify-Dpl ヘッダーの例

次の例は、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>
}