redirecting the URL from cloudfront to API Gateway based on path

Question

I am trying to achieve redirection from cloudfront to API gateway based on the path. I have my UI with a cloudfront distribution with source being S3 bucket hosted on for eg.

www.example.com

and it serves the requests.

I want the URLs with the pattern

www.example.com/share/*

to be redirected to API Gateway. The API Gateway has redirection internally where it points to other URLs.

If I use the API gateway endpoint directly in the browser, it fetches the expected result.

I am unsure of how to redirect from cloudfront to API Gateway. I have put cloudwatch logs on API Gateway and can see that cloudfront to API Gateway Redirection isn't working.

I have tried adding API Gateway as origin and add the same as a behaviour in cloudfront, but no success.

Answer 1

You can do redirect by using Lambda@Edge in CloudFront. AWS provides an example redirect function here.

Example below

'use strict';

exports.handler = (event, context, callback) => {
    /*
     * Generate HTTP redirect response with 302 status code and Location header.
     */
    const response = {
        status: '302',
        statusDescription: 'Found',
        headers: {
            location: [{
                key: 'Location',
                value: 'http://URL/PATH',
            }],
        },
    };
    callback(null, response);
};

However it seems like perhaps rather than doing a redirect you should consider using a different a secondary origin in your CloudFront distribution to serve the API Gateway path if it is part of your application.

To do this you would need to add a custom domain to your API Gateway with the domain name of your site and then within CloudFront add an origin with a matching pattern of /share to forward to your API Gateway.

Take a read of this page for more information.