CRA部署至AWS Amplify后customHttp.yml缓存头未生效问题

一、缓存头不生效的核心修复 #

你当前customHttp.yml里的路径错了——Amplify部署CRA时，会把build目录的内容直接作为网站根目录，所以请求静态资源时根本不会带/build前缀，这就导致你的缓存规则完全匹配不到资源。

修改后的正确配置：

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

还要注意两个细节：

• customHttp.yml必须放在项目根目录，不能丢到build文件夹里，Amplify只会读取根目录的配置文件
• 改完配置必须在Amplify控制台重新部署一次，不然新规则不会生效

二、小图片加载慢的排查方向 #

1. 先搞定缓存问题：缓存头生效后，第二次请求会直接从本地缓存拿，加载速度会立刻上来
2. 核对图片实际路径：确认你本地build目录里的图片结构和配置匹配——比如如果图片是放在CRA的public/images/home下，部署后路径就是/images/home/；如果是在src/assets里，打包后会进/static/media/，要对应调整配置里的pattern
3. 检查Amplify分发设置：去Amplify控制台的「应用设置」→「分发」里，确保开了「自动压缩」，CDN边缘缓存的默认行为没被修改
4. 用浏览器工具抓包：打开开发者工具的「网络」面板，看图片请求的响应头里有没有正确的Cache-Control，同时看耗时是卡在DNS、TCP连接还是下载阶段，针对性解决

内容的提问来源于stack exchange，提问作者user9083933