CloudFrontとAmplifyではHTTPレスポンスヘッダの優先度が異なる？

結論

CloudFrontのキャッシュビヘイビアと、Amplifyのカスタムヘッダでは優先順位が異なる！

CloudFrontの場合

最初に提示した ワイルドカードルールに従ったビヘイビアが選ばれる
つまり、複数のパスパターンにマッチする場合は、最初にマッチしたものが適用される

Amplifyの場合

最後に提示した ワイルドカードルールに従ったパスパターンが選ばれる
つまり、複数のパスパターンにマッチする場合は、最後にマッチしたものが適用される

↓ この場合、**/* に一致する/assets/* でも、Cache-Control = s-maxage=3600が適用される！
この挙動めっちゃ気持ち悪いのでCloudFrontに統一してほしい

customHttp.yml

applications:
  - customHeaders:
      - pattern: '**/*'
        headers:
          - key: 'Cache-Control'
            value: 'no-store'
      - pattern: '/assets/*'
        headers:
          - key: 'Cache-Control'
            value: 's-maxage=36000'

(おまけ) HTTPレスポンスヘッダの追加方法

Cloudfrontの場合

キャッシュビヘイビアの設定で、HTTPレスポンスヘッダを追加できる。
また、レスポンスヘッダポリシーを設定することで、HTTPレスポンスヘッダをテンプレート化できる。
https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/modifying-response-headers.html

Amplifyの場合

デフォルトではHTTPレスポンスヘッダを追加することはできないが、パフォーマンスモードを有効化している時にカスタムヘッダの設定をすることで、HTTPレスポンスヘッダを追加することができる。
https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/custom-headers.html

一言

AWS Amplifyは独自の仕様がいっぱいあって難しい😭