How to store a Cloudfront custom error page in S3?

Question

I have a Cloudfront plugged on an AWS load balancer.

I saw in the AWS documentation that I can customize Cloudfront custom error pages. I tried to store these error pages in S3 as it is recommended in the AWS doc but it doesn't work. The documentation says :

We recommend that you store custom error pages in an Amazon S3 bucket even if you're using a custom origin. If you store custom error pages on an HTTP server and the server starts to return 5xx errors, CloudFront can't get the files that you want to return to viewers because the origin server is unavailable.

My error page is in S3 with the path 'my-app-bucket/errorpage.html'.

I tried to link this file in the Cloudfront config but I have the following error :

If I try the value /my-app-bucket/errorpage.html, Cloudfront redirects the request to my ELB origin and I get a 404.

Who could explain me how I can do this configuration ?

Solution 1

These are hints from https://web.archive.org/web/20140319123040/http://blog.celingest.com/en/2013/12/12/cloudfront-configuring-custom-error-pages/

• You need to add another CloudFront origin pointing to the bucket where your error page is
• The cache behaviour of the newly-created origin should have a Path Pattern pointing to the folder (in the error page bucket) where the error pages reside
• You can then use that path in the Response Page Path when you create the Custom Error Response config

Solution 2

This answer is a transcript of mbarlockers great video, as that is an external link that could vanish I have transcribed it here.

This is a great video but suffers again from being an external link, I have summerised the entire video here:

1. Create a bucket in s3 with a dns compliant name (do not use periods for now)
2. Make bucket public
3. Upload your page leave permissions on objects as default
4. Choose standard storage
5. No Encryption
6. Test using bucket URL, watch fail
7. Test using full object URL, watch fail
8. Go into the bucket policy and create a policy that allows Everyone to read your objects using GetObject.
9. Ignore the public policy warning
10. Try object URL again it should work.
11. Enable static website hosting in your bucket settings in properties.
12. Fill in the index document and error page fields, we don't need redirects, save
13. Check the URL that static web hosting generated and use that and test using a non existant path and you will see your 404
14. Go into cloudfront and create a distribution
15. Name the origin name as the bucket link that appears
16. Leave all options except caching and set at 1 day.
17. Save and wait for the cloudfront distribution to deploy.
18. now test via the cloudfront URL and test and observe failures
19. Go back to cloudfront distribution and goto the custom error pages section and create a custom error page response.
20. Specify 403 Forbidden as the HTTP error code
21. 300 seconds TTL
22. Customise the error response
23. set response page path to /error.html (or whatever your error page is called)
24. Change response code to 404 not found
25. Go back to the browser and retry the bad URL now. The error page will be served.

Solution 3

There's a lot easier way than the one recommended by f01 to accomplish this. Enable static website hosting in S3, specify the error page in S3, and then use the static website hosting URL as the origin for your cloudfront bucket. No special path problems, no custom error response config. It just works. Super easy.

Here's a tutorial video I made:

Custom Error Pages in AWS S3 and Cloudfront

Comments

[Bruno Bronosky]

This answer demonstrates exactly why links to external pages are not valid answers. That page is not gone. The relevant information should have be added to this answer.