Cache Amplify static images in Cloudfront

0

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?

已提問 1 年前檢視次數 662 次
2 個答案
0
已接受的答案

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.

已回答 1 年前
profile picture
專家
已審閱 2 個月前
0

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.

已回答 1 年前
  • No, the URLs do not contain query strings. But what do you mean that I can change this by altering the CloudFront distribution? Amplify creates the distribution itself, and I don't think I have any direct access to it, isn't that right? They certainly do not appear on my CloudFront dashboard.

您尚未登入。 登入 去張貼答案。

一個好的回答可以清楚地回答問題並提供建設性的意見回饋,同時有助於提問者的專業成長。

回答問題指南