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.
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.
One way would be to use lambda@edge for a viewer request to return 302 HTTP code to the client with redirection url.
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