{"id":7241,"date":"2024-09-18T12:21:55","date_gmt":"2024-09-18T10:21:55","guid":{"rendered":"https:\/\/blog.besharp.it\/?p=7241"},"modified":"2025-01-07T11:16:15","modified_gmt":"2025-01-07T10:16:15","slug":"handling-multiple-domains-redirects-using-amazon-s3-and-amazon-cloudfront","status":"publish","type":"post","link":"https:\/\/blog.besharp.it\/handling-multiple-domains-redirects-using-amazon-s3-and-amazon-cloudfront\/","title":{"rendered":"Handling multiple domains redirects using Amazon S3 and Amazon CloudFront"},"content":{"rendered":"\n
Ah, yet another “Amazon CloudFront + Amazon S3 combo\u201d article for Web hosting\u2026\u201d <\/p>\n\n\n\n
Yes, it is\u2026 but with a twist that\u2019s worth the attention.<\/p>\n\n\n\n
By now, it feels like every Cloud enthusiast (and their pet cat) has written a blog post about it.<\/p>\n\n\n\n
But what if there were a few tricks to spice things up and maybe even retire that old Apache once and for all?<\/p>\n\n\n\n
In this article, we\u2019ll explore how to use Amazon S3 and Amazon CloudFront to set up smart redirects to our main site without maintaining a web server.\u00a0<\/p>\n\n\n\n
We\u2019ll also examine how to efficiently use Amazon S3 metadata to ensure that users are always directed to the latest version of our content.<\/p>\n\n\n\n
Let\u2019s dive into the topic!<\/p>\n\n\n\n
Before we get into the serious stuff, let’s take a quick trip down memory lane:<\/p>\n\n\n\n
Let\u2019s suppose that our website is running smoothly on Amazon S3, with CloudFront ensuring it\u2019s faster than ever. But what about those other domain names we\u2019ve accumulated over time?<\/p>\n\n\n\n
Let\u2019s say we have oldexample.com, oldexample1.com, and a few others that all need to redirect to example.com<\/em>.<\/p>\n\n\n\n In a traditional setup with a virtual machine, we could easily configure a redirect in the virtual host settings. However, maintaining a VM just for redirects adds unnecessary complexity and cost.<\/p>\n\n\n\n Sure, some DNS services let us create 301-302 redirect records, but this approach feels like taking the easy way out, and not everyone can migrate to those services.<\/p>\n\n\n\n What about setting up a CNAME record? <\/p>\n\n\n\n Unfortunately, that doesn\u2019t provide a true redirect and can have negative implications for our SEO.<\/p>\n\n\n\n Then, there\u2019s the option to use CloudFront Functions or Lambda@Edge. Both are valid choices: CloudFront Functions are fast and cost-effective but have a 10KB limit, so it\u2019s better not to fill them up just with redirects. Lambda@Edge doesn\u2019t have that size limitation, but it\u2019s slower and comes with a higher cost. We also need to maintain the code for both solutions.<\/p>\n\n\n\n So, how do we implement these redirects without falling into DNS purgatory or overcomplicating our infrastructure?<\/p>\n\n\n\n Here\u2019s where things get interesting: what if we put an Amazon CloudFront + Amazon S3 setup in front of<\/em> our existing Amazon CloudFront + Amazon S3 website?<\/p>\n\n\n\n It may sound weird, but believe us, it works! Here’s how:<\/p>\n\n\n\n <\/p>\n\n\n <\/p>\n\n\n\n Voil\u00e0! All traffic from the old domains will now redirect to our new site without the hassle of managing any virtual hosts or complicated infrastructure.<\/p>\n\n\n\n Consistency is key in SEO, and maintaining a uniform URL structure can be tricky. To ensure our URLs stay SEO-friendly, we can use the Amazon S3 website hosting option to always redirect to the “www” version of our domain.<\/p>\n\n\n\n It\u2019s a small change, but it makes a big difference!<\/p>\n\n\n\n Now let\u2019s dive into how to granularly manage redirects for paths and files.<\/p>\n\n\n\n Let\u2019s say we need to manage multiple versions of our product, and each version lives in a folder (\/v1.0\/, \/v2.0\/ ). When a new version is released, we want users to be redirected to the latest version without the headache of constantly updating links or maintaining a list of redirects. This is where the Amazon S3 metadata field x-amz-website-redirect-location<\/em> comes to aid.<\/p>\n\n\n\n Consider this scenario: we have versioned directories for our product<\/p>\n\n\n\n We want anyone visiting \/latest\/ to be redirected to \/v3.0\/, and when we release \/v4.0\/, we want to update that redirect effortlessly.<\/p>\n\n\n\n To achieve this, create a placeholder object at \/latest\/ (this can be an empty object or a folder). Then, in the Metadata section of the S3 object\u2019s Properties, set a new key:<\/p>\n\n\n\n When we release a new version (e.g., \/v4.0\/), simply update the metadata to point to \/v4.0\/. This way, users accessing \/latest\/ will always be redirected to the freshest version of our content.<\/p>\n\n\n\n <\/p>\n\n\n <\/p>\n\n\n\n Sometimes, we might want our “latest” redirect to point to an external service or even a different domain. No problem, x-amz-website-redirect-location<\/em> handles external redirects just as easily. For example, if our newest version is hosted on a different domain, simply set the redirect to https:\/\/newexample.com\/v4.0\/.<\/p>\n\n\n\n While manually updating the redirect metadata each time we release a new version is simple enough, we might want to automate this for large-scale projects. We can use AWS SDKs or the AWS CLI to automate updating the x-amz-website-redirect-location for every new release. Here\u2019s an example of how we could update the metadata with the AWS CLI:<\/p>\n\n\n\n By incorporating this into our CI\/CD pipeline, we can ensure that the redirect to the latest version is always up-to-date as part of our release process.<\/p>\n\n\n\n There we have it: Amazon S3 web hosting with Amazon CloudFront, but with some unexpected tricks up its sleeve! From managing multiple domain redirects to keeping our users pointed to the latest product versions, we\u2019ve shown how to leverage the powerful combination of Amazon S3 and Amazon CloudFront in a serverless, efficient way.<\/p>\n\n\n\n No servers, no complex infrastructure, just a smart use of AWS\u2019s capabilities to keep our sites and users up-to-date and lightning fast.<\/p>\n\n\n\n The key takeaways:<\/p>\n\n\n\n So next time someone says, “Oh, another Amazon CloudFront + Amazon S3 post,” we can show them this and say, “Yes, but this one\u2019s different!”<\/p>\n\n\n\n Have you tried other solutions to address the need? Let us know in the comments! <\/p>\n\n\n\n See you again in 14 days on Proud2beCloud!<\/p>\n\n\n\n
<\/p>\n\n\n\nThe Solution<\/h4>\n\n\n\n
\n
<\/figure><\/div>\n\n\n
Bonus Tip – Consistently Use of WWW for SEO<\/h4>\n\n\n\n
Amazon S3 Metadata Management<\/h2>\n\n\n\n
Use Case<\/h4>\n\n\n\n
\n
Solution<\/h4>\n\n\n\n
\n
<\/figure><\/div>\n\n\n
Setting Up for External Redirects<\/h4>\n\n\n\n
Bonus Tip – Automating the Process<\/h4>\n\n\n\n
aws s3api put-object \\ \n--bucket your-bucket-name \\ \n--key latest\/ \\ \n--website-redirect-location \/v4.0\/<\/code><\/pre>\n\n\n\n
Wrap-Up<\/h2>\n\n\n\n
\n
\n\n\n\nAbout Proud2beCloud<\/h4>\n\n\n\n