Customhttp.yml headers are not being applied on amplify in CRA

Question

I have deployed my application on AWS amplify. And I have added customHttp.yml file on root level with cache headers .But this headers are not being applied. and images inside static folder are taking very long time even image sizes are not more than 10KB .

customHeaders:
      - pattern: '/build/static/media/*.{webp,jpg,jpeg,png,svg,ico}'
        headers:
        - key: 'Cache-Control'
          value: 'public, max-age=31536000, immutable'
      - pattern: '/build/images/home/*.{webp,jpg,jpeg,png,svg,ico}'
        headers:
        - key: 'Cache-Control'
          value: 'public, max-age=31536000, immutable'
      - pattern: '/build/images/sportsbook/*.{webp,jpg,jpeg,png,svg,ico}'
        headers:
        - key: 'Cache-Control'
          value: 'public, max-age=31536000, immutable'
      - pattern: '/build/static/js/*.js'
        headers:
        - key: 'Cache-Control'
          value: 'public, max-age=31536000, immutable'
      - pattern: '/build/static/css/*.css'
        headers:
        - key: 'Cache-Control'
          value: 'public, max-age=31536000, immutable'

Answer 1

Have you verified that the customHttp.yml is being applied, by navigating to the Custom Headers settings page in AWS Amplify console?

max-age is overridden by s-maxage (for shared cache); it's possible there's an s-maxage header specified somewhere that's overriding your value. In any case s-maxage is typically used for edge caching scenarios like yours, so I'd recommend switching to it.

Failing that, how are you sure the response wasn't fulfilled by cache? Does the Last-Modified response header always correspond to the request time?

Also Amplify caps the s-maxage value to 1 day; this isn't the cause of your issue but worth noting.