Static serving SPA with CloudFront

Connecting domain to cloudfront with route53

• It is possible that your cloudfront is not shown on the list when you trying to connect your domain using AWS Route53.
  

• First, check your cloudfront setting.
  

• Make sure domain properly entered on CNAME
• It should match with the record name on route53. (first image)
  

Access denied when access via specific url

• You might get access denied error when you trying to access with specific url.
  

• This is because SPA need “index.html” for every request.
  
• You need to set custom error response on your cloudfront distribution.
  

• You also need so change your s3 bucket policy.
• First statement is to give cloudfront “get” access to s3.
• Second statement is to catch 404 response instead of 403 or 400 from cloudfront.
• It is better to catch 404 since 403 is returned by WAF.
  

Now, you can access any url besides the base url.

XML file does not appear error

• If you don’t set default root object on your CloudFront settings, you might face this error.

• It can be solved by setting index.html as your default root object.

• References

  • StackOverFlow
  • Github