カスタムヘッダー YAML 形式カスタムヘッダーの設定カスタムヘッダーの移行モノレポカスタムヘッダーセキュリティヘッダーの例キャッシュ制御ヘッダーの例

カスタムヘッダー

カスタム 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 ファイルパスに適用されます。
headers: ファイルパターンと一致するヘッダーを定義します。
key: カスタムヘッダーの名前。
値: カスタムヘッダーの値。

HTTP ヘッダーの詳細については、Mozilla の HTTP ヘッダーのリストを参照してください。

カスタムヘッダーの設定

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

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

AWS Management Consoleにログインして Amplify コンソールを開きます。
カスタムヘッダーを設定するアプリを選択します。
ナビゲーションペインで、[アプリ設定]、[カスタムヘッダー] を選択します。
「カスタムヘッダーの仕様」セクションで、「編集」を選択します。
編集ウィンドウで、カスタムヘッダー YAML 形式を使用してカスタムヘッダーの情報を入力します。
1. にはpattern、一致するパターンを入力してください。
2. にはkey、カスタムヘッダーの名前を入力します。
3. にはvalue、カスタムヘッダーの値を入力します。
[Save] (保存) を選択します。
アプリを再デプロイして新しいカスタムヘッダーを適用します。
- CI/CD アプリの場合、デプロイするブランチに移動し、「このバージョンを再デプロイ」を選択します。Git リポジトリから新しいビルドを実行することもできます。
- 手動デプロイアプリの場合、Amplify コンソールでアプリを再度デプロイします。

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

AWS Management Consoleにログインして Amplify コンソールを開きます。
カスタムヘッダーを設定するアプリを選択します。
ナビゲーションペインで、[アプリ設定]、[カスタムヘッダー] を選択します。
「カスタムヘッダーの仕様」セクションで、「ダウンロード」を選択します。
customHttp.ymlダウンロードしたファイルを任意のコードエディターで開き、カスタムヘッダー YAML 形式を使用してカスタムヘッダーの情報を入力します。
1. にはpattern、一致するパターンを入力してください。
2. にはkey、カスタムヘッダーの名前を入力します。
3. にはvalue、カスタムヘッダーの値を入力します。
customHttp.yml編集したファイルをプロジェクトのルートディレクトリに保存します。モノレポで作業している場合は、customHttp.ymlファイルをリポジトリのルートに保存してください。
アプリを再デプロイして新しいカスタムヘッダーを適用します。
- CI/CD アプリケーションの場合は、新しいファイルを含む新しいビルドを Git リポジトリから実行します。customHttp.yml
- 手動デプロイアプリの場合、Amplify コンソールにアプリを再度デプロイし、customHttp.ymlアップロードしたアーティファクトに新しいファイルを含めます。

注記

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

カスタムヘッダーの移行

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

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

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

AWS Management Consoleにログインして Amplify コンソールを開きます。
カスタムヘッダーの移行を実行するアプリを選択します。
ナビゲーションペインで、[アプリ設定]、[ビルド設定] を選択します。アプリビルド仕様セクションでは、アプリのビルドスペックを確認できます。
[ダウンロード] を選択して、現在のビルドスペックのコピーを保存します。設定を復元する必要がある場合は、後でこのコピーを参照できます。
ダウンロードが完了したら、[編集] を選択します。
このファイル内のカスタムヘッダ情報は、ステップ 9 で後ほど使用するので、書き留めておいてください。編集ウィンドウで、ファイルから任意のカスタムヘッダーを削除し、[保存] を選択します。
ナビゲーションペインで、[アプリ設定]、[カスタムヘッダー] を選択します。
「カスタムヘッダーの仕様」セクションで、「編集」を選択します。
編集ウィンドウで、ステップ 6 で削除したカスタムヘッダーの情報を入力します。
[Save] (保存) を選択します。
新しいカスタムヘッダーを適用したいブランチを再デプロイします。

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

amplify.ymlアプリのルートディレクトリに現在デプロイされているファイルに移動します。
amplify.yml任意のコードエディターで開きます。
ステップ 8 で後で使用するので、ファイル内のカスタムヘッダー情報を書き留めておきます。ファイル内のカスタムヘッダーを削除します。ファイルを保存して閉じます。
AWS Management Consoleにログインして Amplify コンソールを開きます。
カスタムヘッダーを設定するアプリを選択します。
ナビゲーションペインで、[アプリ設定]、[カスタムヘッダー] を選択します。
「カスタムヘッダーの仕様」セクションで、「ダウンロード」を選択します。
customHttp.ymlダウンロードしたファイルを任意のコードエディターで開き、手順 3 amplify.yml で削除したカスタムヘッダーの情報を入力します。
customHttp.yml編集したファイルをプロジェクトのルートディレクトリに保存します。モノレポで作業している場合は、ファイルをリポジトリのルートに保存してください。
アプリを再デプロイして新しいカスタムヘッダーを適用します。
- CI/CD アプリケーションの場合は、新しいファイルを含む新しいビルドを Git リポジトリから実行します。customHttp.yml
- 手動デプロイアプリの場合、Amplify コンソールにアプリを再度デプロイし、customHttp.ymlアップロードしたアーティファクトを含む新しいファイルを含めます。

注記

customHttp.ymlファイルに設定され、アプリケーションのルートディレクトリにデプロイされたカスタムヘッダーは、の「カスタムヘッダー」セクションで定義されているカスタムヘッダーよりも優先されます。AWS Management Console

モノレポカスタムヘッダー

モノレポでアプリのカスタムヘッダーを指定するときは、次の設定要件に注意してください。

モノレポには特定のYAML形式があります。正しい構文については、を参照してくださいカスタムヘッダー YAML 形式。
のカスタムヘッダーセクションを使用して、モノレポ内のアプリケーションのカスタムヘッダーを指定できます。AWS Management Console新しいカスタムヘッダーを適用するには、アプリケーションを再デプロイする必要があることに注意してください。
コンソールを使用する代わりに、ファイル内のモノレポでアプリのカスタムヘッダーを指定できます。customHttp.ymlcustomHttp.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'"

キャッシュ制御ヘッダーの例

s-maxageディレクティブを手動で調整して、アプリのパフォーマンスとデプロイの可用性をより細かく制御できます。たとえば、コンテンツがエッジにキャッシュされる時間を長くするには、デフォルトの 600 秒 (10 分) s-maxage よりも長い値に更新して有効期間 (TTL) を手動で増やすことができます。

のカスタム値を指定するにはs-maxage、次の YAML 形式を使用します。この例では、関連するコンテンツを 3600 秒 (1 時間) にわたってエッジにキャッシュしたままにします。


customHeaders:
  - pattern: '/img/*'
    headers:
      - key: 'Cache-Control' 
        value: 's-maxage=3600'

ヘッダーによるアプリケーションパフォーマンスの制御の詳細については、を参照してくださいヘッダーを使用してキャッシュ時間を制御する。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

環境変数

受信ウェブフック