Boost Your Website's User Experience: Redirect Non-WWW to WWW with CloudFront's Edge Function

As a website owner, it's essential to ensure that your visitors can easily access your website. One of the ways to achieve this is by redirecting your non-www website to your www website. This is a common practice that helps to improve the user experience and ensure consistency in your website's URL structure. In this blog post, we'll explore how to redirect a non-www website to a www website using CloudFront's Edge Function.

Before we dive into the specifics of using CloudFront's Edge Function, let's first understand the concept of non-www and www URLs. A website URL can either start with www or not. For instance, https://example.com is a non-www URL, while https://www.example.com is a www URL. While both URLs can be used to access your website, it's best to choose one and stick with it. This helps to avoid duplicate content issues and makes it easier for search engines to crawl your website.

Now that we understand the importance of redirecting a non-www website to a www website let's explore how to achieve this using CloudFront's Edge Function. CloudFront is a content delivery network (CDN) that enables you to distribute your content globally with low latency and high transfer speeds. Edge Functions, on the other hand, allow you to run JavaScript code at the edge locations of CloudFront, enabling you to modify the content served by your website.

To redirect a non-www website to a www website using CloudFront's Edge Function, follow these steps:

Step 1: Create an Edge Function

The first step is to create an Edge Function in the AWS Management Console. To do this, navigate to the CloudFront console, select your distribution, and click on the "Behaviors" tab. Then, click on "Create Function" and select "Blank Function." Give your function a name and select the "Viewer Request" event type.

Step 2: Write the Code

Next, you need to write the code for the Edge Function. Here's an example of what the code might look like:

function handler(event) {
  var request = event.request;
  var headers = request.headers;
  var hostHeader = headers['host'][0].value;

  if (hostHeader.startsWith('example.com')) {
    var redirectUrl = 'https://www.example.com' + request.uri;
    var response = {
      status: '301',
      statusDescription: 'Moved Permanently',
      headers: {
        location: [{
          key: 'Location',
          value: redirectUrl,
        }],
      },
    };
    return response;
  }
  return request;
}

This code checks if the request is for the non-www website, and if it is, it creates a 301 redirect to the www website. It then returns the redirect response to the user's browser.

Step 3: Save and Deploy

Once you've written the code, save the Edge Function and deploy it to your CloudFront distribution. You can do this by clicking on the "Deploy" button in the CloudFront console.

That's it! You've now successfully redirected your non-www website to your www website using CloudFront's Edge Function.

In conclusion, redirecting your non-www website to your www website is a simple but essential step in improving the user experience and ensuring consistency in your website's URL structure. Using CloudFront's Edge Function makes this process even easier, and you can do it in just a few simple steps.