Amazon S3 Bucket Redirect with Query Params

By

Amazon S3 is a simple storage service that provides developers with secure and highly-scalable cloud storage. For more information about how to get set up with an Amazon S3, or Amazon Web Services in general, feel free to visit the AWS website. In regards to this post, I’ll assume that you are comfortable with AWS and have some basic experience with Amazon S3.

As you may or may not already know, Amazon S3 also allows for static website hosting. It’s as simple as uploading your content and configuring your bucket to enable static website hosting, and you’re up and running. Another feature that Amazon S3 allows for is website redirection (to another bucket, or an external URL). This is actually quite simple to do. For example, I can set up a test bucket called tusharghate-test that redirects to tusharghate.com within seconds.

This works great, but there’s a catch; what if my URL contained query parameters? For example, instead of redirecting to tusharghate.com I wanted to redirect to tusharghate.com?query=helloWorld. If I try redirecting to this URL the same way as before, I’m brought to the following url:

It looks like Amazon S3 appends a trailing slash to the end of our URL. This results in the value of our query parameter being changed from helloWorld to helloWorld/. It’s possible that the website has server-side code that strips the query parameters of non-alphanumeric characters, but for the purpose of this post, let’s assume it doesn’t.

Luckily there is an easy way to solve this issue. Instead of configuring out bucket to “Redirect all request to another host name”, we can configure an asset in our bucket to do the redirection for us. First, we must configure your bucket to “Enable website hosting” and set our “Index Document” to index.html. Once we’re done that, we create a simple file called index.html with the following markup:

<!DOCTYPE html>
<html>
	<head>
		<meta>
		<title>My Awesome Website</title>
	</head>
	<body>
		Redirecting ...
	</body>
</html>

The next step is to upload index.html to our bucket, making sure that we make our file accessible by either setting it as “Public”, or by configuring the bucket policy. The last and most important step is to add additional metadata to index.html. To do this, we click on the file and select “Metadata” on the right. At the bottom of the screen, we click on “Add more metadata”, select “Website Redirect Location”, and enter our URL (i.e. https://tusharghate.com?query=helloWorld) as the value. Finally, we click on “Save” and then click on our bucket’s endpoint.

You’ll notice that we are redirected to our website the same way we were before, but our URL is formatted correctly. No more trailing slashes, hooray!

And that’s all there is to it. As you can see from above, the classic redirection method works in most cases. However for complex URLs, you may be better off using this approach instead. For more information on Amazon S3 check out the official documentation.