28

I have a amazon cloudfront distribution that creates a 'origin' to my CDN. In my behavior, I set the Max TTL, Min TTL and default TTL. But my response header does't return the Cache-control header in my static files that are redirected. How to set the cache-control? I need this for the google page insights

Files to create cache-control

My header responses

Improve this question
1
  • Could you find a solution to this?
    – Dodo
    Commented Nov 25, 2020 at 6:08

4 Answers 4

Reset to default
43

You can add a Cache-Control header to your CloudFront instance without the use of functions.

  • Go to AWS Console and navigate to the CloudFront instance
  • Go to Policies -> Response Headers and click on "Create response header policy" under custom policies. If you have an existing policy edit it.
  • In the next screen under Custom headers add, Cache-Control header along with the max age value you want. This value can be set to override origin if you want it.
  • Now go to your Distribution and navigate to the Behaviours tab.
  • In your default behaviour, under the Response headers policy select the one you just created.

enter image description here

All your responses will now include the cache headers you have set.

Improve this answer
4
  • 4
    Note that this is a recent feature, only released in November 2021. It absolutely solves the original problem, though, and is definitely the best solution now!
    – ThirstyMonkey
    Commented Jan 13, 2022 at 7:08
  • 7
    Someone looking to set the cache-control value (for existing and future files) to a CloudFront distribution that uses S3 as source will most certainly want to enable the Origin override option. That's because, afaik, there is no way of setting a default cache-control value for an S3 bucket. (You can only set it for individual files; if override is not set, the default, immutable, value of 604800 will be used for new files or files that do not have a custom value set.)
    – Fabien Snauwaert
    Commented Apr 29, 2022 at 14:40
  • what about adding the cache control to the request?
    – albanx
    Commented Dec 8, 2022 at 10:11
  • This works great, but I did hit a snag and am just going to mention it in case someone else hits it. The NAME of the rule cannot contain spaces. I got an error about invalid characters and misread it thinking it was complaining about the equal sign in the header value. If you're getting this error it is PROBABLY the name of the rule its complaining about.
    – Lenny
    Commented Dec 6, 2023 at 16:12
25

Cache-Control

You can add a Cache-Control header to your CloudFront instance without the use of functions. https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/adding-response-headers.html

  1. Go to AWS Console and navigate to the CloudFront instance.
  2. Go to Behaviors Tab
  3. Select the default behavior and go for the edit option to edit that behavior
  4. There you can see the option Response headers policy – optional
  5. You can make use of an existing response headers policy or create a new one
  6. Go to Policies - Response Headers and click on "Create response header policy" under custom policies. If you have an existing policy edit it.
  7. In my case I have a policy already, so I opted to edit that policy
  8. Go for Custom headers – optional
  9. Add the Cache-Control header along with the max-age value you want. This value can be set to override origin if you want it.

Custom headers UI reference

  1. In your default behavior, under the Response headers policy select the one you just created or edited.

enter image description here

Improve this answer
7

As mentioned by James, the MAX TTL, MIN TTL, etc that you see in the CF settings when you are creating a distribution, defines the caching behaviour of the CloudFront distribution and the Origin. In other words how long CloudFront should keep the assets in the Edge Locations before checking the origin. For example, if you have an S3 bucket as the origin and then a CloudFront distribution, by setting MAX TTL Min TTL etc you tell CloudFront how often it should check the origin (in this case S3) for changes. You can learn more about it in AWS Docs. Managing How Long Content Stays in an Edge Cache (Expiration).

In the example above you can go to S3 bucket and set the Cache-Control. For more information how to do it read this one.

Improve this answer
2
  • 1
    Setting Cache-Control on the S3 bucket via the directions in your second link was the correct solution. You can't set Cache-Control on CloudFront's origin; this is not allowed by CloudFront right now. The OP (and me) just wanted to pass the Lighthouse tests and the only way to do that is to set Cache-Control on the bucket's items.
    – Gregory Ledray
    Commented May 20, 2021 at 15:26
  • S3 interface for setting headers is unwieldy and you need to set the headers again if you replace the file. This might be ok for you if your static files are autogenerated through a script, but in our case we setup a lambda to return cache control headers to the browser for certain static asset files
    – gaurav5430
    Commented Sep 19, 2021 at 18:17
5

You can : 1. configure origin to add the Cache-Control header in response. Or 2. use Lambda@edge (Viewer response as you just want to use it for google page insights) to add Cache-control header in the response. Example: https://github.com/jkrnak/serverless-lambda-at-edge/blob/master/handler.js

Defining TTL doesn't add any cache-control header, it uses to consider how long it need to cache.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.