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.

Chris Williams · Accepted Answer · 2020-06-24T07:13:39.627

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.

I went ahead with using API Gateway redirect by adding a custom domain and adding that custom domain to route 53 as well. Then added this subdomain as a origin in cloudfront and attached a behaviour alongside with it. We also needed to add the custom domain name to CNAMEs under that cloudfront distribution. Thanks a lot for the support. — Vishesh, Jun 25 '20 at 07:19

Marcin · Answer 2 · 2020-06-24T07:52:33.917

One way would be to use lambda@edge for a viewer request to return 302 HTTP code to the client with redirection url.

Generating an HTTP Redirect (Generated Response)

In python, such a lambda could look like (from docs):

 def lambda_handler(event, context):
 
     # logic to check the url and generate new url.
     
     response = {
         'status': '302',
         'statusDescription': 'Found',
         'headers': {
             'location': [{
                 'key': 'Location',
                 'value': '<your-api-gateway-url>'
             }]
         }
     }
     
     return response

redirecting the URL from cloudfront to API Gateway based on path

2 Answers2