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

# カスタムヘッダーの設定
<a name="setting-custom-headers"></a>

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

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

1. にサインイン AWS マネジメントコンソール し、[Amplify コンソール](https://console.aws.amazon.com/amplify/)を開きます。

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

1. ナビゲーションペインで、**[ホスティング]** の次に **[カスタムヘッダー]** を選択します。

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

1. **[カスタムヘッダーの編集]** ウィンドウで、[[カスタムヘッダーの YAML 形式]](custom-header-YAML-format.md) を使用してカスタムヘッダーの情報を入力します。

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

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

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

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

1. アプリを再デプロイして新しいカスタムヘッダーを適用します。
   + CI/CD アプリケーションの場合は、デプロイするブランチに移動し、「**このバージョンを再デプロイ**」を選択します。Git リポジトリから新しいビルドを実行することもできます。
   + 手動デプロイアプリの場合は、Amplify のコンソールでアプリを再度デプロイします。

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

1. にサインイン AWS マネジメントコンソール し、[Amplify コンソール](https://console.aws.amazon.com/amplify/)を開きます。

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

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

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

1. ダウンロードした `customHttp.yml` ファイルを任意のコードエディターで開き、[カスタムヘッダー YAML 形式](custom-header-YAML-format.md)を使用してカスタムヘッダーの情報を入力します。

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

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

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

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

1. アプリを再デプロイして新しいカスタムヘッダーを適用します。
   + CI/CD アプリの場合、新しい `customHttp.yml` ファイルを含む Git リポジトリから新しいビルドを実行します。
   + 手動デプロイアプリの場合、Amplify コンソールでアプリを再度デプロイし、アップロードしたアーティファクトに新しい `customHttp.yml` ファイルを含めます。

**注記**  
`customHttp.yml` ファイルに設定され、アプリのルートディレクトリにデプロイされたカスタムヘッダーは、Amplify コンソールの **[カスタムヘッダー]** セクションで定義されているカスタムヘッダーよりも優先されます。

## セキュリティカスタムヘッダーの例
<a name="example-security-headers"></a>

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

## キャッシュコントロールカスタムヘッダーの設定
<a name="example-cache-headers"></a>

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 ヘッダーの使用](Using-headers-to-control-cache-duration.md)」を参照してください。