カスタムヘッダー - AWS Amplifyホストする

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

カスタムヘッダー

カスタム HTTP ヘッダーを使用すると、HTTP レスポンスごとにヘッダーを指定することができます。レスポンスヘッダーは、デバッグ、セキュリティ、および情報提供に使用できます。ヘッダーは、AWS Management Consoleまたは、アプリのダウンロードと編集によってcustomHttp.ymlファイルを作成し、プロジェクトのルートディレクトリに保存します。詳細な手順については、「カスタムヘッダーの設定」を参照してください。

以前は、カスタム HTTP ヘッダーは、ビルド仕様 (buildspec) を編集して、アプリに指定されていましたAWS Management Consoleまたは、ダウンロードして更新することでamplify.ymlファイルを作成し、プロジェクトのルートディレクトリに保存します。この方法で指定されたカスタムヘッダーは buildspec とamplify.ymlファイルを開きます。手順については、「カスタムヘッダーの移行」を参照してください。

カスタムヘッダー YAML 形式

次の YAML 形式を使用してカスタムヘッダーを指定します。

customHeaders: - pattern: '*.json' headers: - key: 'custom-header-name-1' value: 'custom-header-value-1' - key: 'custom-header-name-2' value: 'custom-header-value-2' - pattern: '/path/*' headers: - key: 'custom-header-name-1' value: 'custom-header-value-2'

モノレポの場合は、次の YAML 形式を使用します。

applications: - appRoot: app1 customHeaders: - pattern: '**/*' headers: - key: 'custom-header-name-1' value: 'custom-header-value-1' - appRoot: app2 customHeaders: - pattern: '/path/*.json' headers: - key: 'custom-header-name-2' value: 'custom-header-value-2'

アプリにカスタムヘッダーを追加する場合、次の値に対して独自の値を指定します。

pattern

カスタムヘッダーは、パターンと一致するすべての URL ファイルパスに適用されます。

ヘッダー

ファイルパターンと一致するヘッダーを定義します。

key

カスタムヘッダーの名前。

カスタムヘッダーの値。

HTTP ヘッダーの詳細については、Mozilla のHTTP ヘッダー

カスタムヘッダーの設定

カスタムの HTTP ヘッダーを指定するには、2 つの方法があります。AWS Amplifyアプリ。ヘッダーは、AWS Management Consoleまたは、アプリのダウンロードと編集でヘッダーを指定することもできます。customHttp.ymlファイルをプロジェクトのルートディレクトリに保存します。

でアプリのカスタムヘッダーを設定するにはAWS Management Console

  1. にサインインします。AWS Management Console[] を開き、コンソールAmplify

  2. カスタムヘッダーを設定するアプリを選択します。

  3. ナビゲーションペインで [] を選択します。アプリの設定,カスタムヘッダー

  4. カスタムヘッダー仕様セクションで、[] を選択します。編集

  5. 編集ウィンドウで、カスタムヘッダーの情報をカスタムヘッダー YAML 形式

    1. を使用する場合pattern[] を選択し、一致するパターンを入力します。

    2. を使用する場合key[] に、カスタムヘッダーの名前を入力します。

    3. を使用する場合value[] に、カスタムヘッダーの値を入力します。

  6. [Save] (保存) を選択します。

  7. アプリを再デプロイして、新しいカスタムヘッダーを適用します。

    • CI/CD アプリの場合は、デプロイするブランチに移動し、このバージョンを再デプロイ。Git リポジトリから新しいビルドを実行することもできます。

    • 手動デプロイアプリの場合は、Amplify コンソールでアプリを再度デプロイします。

CustomHttp.yml ファイルを使用してカスタムヘッダーを設定するには

  1. にサインインします。AWS Management Console[] を開き、コンソールAmplify

  2. カスタムヘッダーを設定するアプリを選択します。

  3. ナビゲーションペインで [] を選択します。アプリの設定,カスタムヘッダー

  4. カスタムヘッダー仕様セクションで、[] を選択します。のダウンロード

  5. ダウンロードしたものを開きます。customHttp.yml任意のコードエディタにファイルを入力し、カスタムヘッダーの情報をカスタムヘッダー YAML 形式

    1. を使用する場合pattern[] を選択し、一致するパターンを入力します。

    2. を使用する場合key[] に、カスタムヘッダーの名前を入力します。

    3. を使用する場合value[] に、カスタムヘッダーの値を入力します。

  6. 編集した内容を保存するcustomHttp.ymlプロジェクトのルートディレクトリにファイルを指定します。モノレポで作業している場合は、customHttp.ymlリポジトリのルートにファイルを指定します。

  7. アプリを再デプロイして、新しいカスタムヘッダーを適用します。

    • CI/CD アプリの場合、新しい Git リポジトリから新しいビルドを実行します。customHttp.ymlファイルを開きます。

    • 手動デプロイアプリの場合、Amplify コンソールでアプリを再度デプロイし、新しいcustomHttp.ymlアップロードしたアーティファクトを含むファイル。

注記

で設定されたカスタムヘッダーcustomHttp.ymlファイルおよびアプリのルートディレクトリにデプロイすると、で定義されているカスタムヘッダーが上書きされます。カスタムヘッダー「」セクションAWS Management Console。

カスタムヘッダーの移行

以前は、カスタム HTTP ヘッダーは、ビルドスペックを編集して、アプリに指定されていました。AWS Management Consoleまたは、ダウンロードして更新することでamplify.ymlファイルを作成し、プロジェクトのルートディレクトリに保存します。buildspec と、カスタムヘッダーを移行することを強くお勧めします。amplify.ymlファイルを開きます。

でカスタムヘッダーを指定します。カスタムヘッダーの セクションAWS Management Consoleまたは、ダウンロードして編集することでcustomHttp.ymlファイルを開きます。

Amplify コンソールに保存されているカスタムヘッダーを移行するには

  1. にサインインします。AWS Management Console[] を開き、コンソールAmplify

  2. カスタムヘッダーの移行を実行するアプリを選択します。

  3. ナビゲーションペインで [] を選択します。アプリの設定,ビルドの設定。左アプリビルド仕様セクションで、アプリの buildspec を確認できます。

  4. 選択のダウンロード[] をクリックして、現在の buildspec のコピーを保存します。後でこのコピーを参照できます。

  5. ダウンロードが完了したら、[] を選択します。編集

  6. ステップ 9 の後半で使用するため、ファイル内のカスタムヘッダー情報をメモしておきます。左編集ウィンドウで、ファイルからカスタムヘッダーを削除し、保存

  7. ナビゲーションペインで [] を選択します。アプリの設定,カスタムヘッダー

  8. カスタムヘッダー仕様セクションで、[] を選択します。編集

  9. 編集ウィンドウで、手順 6 で削除したカスタムヘッダーの情報を入力します。

  10. [Save] (保存) を選択します。

  11. 新しいカスタムヘッダーを適用するブランチを再デプロイします。

カスタムヘッダーをamplify.yml から customHttp.yml に移行するには

  1. に移動します。amplify.ymlアプリケーションのルートディレクトリに現在デプロイされているファイル。

  2. オープンamplify.yml任意のコードエディタで。

  3. ステップ 8 の後半で使用するため、ファイル内のカスタムヘッダー情報をメモしておきます。ファイル内のカスタムヘッダーを削除します。 ファイルを保存して閉じます。

  4. にサインインします。AWS Management Console[] を開き、コンソールAmplify

  5. カスタムヘッダーを設定するアプリを選択します。

  6. ナビゲーションペインで [] を選択します。アプリの設定,カスタムヘッダー

  7. カスタムヘッダー仕様セクションで、[] を選択します。のダウンロード

  8. ダウンロードしたものを開きます。customHttp.yml任意のコードエディタにファイルを入力し、削除したカスタムヘッダーの情報を入力します。amplify.ymlステップ 3。

  9. 編集した内容を保存するcustomHttp.ymlプロジェクトのルートディレクトリにファイルを指定します。モノレポで作業している場合は、レポのルートにファイルを保存します。

  10. アプリを再デプロイして、新しいカスタムヘッダーを適用します。

    • CI/CD アプリの場合、新しい Git リポジトリから新しいビルドを実行します。customHttp.ymlファイルを開きます。

    • 手動デプロイアプリの場合、Amplify コンソールでアプリを再度デプロイし、新しいcustomHttp.ymlアップロードしたアーティファクトを含むファイル。

注記

で設定されたカスタムヘッダーcustomHttp.ymlファイルおよびアプリのルートディレクトリにデプロイすると、で定義されているカスタムヘッダーがオーバーライドされます。カスタムヘッダーの セクションAWS Management Console。

Monorepo カスタムヘッダー

Monorepo でアプリのカスタムヘッダーを指定する場合は、次の設定要件に注意してください。

  • モノレポには特定の YAML 形式があります。正しい構文については、「」を参照してください。カスタムヘッダー YAML 形式

  • Monorepo でアプリケーションのカスタムヘッダーを指定するには、カスタムヘッダーの セクションAWS Management Console。新しいカスタムヘッダーを適用するには、アプリケーションを再デプロイする必要があります。

  • コンソールを使用する代わりに、モノレポでアプリのカスタムヘッダーをcustomHttp.ymlファイルを開きます。保存する必要がありますcustomHttp.ymlリポジトリのルートにファイルを保存し、アプリケーションを再デプロイして新しいカスタムヘッダーを適用します。で指定したカスタムヘッダーcustomHttp.ymlファイルを使用して、指定したカスタムヘッダーを上書きします。カスタムヘッダーの セクションAWS Management Console。

セキュリティヘッダーの例

カスタムセキュリティヘッダーは、HTTPS を適用し、XSS 攻撃を回避して、ブラウザをクリックジャックから守ります。次の YAML 構文を使用して、カスタムセキュリティヘッダーをアプリに適用します。

customHeaders: - pattern: '**' headers: - key: 'Strict-Transport-Security' value: 'max-age=31536000; includeSubDomains' - key: 'X-Frame-Options' value: 'SAMEORIGIN' - key: 'X-XSS-Protection' value: '1; mode=block' - key: 'X-Content-Type-Options' value: 'nosniff' - key: 'Content-Security-Policy' value: "default-src 'self'"