翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# Amplify アプリのカスタムヘッダーの設定
カスタム HTTP ヘッダーを使用すると、HTTP レスポンスごとにヘッダーを指定することができます。レスポンスヘッダーは、デバッグ、セキュリティ、および情報提供に使用できます。ヘッダーは Amplify コンソールで指定するか、またはアプリの `customHttp.yml` ファイルをダウンロードして編集し、プロジェクトのルートディレクトリに保存することで指定できます。詳細な手順については、[カスタムヘッダーの設定](setting-custom-headers.md) を参照してください。
以前は、Amplify コンソールのビルド仕様 (buildspec) を編集するか、`amplify.yml` ファイルをダウンロードして更新し、プロジェクトのルートディレクトリに保存することで、アプリにカスタム HTTP ヘッダーを指定していました。この方法で指定されたカスタムヘッダーは、buildspec と `amplify.yml` ファイルから移行することを強くお勧めします。手順については、「[カスタムヘッダーのビルド仕様と amplify.yml からの移行](migrate-custom-headers.md)」を参照してください。
**Topics**
+ [カスタムヘッダーの YAML リファレンス](custom-header-YAML-format.md)
+ [カスタムヘッダーの設定](setting-custom-headers.md)
+ [カスタムヘッダーのビルド仕様と amplify.yml からの移行](migrate-custom-headers.md)
+ [モノレポカスタムヘッダーの要件](monorepo-custom-headers.md)
# カスタムヘッダーの 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 ヘッダー](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers)のリストを参照してください。
# カスタムヘッダーの設定
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 コンソールの **[カスタムヘッダー]** セクションで定義されているカスタムヘッダーよりも優先されます。
## セキュリティカスタムヘッダーの例
カスタムセキュリティヘッダーによって、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 ヘッダーの使用](Using-headers-to-control-cache-duration.md)」を参照してください。
# カスタムヘッダーのビルド仕様と amplify.yml からの移行
以前は、Amplify コンソールのビルド仕様を編集するか、`amplify.yml` ファイルをダウンロードして更新し、プロジェクトのルートディレクトリに保存することで、アプリにカスタム HTTP ヘッダーを指定していました。カスタムヘッダーをビルド使用と `amplify.yml` ファイルから移行することを強くお勧めします。
Amplify コンソールの **[カスタムヘッダー]** セクションでカスタムヘッダーを指定するか、または `customHttp.yml` ファイルをダウンロードして編集して指定します。
**Amplify のコンソールに保存されているカスタムヘッダーを移行するには**
1. にサインイン AWS マネジメントコンソール し、[Amplify コンソール](https://console.aws.amazon.com/amplify/)を開きます。
1. カスタムヘッダーの移行を実行するアプリを選択します。
1. ナビゲーションペインで **[ホスティング]**、**[ビルド設定]** を選択します。「**アプリビルド仕様**」セクションでは、アプリのビルドスペックを確認できます。
1. [**ダウンロード**] を選択して、現在のビルドスペックのコピーを保存します。設定を復元する必要がある場合、後でこのコピーを参照できます。
1. ダウンロードが完了したら、[**編集**]を選択します。
1. ファイル内のカスタムヘッダー情報は、後ほどステップ 9 で使用するので、メモしておいてください。「**編集**」ウィンドウで、ファイルからカスタムヘッダーをすべて削除し、[**保存**] を選択します。
1. ナビゲーションペインで、**[ホスティング]**、**[カスタムヘッダー]** を選択します。
1. **[カスタムヘッダー]** ページで、**[編集]** を選択します。
1. **[カスタムヘッダーの編集]** ウィンドウに、ステップ 6 で削除したカスタムヘッダーの情報を入力します。
1. **[保存]** を選択します。
1. 新しいカスタムヘッダーを適用したいブランチをすべて再デプロイします。
**カスタムヘッダーを amplify.yml から customHTTP.yml に移行するには**
1. アプリのルートディレクトリに現在デプロイされている `amplify.yml` ファイルに移動します。
1. 適切なエディタで、`amplify.yml`ファイルを開きます。
1. ファイル内のカスタムヘッダー情報は、後ほどステップ 8 で使用するので、メモしておいてください。ファイル内のカスタムヘッダーを削除します。ファイルを保存して閉じます。
1. にサインイン AWS マネジメントコンソール し、[Amplify コンソール](https://console.aws.amazon.com/amplify/)を開きます。
1. カスタムヘッダーを設定するアプリを選びます。
1. ナビゲーションペインで、**[ホスティング]**、**[カスタムヘッダー]** を選択します。
1. **[カスタムヘッダー]** ページで、**[ダウンロード]** を選択します。
1. ダウンロードした `customHttp.yml` ファイルを任意のコードエディターで開き、ステップ 3 の `amplify.yml` から削除したカスタムヘッダーの情報を入力します。
1. 編集した `customHttp.yml` ファイルをプロジェクトのルートディレクトリに保存します。モノレポを使用している場合は、リポジトリのルートにファイルを保存します。
1. アプリを再デプロイして新しいカスタムヘッダーを適用します。
+ CI/CD アプリの場合、新しい `customHttp.yml` ファイルを含む Git リポジトリから新しいビルドを実行します。
+ 手動デプロイアプリの場合、Amplify のコンソールにアプリを再度デプロイし、アップロードしたアーティファクトを含む新しい `customHttp.yml` ファイルを含めます。
**注記**
`customHttp.yml` ファイルで設定され、アプリのルートディレクトリにデプロイされたカスタムヘッダーは、Amplify コンソールの **[カスタムヘッダー]** セクションで定義されたカスタムヘッダーよりも優先されます。
# モノレポカスタムヘッダーの要件
モノレポでアプリにカスタムヘッダーを指定する場合、以下の設定要件に注意してください。
+ モノレポには特定の YAML 形式があります。正しい構文については、[カスタムヘッダーの YAML リファレンス](custom-header-YAML-format.md) を参照してください。
+ Amplify のコンソールの **[カスタムヘッダー]** セクションを使用して、モノレポ内のアプリケーションのカスタムヘッダーを指定できます。新しいカスタムヘッダーを適用するには、アプリケーションを再デプロイする必要があります。
+ コンソールを使用する代わりに、`customHttp.yml` ファイルのモノレポでアプリのカスタムヘッダーを指定することもできます。新しいカスタムヘッダーを適用するには、`customHttp.yml` ファイルをリポジトリのルートに保存し、アプリケーションを再デプロイする必要があります。`customHttp.yml` ファイル内で指定されたカスタムヘッダーは、Amplify コンソールの **[カスタムヘッダー]** セクションを使用して指定されたカスタムヘッダーよりも優先されます。