In this article we will see how you can host a static website in Amazon S3 and then associate the S3 bucket with a domain configured on Amazon Route53.

The purpose of this article is not to discuss Amazon S3 and Amazon Route 53, but to show you how to benefit from them to deploy a static website. For more information about S3, see this article Amazon AWS – Understanding EC2 storage – Part III and for Route 53, see this article Amazon Web Services – Understanding Route 53 – Part I.

VMware Training – Resources (Intense)

Amazon S3 can be used to deploy websites that use only client-side technologies (HTML is one of them) and not server-side technologies (PHP is one of them). Such sites are called static websites because their content doesn’t change very often.

In this article we will learn how to:

  • Deploy a static website using Amazon S3
  • Associate a domain with the static website using Amazon Route 53

Amazon S3 is used because is a low-cost, reliable and online storage that can host the files required by your website.

Amazon Route 53 is a service that can route the customer to the website.

To host a static website on AWS, several things have to be done:

  • Create an Amazon S3 bucket that will store the files that builds the website
  • Upload the files to the bucket
  • Make the files public
  • Configure the bucket to act as a static website

So let’s start by deploying the S3 buckets that will hold the data. From the AWS Management Console, select S3 and then create the bucket of your choice, by clicking on “Create Bucket”:

In the next window, insert the name of your bucket. Remember that the name of the bucket has to be unique across the entire region, regardless of where the AWS accounts are used. In this case, I named the bucket as the domain that will the S3 bucket to serve the content:

Once the bucket is created, select it and then from the right panel, click on “Properties” and expand “Static Website Hosting”. As you can see, the option to host a website is disabled by default:

Select the option “Enable website hosting” and then in the “Index Document” field put the name of the index file that will be used when someone accesses the website:

As you can see above, once you select that you want to host a website in the S3, you are presented with the endpoint where that can be accessed. The endpoint name is based on the S3 bucket, followed by a standard suffix based on the region where the bucket is created.

The content of the file index.html is the following one. It is pretty basic, but it serves just as an example. You can have a much more complex index page:

<html>
<head>
 <title>Static Website</title>
</head>
<body>
 <p>The website is hosted on Amazon S3</p>
</body>
</html>

The next thing to do is to make the files in the S3 bucket public so that anyone knowing the link can access. There is no point of having a website if nobody can access it.

Once this is done, accessing the endpoint in a web browser will show the index page that was set previously as index document:

A similar thing has to be done for the other bucket that will contain the website for www.vtep.net. Actually, when someone will access this link, there will be a redirect to vtep.net.

The bucket is created:

By expanding the properties of the newly created bucket, on “Static Website Hosting”, you will need to select “Redirect all requests to another host name” and then enter the domain to where users should be redirected when they will access www.vtep.net:

Accessing the endpoint in a browser from the new bucket created will show the same thing as we saw when we accessed the endpoint generated for vtep.net bucket:

Now that the content has been uploaded to the S3 buckets, we need to configure Route 53 so that users can access the content of the website by typing www.vtep.net or vtep.net in the browser instead of the endpoints created by the Amazon S3.

To accomplish this, we will need to create an alias record that will map the domain vtep.net to the vtep.net S3 bucket. Also another alias will be needed for the domain www.vtep.net to be mapped to the www.vtep.net S3 bucket. As said, the second bucket is created to redirect the requests to the vtep.net bucket.

From the AWS Management Console, select Route 53. In my case, I already have configured in Route 53 the domain vtep.net. How this has been done you can see in the link from the beginning of the article and we will not repeat the process here.

As you can see, the domain is already configured:

Currently we have only two record sets, which are the default ones after you register a domain with Amazon Route 53:

Click on “Create Record Set” and then create an alias for vtep.net to be mapped to S3 bucket. The alias records use the Amazon S3 website endpoints. Amazon Route 53 maintains mappings between the aliases records and the IP addresses where the Amazon S3 buckets reside.

The same thing has to be done for www.vtep.net:

After some time (because DNS changes takes time to propagate throughout the internet), if I access vtep.net, I will get the content from the S3 bucket:

Also, when www.vtep.net is accessed, you should see the same page.

Because our test has been successful, it means that we accomplished what we wanted to achieve.

In this article we saw how you deploy a static website and how to associate a domain with the website and now you should be able to deploy a simple website using the features of Amazon AWS.

Reference