Redirect Entire Website on Amazon Web Services using their serverless resources is easy. At times we will find ourselves in a situation where an entire host name will need to be redirected to a new host name. With classic web servers such as Apache or Nginx this was performed with rewrite modules. On Amazon Web Services, they made this easy by packaging their serverless features together. However, explaining how this works on AWS is a bit confusing and does not seem intuitive. This article will clear up the confusion, explain how to do it, and why this is the ideal way to redirect entire websites the Amazon Web Services serverless way.
Resources needed to Redirect Entire website on AWS
You will need the following setup to redirect an entire website (e.g. host name like foo.example.com to host name bar.example.com)
- AWS Account to create the following resources:
- S3 Bucket
- S3 Static Website (option for a S3 Bucket)
- CloudFront distribution
- DNS management access (access to your DNS service, such as Route53)
Step 1: Setup S3 Bucket and S3 Static Website
Navigate to the AWS S3 Management Console, select create a new S3 Bucket. Under the bucket name, create the bucket to match your website host name. In this example I am using entire-site-redirection.mandato.com as the bucket name.
Scroll down to the “Block Public Access settings for this bucket” section and uncheck blocking all of the access types, this is the one situation where you DO want your S3 public to be accessible to the public. Check the “I acknowledge that…” option.
Leave all the remaining settings to their defaults, scroll to the bottom and click “Create bucket”.
Now browse to the bucket and select it.
Go to the “Properties” tab and then scroll down to the bottom section titled “Static website hosting”. Click “Edit” to setup your S3 website.
In the Edit Static website hosting screen, select “Enable”.
The screen should expand with more options. Under the “Hosting Type”, select “Redirect requests for an object”. The screen will change and provide new options to enter a host name to redirect to as well as specify your redirect protocol. Enter the host name you want to redirect to, in this case, this website angelo.mandato.com and select protocol to https (make sure your destination website has https setup)
Click ‘Save Changes’. Your website will be ready to test momentarily. Returning to viewing the S3 bucket in the S3 Management Console in the Properties tab, at the bottom of the page in the “Static website hosting” box, you should see a new “Bucket website endpoint” URL at the bottom. This is your new S3 Website URL.
You can now go to this URL in your browser and the browser then immediately redirect to your target domain name you entered above. In this example, it is http://entire-site-redirection.mandato.com.s3-website-us-east-1.amazonaws.com/.
NOTE THE BUCKET WEBSITE ENDPOINT URL, YOU WILL USE IT WHEN SETTING UP CLOUDFRONT.
To to see how it works, open up a command prompt or bash shell and use the curl command line tool to test URLs redirect correctly. In this case we want to make sure the root URL redirects to the root of this site and the /blog/ path redirects to the blog of this site.
curl -I http://entire-site-redirection.mandato.com.s3-website-us-east-1.amazonaws.com/curl -I http://entire-site-redirection.mandato.com.s3-website-us-east-1.amazonaws.com/blog/
It works, we’re getting the appropriate “Location:” headers using the 301 Permanent status. Your work in S3 is done!
Setup 2: Setup CloudFront in front of S3 Website
Navigate to the AWS CloudFront Management Console, then select the top right button “Create distribution”.
Under the “Origin” section, enter appropriate information for the “Origin domain” and “Name” fields, leave the remaining fields to their defaults.
Origin domain: the host name portion of the bucket website endpoint, in my example entire-site-redirection.mandato.com.s3-website-us-east-1.amazonaws.com
Name: A name (host name) you want to give this distribution, in my example “entire-site-redirection.mandato.com”. This would most likely be the host name you are redirecting from.
For the “Default cache behavior” and “Function associations” sections, leave the defaults.
Under the “Settings” section, be sure to look closely at the “Price Class”, “Alternative domain name”, “Custom SSL certificate”, and “Description” fields. All other options leave as their defaults.
Price Class: It is important to select the appropriate “Price class” for your use. If a majority of your traffic comes from North America and/or Europe, select this option. Note that the best performance option or options that include other regions of the world will have additional bandwidth costs. In my case I use the most cost effective option, “Use only North America and Europe”.
Alternate domain name (CNAME): Add your host name here. If you plan on redirecting other variations of host names you may add them here. This may be necessary to redirect a host name that does not match the S3 Website host name. Note that the SSL certificate needs to match both of these host names, this is most likely the case if you are mapping various sub domain names and you are using a wildcard certificate.
Custom SSL certificate: Select the appropriate SSL certificate. I have a wildcard SSL certificate for all sub domains of mandato.com that is managed by AWS. If you skip this, your website will not support HTTPS.
Description: Optional setting, enter a brief description to best describe your distribution. In my example, “Entire site redirection example”.
Once you have everything entered where appropriate, select “Create distribution”.
Go to the service that manages your domain’s DNS (such as Route53 or CloudFlare) to associate your sub domain(s) you provided for “Name” and “Alternate domain name” fields above using the Distribution domain name from CloudFront as the CNAME’s value. In my example on CloudFlare I specified the following:
Type: CNAME
Name: entire-site-redirection
Target: d1xjnkpt0hi7zh.cloudfront.net
Click ‘Save’ then wait a minute or so (DNS is not instant).
You can now test your host name in the browser with both http and https protocols. In my example, those URLs are http://entire-site-redirection.mandato.com and https://entire-site-redirection.mandato.com
You can also test via the command line using curl command curl -I URL.
curl -I http://entire-site-redirection.mandato.com/curl -I https://entire-site-redirection.mandato.com/curl -I https://entire-site-redirection.mandato.com/blog/
We did it! Redirect Entire Website is good to go!
Why redirecting an entire website this way on AWS is ideal
You could setup an EC2 instance and easily write a couple lines in an Apache web server, but that means you now have a server to manage! By going the Amazon Web Services “Serverless” approach, you are handing the entire management over to Amazon. Other than paying a few cents a month, your time involved in managing this redirection is essentially zero. Plus you are now using CloudFront, a CDN where the entry point for your web visitors is closer to where they are coming from and your SSL certificates are managed by Certificates Manager where, if you configured it correctly, they are automatically managed (renewed) by Amazon.
What if I cannot create an S3 bucket for the host name I want to redirect?
No problem, as long as you can share the same sub domain, you can create an s3 bucket with a different sub domain, such as foobar.mandato.com, then setup the S3 website for that host name variation. This then will be the origin endpoint you use for CloudFront. CloudFront can have multiple host names, simply add them in the “Alternate domain name” section as mentioned above and you’re good to go!
Do I need to be concerned with HTTP/2 or HTTP/3 in CloudFront?
For Redirect Entire Website, no. It doesn’t hurt but it’s also not necessary as you will not take advantage of the additional features found in HTTP/2 or HTTP/3 once the Location header is sent to the client.
To learn more about Redirection on AWS, see URL Redirection on AWS with CloudFront and S3.
