CODEWITHSUNDEEP
amazon-web-servicesheaderamazon-cloudfrontcache-controlpagespeed-insights
Igor Corradi
Igor Corradi

Reputation: 474

How to set Cache-Control Header in amazon cloudfront?

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

Upvotes: 28

Views: 41899

Answers (4)

Amarnathrao Sulake
Amarnathrao Sulake

Reputation: 481

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

Upvotes: 26

Kolappan N
Kolappan N

Reputation: 4011

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.

Upvotes: 47

Mostafa Darezereshki
Mostafa Darezereshki

Reputation: 405

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.

Upvotes: 7

James Dean
James Dean

Reputation: 4431

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.

Upvotes: 5

Related Questions