AWS Amplify下如何为Gatsby项目page-data.json配置自定义cache-control请求头

Gatsby本身的构建流程不会为生成的静态文件附加HTTP响应头，所有自定义缓存规则都需要在AWS Amplify托管层配置，以下是两种可行的实现方式：

方法一：使用Amplify原生_headers文件配置（推荐） #

Amplify静态托管原生支持根目录下的_headers配置文件定义自定义响应头，适配Gatsby项目的放置规则：

• 把_headers文件放在项目源码的public/目录下，Gatsby构建时会将public/下的所有文件原样复制到构建输出根目录，Amplify才能识别到该配置
• 按如下格式编写_headers内容，匹配所有Gatsby生成的page-data.json文件：

/page-data/**/page-data.json
  Cache-Control: public, max-age=0, must-revalidate

规则说明：/page-data/**/page-data.json通配匹配任意路径层级下的page-data.json文件，覆盖所有Gatsby生成的页面数据文件，不会误匹配其他目录下的json文件。

方法二：在amplify.yml中配置自定义响应头 #

如果你习惯通过构建配置文件统一管理规则，也可以直接在项目根目录的amplify.yml（Amplify构建配置文件）中添加自定义头配置块，示例结构如下：

version: 1
appRoot: .
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
  # 新增自定义头配置
  customHeaders:
    - pattern: '/page-data/**/page-data.json'
      headers:
        - key: 'Cache-Control'
          value: 'public, max-age=0, must-revalidate'

配置验证步骤 #

重新部署完成后，可通过以下两种方式验证配置生效：

• 浏览器端：打开开发者工具的网络面板，访问任意page-data.json的请求（如首页对应的https://你的域名/page-data/index/page-data.json），查看响应头中Cache-Control字段是否为预期值
• 命令行：执行curl -I https://你的域名/page-data/index/page-data.json，从输出的响应头列表中确认Cache-Control配置正确

常见注意事项 #

• 不要把_headers文件放在Gatsby构建生成的临时public目录，必须放在项目源码的public目录下，避免后续构建时配置被覆盖丢失
• 路径匹配规则必须从根路径开始定义，Amplify不支持仅按后缀匹配的规则（如直接写*.json），避免误匹配其他静态资源的缓存规则
• 两种配置方式不要重复使用，若同时存在_headers文件和amplify.yml中的customHeaders配置，会按更具体的路径匹配优先级生效，易出现配置混乱

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