24

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

John Rotenstein
  • 241,921
  • 22
  • 380
  • 470
Igor Corradi
  • 416
  • 1
  • 4
  • 7

4 Answers4

38

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.

Kols
  • 3,641
  • 2
  • 34
  • 42
  • 4
    Note that this is a recent feature, only released in [November 2021](https://aws.amazon.com/blogs/networking-and-content-delivery/amazon-cloudfront-introduces-response-headers-policies/). It absolutely solves the original problem, though, and is definitely the best solution now! – ThirstyMonkey Jan 13 '22 at 07: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 Apr 29 '22 at 14:40
  • what about adding the cache control to the request? – albanx Dec 08 '22 at 10:11
17

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

Amarnathrao Sulake
  • 391
  • 3
  • 6
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.

Mostafa Darezereshki
  • 395
  • 4
  • 8
  • 1
    Setting Cache-Control on the S3 bucket via the directions in your [second link](https://stackoverflow.com/questions/10435334/set-cache-control-for-entire-s3-bucket-automatically-using-bucket-policies) was the correct solution. You can't set Cache-Control on CloudFront's origin; this is [not allowed by CloudFront right now](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/add-origin-custom-headers.html). 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 May 20 '21 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 Sep 19 '21 at 18:17
6

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.

James Dean
  • 4,033
  • 1
  • 9
  • 18