カスタムヘッダーの設定 - AWS Amplify ホスティング
セキュリティカスタムヘッダーの例キャッシュコントロールカスタムヘッダーの設定

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

カスタムヘッダーの設定

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 コンソールの [カスタムヘッダー] セクションで定義されているカスタムヘッダーよりも優先されます。

セキュリティカスタムヘッダーの例

カスタムセキュリティヘッダーによって、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 ステータスコードで成功したレスポンスにのみキャッシュコントロールカスタムヘッダーを適用します。これにより、エラー応答がキャッシュされ、同じリクエストを行う他のユーザーに送信されるのを防ぎます。

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'

ヘッダーによるアプリケーションパフォーマンス制御の詳細については、「アプリのパフォーマンスを向上させるような Cache-Control ヘッダーの使用」を参照してください。