Redirect www to non-www with S3/CloudFront without seperate buckets

Question

I'm hosting a static websites on S3 with CloudFront.

Now, both www.example.com and example.com return the same, but I only want example.com to work, and www.example.com to redirect to example.com.

I know I can create an another bucket that will redirect to the main bucket (example.com), but then I'll have two buckets and two CloudFront distributions for each website and it'll make a mess.

Is there an another way to accomplish that?

Answer 1

Recently AWS introduced Cloudfront Functions. As you can guess it allows you to manipulate http request/response within the cloudfront using custom function code.

In their introductory blog they have covered this specific redirection use case. As per their blog Introducing CloudFront Functions – Run Your Code at the Edge with Low Latency at Any Scale:-

URL rewrites and redirects: Generate a response to redirect requests to a different URL. For example, redirect a non-authenticated user from a restricted page to a login form. URL rewrites can also be used for A/B testing.

I have experimented on this approach. What I did:-

1. Set up a new cloudfront distribution.
2. Mapped this distribution to the existing website bucket (doesn't really matter)
3. Associated a new redirect_www_to_naked function with this distribution.
4. Mapped this distribution to www subdomain in Route 53

This is how my function looks like:-

And this is my association settings

Edit: I wrote a blog about it explaining in detail if you would want to learn more - Redirect WWW to Naked Domain using CloudFront Function

Answer 2

After spending many hours, searching and trying different solutions, either in Cloudfront or in Route53, the solution that @Paramvir has suggested, has finally helped me figure it out.

I ended up using a Cloudfront function, that looks like this:

function handler(event) {
    var request = event.request;
    console.log(request.headers["host"]);
    if (request.headers["host"] && request.headers["host"].value.startsWith("www")) {
        var response = {
            statusCode: 301,
            statusDescription: 'Moved Permanently',
            headers: {
                'location': { value: 'https://naked_address.com'+event.request.uri }
            }
        };
        return response;
    }
    return request;
}

What it basically does is that it checks for the request address, if it starts with www, then redirects it to naked address. Otherwise it returns the untouched request.

Of course, don't forget to save your function, then publish it. After you do this, you must associate it to your distribution.

Answer 3

You seem to be using DNS services as you mention example.com
However, I do not know what DNS service you are doing.
Because Route 53 is commonly used, it is described on the basis of Route 53.
Domains are described on the basis of example.com.

You can code redirects from example.com to www.example.com programmatically.
However, it is common to resolve this at the AWS level.

Two buckets are required to resolve at the AWS level.

1. example.com (content bucket)
   
   
2. www.example.com (bucket redirected to example.com)
   S3 -> Properties -> Static web hosting -> redirect request
   Target bucket or domain: example.com
   Protocol : http
   (No files are required for buckets.)
   
   
3. Mapping example.com to the A record on Route 53.
   
   
4. Mapping www.example.com to Route 53's A record.
   

Then, if you request www.example.com, you will be redirected to example.com.

If you have any questions, feel free to ask!
Thank you.

UPDATE 1
If you activate your CloudFront CNAME for example.com and www.example.com,
You can get example.com and www.example.com requests with just one bucket.
However, it is not recommended because the consistency of URLs is not good.

Answer 4

In addition to @Wilhelm Sorban

You can set location like this to not include the domain name:

'location': { value: 'https://'+request.headers["host"].value.replace('www.', '')+event.request.uri }

But i did not find any header value for protocol (http or https) in Cloudfront function docs: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/functions-event-structure.html#functions-event-structure-request

Answer 5

here what works for me

1- created a new cloud Front distribution and make it refers to the same s3 bucket that original one refers.

2- created a new record in route 53 give it prefix www.example.com and make it refer to the newly created cloud front distribution.

then if you typed example.com or www.example.com they'll redirect to the same bucket and the two works fine

hope this is helpful.