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 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’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.
Essentially the approach is fairly straightforward, within the CloudFormation template you’ve created that specifies the CloudFront Distribution configuration, you need to add the following section:
CacheBehaviors:
- PathPattern: /index.html
AllowedMethods:
- GET
- HEAD
TargetOriginId: OriginBucket1 #S3Origin
CachePolicyId: 4135ea2d-6df8-44a3-9df3-4b5a84be39ad # CachingDisabled
ViewerProtocolPolicy: allow-all
You’ll notice the CachePolicyID, this is a static variable which you can find here. The TargetOriginID, well that is the destination bucket, so for that its “OriginBucket1” which is the same as what appears in the “DefaultCacheBehavior” section. Information on the AllowedMethods and ViewerProtocolPolicy you can find in the links below.
So seeing that within an example Distribution configuration in the template:
OriginDistribution:
Type: AWS::CloudFront::Distribution
Properties:
DistributionConfig:
Aliases:
- !Ref 'DomainName'
Comment: !Ref 'DomainName'
CacheBehaviors:
- PathPattern: /index.html
AllowedMethods:
- GET
- HEAD
TargetOriginId: OriginBucket1 #S3Origin
CachePolicyId: 4135ea2d-6df8-44a3-9df3-4b5a84be39ad # CachingDisabled
ViewerProtocolPolicy: allow-all
DefaultCacheBehavior:
Compress: true
ForwardedValues:
QueryString: false
TargetOriginId: OriginBucket1 #S3Origin
ViewerProtocolPolicy: redirect-to-https
FunctionAssociations:
- EventType: viewer-request
FunctionARN: !GetAtt IndexHandlerFunction.FunctionMetadata.FunctionARN
DefaultRootObject: index.html
CustomErrorResponses:
- ErrorCachingMinTTL: 300
ErrorCode: 403
ResponseCode: 200
ResponsePagePath: /error.html
- ErrorCachingMinTTL: 300
ErrorCode: 404
ResponseCode: 200
ResponsePagePath: /error.html
Enabled: true
HttpVersion: http2
IPV6Enabled: true
Origins:
- Id: OriginBucket1
DomainName: !GetAtt OriginBucket1.DomainName # Refers to the FQDN of the S3 Bucket
S3OriginConfig:
OriginAccessIdentity: '' #old way
OriginAccessControlId: !GetAtt CloudFrontOriginAccessControl.Id
PriceClass: PriceClass_All # Global Distribution 'PriceClass_All', 'PriceClass_200' US and EU, 'PriceClass_100' Asia.
ViewerCertificate:
AcmCertificateArn: !Ref CertificateARN
MinimumProtocolVersion: TLSv1
SslSupportMethod: sni-only
Logging:
Bucket: !GetAtt AccessLogBucket.DomainName # Refers to the FQDN of the S3 Bucket
IncludeCookies: false
Prefix: cloudfront/
Tags:
- Key: Stack
Value: !Sub '${AWS::StackName}'
- Key: Name
Value: !Join ['-',[!Ref 'DomainName', 'cloudfront-distribution']]
