{"id":3833,"date":"2023-07-10T13:21:17","date_gmt":"2023-07-10T13:21:17","guid":{"rendered":"https:\/\/geekmungus.co.uk\/?p=3833"},"modified":"2023-07-10T13:21:17","modified_gmt":"2023-07-10T13:21:17","slug":"prevent-aws-cloudfront-from-caching-a-file","status":"publish","type":"post","link":"https:\/\/geekmungus.co.uk\/?p=3833","title":{"rendered":"Prevent AWS CloudFront from Caching a File"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Following on from my previous post: <a rel=\"noreferrer noopener\" href=\"https:\/\/geekmungus.co.uk\/?p=3741\" data-type=\"URL\" data-id=\"https:\/\/geekmungus.co.uk\/?p=3741\" target=\"_blank\">Static Website Hosting\/Publishing Using AWS S3, AWS CloudFront, SSL Certificate And Custom FQDN<\/a>, I had the need to ensure that a particular file was not cached by CloudFront and instead fetched each time.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The particular example was that we wanted to use CloudFront, but in this case the website needed to reflect changes to this particular file immediately upon the file in the S3 bucket being updated. The other files such as the error page and logo image files didn&#8217;t need to be updated frequently, and even if they did, them taking a period of time to begin to reflect the changes was not essential.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Essentially the approach is fairly straightforward, within the CloudFormation template you&#8217;ve created that specifies the CloudFront Distribution configuration, you need to add the following section:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>        CacheBehaviors:\r\n          - PathPattern: \/index.html\r\n            AllowedMethods:\r\n            - GET\r\n            - HEAD\r\n            TargetOriginId: OriginBucket1 #S3Origin\r\n            CachePolicyId: 4135ea2d-6df8-44a3-9df3-4b5a84be39ad # CachingDisabled\r\n            ViewerProtocolPolicy: allow-all\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You&#8217;ll notice the <strong>CachePolicyID<\/strong>, this is a static variable which you can find <a rel=\"noreferrer noopener\" href=\"https:\/\/docs.aws.amazon.com\/AmazonCloudFront\/latest\/DeveloperGuide\/using-managed-cache-policies.html#managed-cache-policy-caching-disabled\" data-type=\"URL\" data-id=\"https:\/\/docs.aws.amazon.com\/AmazonCloudFront\/latest\/DeveloperGuide\/using-managed-cache-policies.html#managed-cache-policy-caching-disabled\" target=\"_blank\">here<\/a>. The <strong>TargetOriginID<\/strong>, well that is the destination bucket, so for that its &#8220;OriginBucket1&#8221; which is the same as what appears in the &#8220;DefaultCacheBehavior&#8221; section. Information on the AllowedMethods and ViewerProtocolPolicy you can find in the links below.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So seeing that within an example Distribution configuration in the template:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  OriginDistribution:\r\n    Type: AWS::CloudFront::Distribution\r\n    Properties:\r\n      DistributionConfig:\r\n        Aliases:\r\n          - !Ref 'DomainName'\r\n        Comment: !Ref 'DomainName'\r\n        CacheBehaviors:\r\n          - PathPattern: \/index.html\r\n            AllowedMethods:\r\n            - GET\r\n            - HEAD\r\n            TargetOriginId: OriginBucket1 #S3Origin\r\n            CachePolicyId: 4135ea2d-6df8-44a3-9df3-4b5a84be39ad # CachingDisabled\r\n            ViewerProtocolPolicy: allow-all\r\n        DefaultCacheBehavior:\r\n          Compress: true\r\n          ForwardedValues:\r\n            QueryString: false\r\n          TargetOriginId: OriginBucket1 #S3Origin\r\n          ViewerProtocolPolicy: redirect-to-https\r\n          FunctionAssociations:\r\n            - EventType: viewer-request\r\n              FunctionARN: !GetAtt IndexHandlerFunction.FunctionMetadata.FunctionARN\r\n        DefaultRootObject: index.html\r\n        CustomErrorResponses:\r\n          - ErrorCachingMinTTL: 300\r\n            ErrorCode: 403\r\n            ResponseCode: 200\r\n            ResponsePagePath: \/error.html\r\n          - ErrorCachingMinTTL: 300\r\n            ErrorCode: 404\r\n            ResponseCode: 200\r\n            ResponsePagePath: \/error.html\r\n        Enabled: true\r\n        HttpVersion: http2\r\n        IPV6Enabled: true\r\n        Origins:\r\n          - Id: OriginBucket1\r\n            DomainName: !GetAtt OriginBucket1.DomainName # Refers to the FQDN of the S3 Bucket\r\n            S3OriginConfig:\r\n              OriginAccessIdentity: '' #old way\r\n            OriginAccessControlId: !GetAtt CloudFrontOriginAccessControl.Id\r\n        PriceClass: PriceClass_All # Global Distribution 'PriceClass_All', 'PriceClass_200' US and EU, 'PriceClass_100' Asia.\r\n        ViewerCertificate:\r\n          AcmCertificateArn: !Ref CertificateARN\r\n          MinimumProtocolVersion: TLSv1\r\n          SslSupportMethod: sni-only\r\n        Logging:\r\n          Bucket: !GetAtt AccessLogBucket.DomainName # Refers to the FQDN of the S3 Bucket\r\n          IncludeCookies: false\r\n          Prefix: cloudfront\/\r\n      Tags:\r\n        - Key: Stack\r\n          Value: !Sub '${AWS::StackName}'\r\n        - Key: Name\r\n          Value: !Join &#91;'-',&#91;!Ref 'DomainName', 'cloudfront-distribution']]<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Additional Information<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/docs.aws.amazon.com\/AmazonCloudFront\/latest\/DeveloperGuide\/using-managed-cache-policies.html#managed-cache-policy-caching-disabled\">https:\/\/docs.aws.amazon.com\/AmazonCloudFront\/latest\/DeveloperGuide\/using-managed-cache-policies.html#managed-cache-policy-caching-disabled<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/repost.aws\/knowledge-center\/prevent-cloudfront-from-caching-files\">https:\/\/repost.aws\/knowledge-center\/prevent-cloudfront-from-caching-files<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Following on from my previous post: Static Website Hosting\/Publishing Using AWS S3, AWS CloudFront, SSL Certificate And Custom FQDN, I had the need to ensure that a particular file was not cached by CloudFront and instead fetched each time. The particular example was that we wanted to use CloudFront, but in this case the website &#8230; <a title=\"Prevent AWS CloudFront from Caching a File\" class=\"read-more\" href=\"https:\/\/geekmungus.co.uk\/?p=3833\" aria-label=\"Read more about Prevent AWS CloudFront from Caching a File\">Read more<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,3],"tags":[],"class_list":["post-3833","post","type-post","status-publish","format-standard","hentry","category-aws","category-cloud"],"_links":{"self":[{"href":"https:\/\/geekmungus.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/3833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekmungus.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekmungus.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekmungus.co.uk\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/geekmungus.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3833"}],"version-history":[{"count":1,"href":"https:\/\/geekmungus.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/3833\/revisions"}],"predecessor-version":[{"id":3834,"href":"https:\/\/geekmungus.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/3833\/revisions\/3834"}],"wp:attachment":[{"href":"https:\/\/geekmungus.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekmungus.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekmungus.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}