The first draft of the guide stated that "Under 'Origin Domain Name' select the S3 Bucket with no subdomain (example.com.s3.whatver)". This is wrong. This issue with this is you will not be able to access sub routes in your app (such as example.com/users/1) as CloudFront will return an access denied since it will look for an object with this path and it won't exist.
The solution is to copy the S3 website url <bucket.name>.s3-website-<aws-region>.amazonaws.com and use this as your Origin Domain Name. To find this you go to your S3 bucket for your site (without www subdomain). Go to properties and click static website hosting. The url will be there labeled 'Endpoint'.
Once you have copied it, create a new cloudfront invalidation request. Sub directories for your site will now be accessible when navigating directly to them.
Update: 9th of January 2020
The first draft of the guide stated that "
Under 'Origin Domain Name' select the S3 Bucket with no subdomain (example.com.s3.whatver)". This is wrong. This issue with this is you will not be able to access sub routes in your app (such as example.com/users/1) as CloudFront will return an access denied since it will look for an object with this path and it won't exist.The solution is to copy the S3 website url
<bucket.name>.s3-website-<aws-region>.amazonaws.comand use this as your Origin Domain Name. To find this you go to your S3 bucket for your site (without www subdomain). Go to properties and click static website hosting. The url will be there labeled 'Endpoint'.Once you have copied it, create a new cloudfront invalidation request. Sub directories for your site will now be accessible when navigating directly to them.
I have updated the guide accordingly.
I found the solution to this issue here: serverfault.com/a/776143