Sample file caching custom headers to add to an AWS Amplify build-settings.yml file

aws-amplify-build-settings-cache-static-files.yml

frontend:
  customHeaders:
    # cache static assets! (can I just use a glob for this, e.g., '**/*.{js,css,gif,ico,jpg,png,svg,mp4,webm}' ?)
    # js
    - pattern: '**/*.js'
      headers: [ { key: 'Cache-Control', value: 'public,max-age=31536000,immutable' } ]
    # css
    - pattern: '**/*.css'
      headers: [ { key: 'Cache-Control', value: 'public,max-age=31536000,immutable' } ]
    # images
    - pattern: '**/*.gif'
      headers: [ { key: 'Cache-Control', value: 'public,max-age=31536000,immutable' } ]
    - pattern: '**/*.ico'
      headers: [ { key: 'Cache-Control', value: 'public,max-age=31536000,immutable' } ]
    - pattern: '**/*.jpg'
      headers: [ { key: 'Cache-Control', value: 'public,max-age=31536000,immutable' } ]
    - pattern: '**/*.png'
      headers: [ { key: 'Cache-Control', value: 'public,max-age=31536000,immutable' } ]
    - pattern: '**/*.svg'
      headers: [ { key: 'Cache-Control', value: 'public,max-age=31536000,immutable' } ]
    # videos
    - pattern: '**/*.mp4'
      headers: [ { key: 'Cache-Control', value: 'public,max-age=31536000,immutable' } ]
    - pattern: '**/*.webm'
      headers: [ { key: 'Cache-Control', value: 'public,max-age=31536000,immutable' } ]

This is a gist representing a comment I made on the AWS Amplify forums about how to cache static files properly: https://forums.aws.amazon.com/thread.jspa?threadID=306225#jive-message-918563

The idea is to add this customHeaders section to the frontend part of your build-settings.yml for your AWS Amplify project in order to aggressively cache static assets. This assumes that the content you’re serving for these suffixes is expected to be cached forever and any changes will have a new path, e.g., content-based hashing.