Redirect WWW to Naked Domain using CloudFront Function

Author: Paramvir Singh Karwal

Published: 2021-08-03 04:56:22.0


Website handcrafted by Paramvir Singh Karwal

AWS CloudFront Functions

Recently AWS has introduced cloudfront functions feature which provides a way to easily manipulate HTTP(s) requests and responses.

A CloudFront Function, like it is obvious from the name, is a function that contains your custom written code which cloudfront invokes on incoming request or outgoing response depending upon how you have configured it. You can use it for request and response headers manipulations, cache key manipulations, url modification/redirects and performing access authorization.

We will use this to redirect traffic from www.myperfectdomain.com subdomain to the root domain myperfectdomain.com. Reason for doing this is we don't want the same website running on different domains, in this case the root domain and the subdomain because its bad for SEO.

redirect-www-to-naked-domain-aws-cloudfront

Before we proceed further its assumed that you have two different cloudfront distributions lets say CD1 and CD2 setup with subdomain www.myperfectdomain.com and root domain myperfectdomain.com respectively in AWS Route 53.

Since our goal is to redirect the traffic coming from www so we will use CD1 distribution to do our manipulations. To be precise we want to return HTTP redirect status code 302 in the response which is an instruction to the browser to do the redirection to the target domain. It needs to happen for all of the incoming requests. When this happens cloudfront does not need to forward your request to your server rather it just returns it from there only. Your server could be a tomcat running in EC2 or S3 hosted website or whatever you decide it to be, but it doesn't matter because your request never reaches there for the traffic coming from www subdomain.

Once the browser receives the redirect instruction it then does the needful and now your traffic is routed to the root domain myperfectdomain.com. Since CD2 is mapped to root domain it forwards the requests to whatever origin you have configured. Note that it is not necessary to have CD2 mapped with root domain, it could be mapped to an IP Address or whatever in your DNS records.

Follow below steps to do redirections:

Let's create a new CloudFront Function

Open the CloudFront from AWS Console.

You will see Functions option in the left pane. Choose it.

Once opened you will see the option to Create function. Do it.

cloudfront-function-console

Once opened you will see editor which you can use to write down your logic for redirection. Put in your logic there.

cloudfront-function-redirect-www-to-naked-domain

You can use the code that is given below.

Javascript code :-

function handler(event) {
    // NOTE: This example function is for a viewer request event trigger. 
    // Choose viewer request for event trigger when you associate this function with a distribution. 
    console.log(event.request.headers);
    console.log(event.request);
    var response = {
        statusCode: 302,
        statusDescription: 'Found',
        headers: {
            "location": { "value": 'https://myperfectdomain.com'+event.request.uri }    
        }
      }
    return response;
}

HTTP statusCode 302 in the response asks the browser to do redirection to address given in the location response header.

Put your naked domain in the location response header.

Once your function is created you need to associate it to the cloudfront distribution you want to use it for. In our case it is the CD1 distribution. It should be available in the Distribution drop down.

Choose Event type as Viewer Request.

Once done you need to Publish and update from the Publish tab.

That's it. It should work now.

Happy Redirecting :)

associate-cloudfront-function-with-distribution

publish-cloudfront-function

Comments:-