Amplify redirect www to apex

Question

I'm new to AWS in general, and can't seem to figure out how to redirect my www subdomain to my root domain. Both my apex domain and www successfully show the website. But I want to redirect www to apex so when users type www.my.tld they end up in my.ltd

The domain is registered with Google, and set to use the AWS name servers of my hosted zone on Route 53.

The records for my hosted zone are as following:

my.tld		A	abcdefg99.cloudfront.net.
my.tld		NS	[nameservers]
my.tld		SOA	....
www.my.tld	CNAME	abcdefg99.cloudfront.net.

In the Rewrites and redirects section of Amplify I have:

/<*>			https://abc.cloudfront.net/<*>	200 (Rewrite)
/<*>			/index.html			404 (Rewrite)
https://www.my.tld	https://my.tld			302 (Redirect - Temporary) RIGHT???

I would expect the above to redirect my www to the apex. But no luck so far.

I also tried changing www.my.tld CNAME abcdefg99.cloudfront.net. to www.my.tld CNAME my.tld. but that didn't even resolve the DNS.

Any thoughts on this? Is this even possible with Amplify? I also stumbled upon this but couldn't apply the solution to my issue.

BrianDAnderson_AWS · Answer

Hello nxr. To redirect your www subdomain to your root domain using AWS Amplify and Route 53, we'll need to make some adjustments to your current setup. Here's a step-by-step guide to accomplish this task:

**Update Route 53 DNS Records**
1. Log in to the AWS Management Console and navigate to Route 53.
2. Select your hosted zone for "my.tld".
3. Delete the existing CNAME record for "www.my.tld".

**Create a new A record for "www.my.tld"** and set it as an alias to your CloudFront distribution (abcdefg99.cloudfront.net).

**Configure CloudFront Distribution**
1. Go to the CloudFront console.
2. Select your distribution (abcdefg99).
3. Under the "General" tab, click "Edit".
4. In the "Alternate Domain Names (CNAMEs)" field, add both "my.tld" and "www.my.tld".
5. Save the changes.

**Set Up Redirect in Amplify**
1. Navigate to the AWS Amplify console.
2. Select your app and go to "Rewrites and redirects".
3. Add a new rule with the following settings:
        Source address: https://www.my.tld
        Target address: https://my.tld
        Type: 301 (Permanent redirect)
4. Save the changes.

**Update Amplify Custom Domain Settings**
1. In the Amplify console, go to "Domain management".
2. Add "www.my.tld" as a custom domain if it's not already there.
3. Verify that both "my.tld" and "www.my.tld" are listed and properly configured.

**Test the Redirect**
1. Clear your browser cache to ensure you're not seeing cached results.
2. Try accessing "www.my.tld" in your browser. Verify that it redirects to "my.tld".

**Monitor and Troubleshoot**
1. Use browser developer tools to check the redirect status code (should be 301).
2. If the redirect doesn't work immediately, allow some time for DNS propagation (up to 48 hours in some cases).
3. Check CloudFront and Amplify logs for any errors or issues.

By following these steps, you should be able to successfully redirect your www subdomain to your root domain using AWS Amplify and Route 53. This setup ensures that users typing "www.my.tld" will be redirected to "my.tld", providing a consistent experience for your website visitors.

Remember to test thoroughly in a non-production environment before applying changes to your live site. If you encounter any issues or need further assistance, consider consulting AWS support or the official documentation for the most up-to-date information and best practices.

Additional Resources:

https://docs.aws.amazon.com/AmazonS3/latest/userguide/website-hosting-custom-domain-walkthrough.html

https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/getting-started-s3.html

https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteEndpoints.html

Best of luck and thank you for using AWS!

Brian

Amplify redirect www to apex

Add your answer

Relevant content