カスタムヘッダー - AWS Amplify ホスティング
カスタムヘッダー YAML 形式カスタムヘッダーの設定カスタムヘッダーの移行モノレポカスタムヘッダーセキュリティヘッダー例カスタムキャッシュコントロールヘッダー

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

カスタムヘッダー

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

以前は、 でビルド仕様 (buildspec) を編集するか、 amplify.yml ファイルをダウンロードして更新し、プロジェクトのルートディレクトリに保存 AWS Management Console することで、アプリケーションにカスタム HTTP ヘッダーが指定されていました。この方法で指定されたカスタムヘッダーは、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

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

キー

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

value

カスタムヘッダーの値。

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

カスタムヘッダーの設定

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

アプリケーションのカスタムヘッダーを設定し、コンソールに保存するには

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

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

  3. ナビゲーションペインで、ホスティング を選択し、カスタムヘッダー を選択します。

  4. カスタムヘッダーページで、編集 を選択します。

  5. カスタムヘッダーの編集 ウィンドウで、カスタムヘッダー YAML 形式 を使用してカスタムヘッダーの情報を入力します。

    1. pattern には、一致するパターンを入力します。

    2. key に、カスタムヘッダーの名前を入力します。

    3. value に、カスタムヘッダーの値を入力します。

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

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

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

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

アプリケーションのカスタムヘッダーを設定し、リポジトリのルートに保存するには

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

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

  3. ナビゲーションペインで、ホスティング を選択し、カスタムヘッダー を選択します。

  4. カスタムヘッダーページで、YML のダウンロード を選択します。

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

    1. pattern には、一致するパターンを入力します。

    2. key に、カスタムヘッダーの名前を入力します。

    3. value に、カスタムヘッダーの値を入力します。

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

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

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

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

注記

customHttp.yml ファイルで設定され、アプリケーションのルートディレクトリにデプロイされたカスタムヘッダーは、Amplify コンソールのカスタムヘッダーセクションで定義されているカスタムヘッダーを上書きします。

カスタムヘッダーの移行

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

Amplify コンソールの「カスタムヘッダー」セクションでカスタムヘッダーを指定するか、 customHttp.yml ファイルをダウンロードして編集します。

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

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

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

  3. ナビゲーションペインで、ホスティング、ビルド設定 を選択します。「アプリビルド仕様」セクションでは、アプリのビルドスペックを確認できます。

  4. [ダウンロード] を選択して、現在のビルドスペックのコピーを保存します。設定を復元する必要がある場合、後でこのコピーを参照できます。

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

  6. ファイル内のカスタムヘッダー情報は、後ほどステップ 9 で使用するので、メモしておいてください。「編集」ウィンドウで、ファイルからカスタムヘッダーをすべて削除し、[保存] を選択します。

  7. ナビゲーションペインで、ホスティング、カスタムヘッダー を選択します。

  8. カスタムヘッダーページで、編集 を選択します。

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

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

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

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

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

  2. 適切なエディタで、amplify.ymlファイルを開きます。

  3. ファイル内のカスタムヘッダー情報は、後ほどステップ 8 で使用するので、メモしておいてください。ファイル内のカスタムヘッダーを削除します。ファイルを保存して閉じます。

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

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

  6. ナビゲーションペインで、ホスティング、カスタムヘッダー を選択します。

  7. 「カスタムヘッダー」ページで、「 のダウンロード」を選択します。

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

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

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

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

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

注記

customHttp.yml ファイルで設定され、アプリケーションのルートディレクトリにデプロイされたカスタムヘッダーは、Amplify コンソールのカスタムヘッダーセクションで定義されているカスタムヘッダーを上書きします。

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

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

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

  • Amplify コンソールのカスタムヘッダーセクションを使用して、モノレポ内のアプリケーションのカスタムヘッダーを指定できます。新しいカスタムヘッダーを適用するには、アプリケーションを再デプロイする必要があります。

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

セキュリティヘッダー例

カスタムセキュリティヘッダーによって、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'"

カスタムキャッシュコントロールヘッダー

Amplify でホストされるアプリケーションは、オリジンによって送信されるCache-Controlヘッダーを尊重します。ただし、定義したカスタムヘッダーで上書きする場合は除きます。Amplify は、200 OKステータスコードを含む正常なレスポンスにのみ Cache-Control カスタムヘッダーを適用します。これにより、エラーレスポンスがキャッシュされ、同じリクエストを行う他のユーザーに提供されるのを防ぐことができます。

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

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

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

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