Cache Amplify static images in Cloudfront

Question

I have a Vue.js application hosted on Amplify. I use vite for building, which creates hashed static files (the hash changes on every push). I would like to configure Amplify to skip it's own Cloudfront cache logic, and simply cache my assets forever (well, 1 year). Is this possible?

I've added custome caching headers to Amplify like this:

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

And now, I do see that this cache header is returned from Amplify, so my browser is now caching these assets, but I *always* get the `x-cache: Miss from cloudfront` response header.

Why isn't Cloudfront caching these responses?

Accepted Answer

This turned out to be user error. I was viewing a response cached in the browser, and the response it cached was the first, at which point `Miss from cloudfront` was correct. When I cleared the cache, the next response I got had the header `x-cache: Hit from cloudfront`.

Answer

The reason that CloudFront is not caching the responses is likely because the responses are including a query string, and CloudFront is configured to treat query strings as unique resources. This means that CloudFront will not cache the responses with query strings.

To fix this, you will need to configure CloudFront to ignore query strings when caching the resources. You can do this by going to the CloudFront distribution settings in the AWS Management Console, and under the "Behaviors" tab, select the behavior associated with your assets and set "Forward Query Strings" to "yes" and "Query String Cache Keys" to "none". This will tell CloudFront to ignore the query strings when caching the resources and use the headers you specified.

Cache Amplify static images in Cloudfront

Relevant content