How do I configure CloudFront custom error pages?

Resolution

By default, CloudFront serves its own error pages for common HTTP status codes. However, you can configure CloudFront to customize the error pages displayed to viewers for specific returned HTTP status codes. For example, you can create your own error pages and store them in an Amazon Simple Storage Service (Amazon S3) bucket.

Configure custom error pages in CloudFront

Complete the following steps:

1. Create a custom error page for specific HTTP status codes.
   Note: For example, you can create an HTML file that has your custom error message.
2. Save your custom error page in an Amazon S3 bucket or a location that you can accessible from CloudFront.
   Note: It's a best practice to store objects and custom error pages in different locations.
3. Open the CloudFront console.
4. Choose your distribution.
5. Choose the Error pages tab, and then choose Create custom error response.
6. Choose the HTTP error code list, and then choose the HTTP status code that you want CloudFront to return.
7. For Error caching minimum TTL, enter the minimum amount of time that you want CloudFront to cache error responses from your origin server.
8. For Customize error response, choose Yes.
9. For Response page path, enter the path to the custom error page. For example, /4xx-errors/403-forbidden.html.
10. Choose the HTTP Response code list, and then choose the status code to return to the viewer.
11. Choose Create custom error response.

For more information, see Configure custom error responses.

Test custom error pages and check permissions

To test your custom error page, manually create the HTTP errors through URL paths, and then verify that the page displayed correctly.

Make sure that your CloudFront distribution has the required permissions to access your custom error pages. Custom error pages stored in an Amazon S3 bucket must be publicly accessible. If the custom error pages aren't publicly accessible, then configure a CloudFront origin access control (OAC) to restrict access to an Amazon S3 origin. Custom error pages stored in a custom origin must be publicly accessible.

If your custom error page returns HTTP 403 errors, then make sure that the Amazon S3 bucket location path to the custom error page is correct. For more information, see How do I troubleshoot 403 errors from CloudFront?

Related information

Generate custom error responses

Create origin request policies