在 Cloudfront 中缓存 Amplify 静态图像

Question

【以下的问题经过翻译处理】 我有一个被托管在Amplify上的Vue.js应用程序。我使用vite进行构建，它会创建哈希静态文件（哈希值在每次推送时更改）。我想配置Amplify跳过自己的Cloudfront缓存逻辑，仅对我的资源进行永久缓存（1年）。这是否可能？

我已经像这样向Amplify添加了自定义缓存头：

```
customHeaders:
  - pattern: assets/*
    headers:
      - key: Cache-Control
        value: 'public,max-age=31536000,s-maxage=31536000,immutable'
```

现在，我确实看到了从Amplify返回这个缓存头，所以我的浏览器正在缓存这些资源，但我总是得到“x-cache: Miss from cloudfront”的响应头。

为什么Cloudfront不缓存这些响应呢？

Answer

【以下的回答经过翻译处理】 原来是用户的错误。我正在查看浏览器中缓存的响应，它缓存的是第一个响应，此时“Miss from cloudfront”是正确的。当我清除缓存后，下一个响应头中包含了“x-cache: Hit from cloudfront”。

在 Cloudfront 中缓存 Amplify 静态图像

Relevanter Inhalt