title: How to show a custom 404 error page when using a Lambda@Edge frunction serving a website from Cloudfront to a private S3 bucket
body: <p>I am using the <a href="https://serverlessrepo.aws.amazon.com/applications/arn:aws:serverlessrepo:us-east-1:621073008195:applications~standard-redirects-for-cloudfront" rel="nofollow noreferrer">standard-redirects-for-cloudfront</a> Lambda@Edge function that handles </p>
  
  <blockquote>
    <p>"internal" redirects from /foo/ to /foo/index.html and "external"
    redirects from /foo/index.html to /foo/.</p>
  </blockquote>
  
  <pre><code>'use strict';
  
  /*
    Copyright 2017 DigitalSailors e.K.
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
      http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
  */
  
  exports.handler = (event, context, callback) =&gt; {
    const request = event.Records[0].cf.request;
  
    let prefixPath; // needed for 2nd condition
  
    if (request.uri.match('.+/$')) {
      request.uri += 'index.html';
      callback(null, request);
    } else if (prefixPath = request.uri.match('(.+)/index.html')) {
      const response = {
        status: '301',
        statusDescription: 'Found',
        headers: {
          location: [{
            key: 'Location', value: prefixPath[1] + '/',
          }],
        }
      };
      callback(null, response);
    } else if (request.uri.match('/[^/.]+$')) {
      const response = {
        status: '301',
        statusDescription: 'Found',
        headers: {
          location: [{
            key: 'Location', value: request.uri + '/',
          }],
        }
      };
      callback(null, response);
    } else {
      callback(null, request);
    }
  }
  </code></pre>
  
  <p>I am having problems serving a custom error page.</p>
  
  <p>Currently I have in my S3 bucket the object <em>/404.html</em> (also configured as the error page of the S3 static website which shouldn't be requested anyway because it should be Cloudfront responsability).</p>
  
  <p>In Cloudfront I've set up <em>/404.html</em> as the custom error page for 404 status.</p>
  
  <p>How should I set it up to return the error page?</p>
  
  <pre><code>marcanuy@scarone:~/Development/website$ curl -I https://example.com/wrong-page
  HTTP/2 301                                                                                                                            
  server: CloudFront                                                                                                                    
  location: /wrong-page/                                                                                                                
  x-cache: Miss from cloudfront                                                                                                         
  
  marcanuy@scarone:~/Development/website$ curl -I https://example.com/wrong-page.html
  HTTP/2 403
  content-type: application/xml
  server: AmazonS3
  x-cache: Error from cloudfront
  
  marcanuy@scarone:~/Development/website$ curl -I https://example.com/404
  HTTP/2 301
  server: CloudFront
  location: /404/
  x-cache: Miss from cloudfront
  
  marcanuy@scarone:~/Development/website$ curl -I https://example.com/404.html
  HTTP/2 200
  content-type: text/html
  last-modified: Fri, 03 Aug 2018 03:38:19 GMT
  etag: "4ecbbfd9d1eb384afc897df3f29a8865"
  accept-ranges: bytes
  server: AmazonS3
  x-cache: Miss from cloudfront
  </code></pre>