Static Website Hosting with Amazon S3


Learn how Amazon S3 allows you to host a static website in this tutorial by Sunil Gulabani.

Amazon Simple Storage Service (S3) is a web storage service accessed via the HTTP protocol using a web service interface. It is used to store/retrieve files centrally over the internet, which helps developers to create applications that are highly scalable, efficient, secured, and inexpensive. S3 offers unlimited storage, so developers need not worry about disk space issues.

It also provides static website hosting, where you can deploy your website and map a domain name. It’s easy and cost-efficient to host a website by uploading the HTML pages and enabling the static website hosting configuration. Apart from this, you can also redirect the HTTP request coming through S3 to another HTTP/S URL.

Amazon S3 allows you to host a static website. Static HTML pages can be deployed on S3 and using the scripting language (such as JavaScript), you can make it a dynamic website. For hosting, you need to configure the bucket and map your domain name to redirect the request to the Amazon S3 bucket.

AWS Management Console

It’s time to get started with hosting a static website on Amazon S3:

  1. Create an S3 bucket and grant public access: Create a bucket with the name blog.tweakings3.comand grant Public permissions so that anonymous users can access the HTML files:

Static Website Hosting with Amazon S3 1

Figure 4.18: Create Bucket (www.blog.tweakings3.com)

  1. Upload the HTML file: Upload the htmlfile to the bucket, www.blog.tweakings3.com.
  2. Edit the Bucketpermission: Go to the Bucket’s Permission tab and click on Bucket Policy:

Static Website Hosting with Amazon S3 2

Figure 4.19: Bucket Policy

Add the following policy and click on Save:

{

   “Version”: “2012-10-17”,

   “Statement”: [{

      “Sid”: “AddPerm”,

      “Effect”: “Allow”,

      “Principal”: “*”,

      “Action”: “s3:GetObject”,

      “Resource”: “arn:aws:s3:::www.blog.tweakings3.com/*”

   }]

}  

This will prompt you with a warning, This bucket has public access. Ignore this warning as you’ll provide public access to this bucket and click on Save.

  1. Configure Static website hostingProperties: Go to the bucket’s properties tab and click on Static website hosting:

Static Website Hosting with Amazon S3 3

Figure 4.20: Static Website Hosting Configuration

You can choose the Use this bucket to host a website option, as this contains the configuration for home page and error page settings. Provide the home page HTML filename and an error page HTML filename. You can also configure the redirection rules for redirecting the request to the specific content.

Click on Save.

  1. Create the S3 bucket and redirect the request

Create a bucket with the name, blog.tweakings3.com, and configure the static website hosting properties, as shown in the following screenshot:

Static Website Hosting with Amazon S3 4

Figure 4.21: Static Website Hosting Configuration for Redirecting Request

Whenever you get a request for blog.tweakings3.com, it should redirect the request to the www.blog.tweakings3.com bucket. With this configuration, you ensure that blog.tweakings3.com and www.blog.tweakings3.com work for the request.

Click on Save.

  1. Configure the Hosted Zone: Here, you can map your domain name with the S3 bucket so that you can serve the static website. For this, you need a domain name and a hosted zone. You already have a domain name, com, purchased from Amazon Route53:

Static Website Hosting with Amazon S3 5

Figure 4.22: Existing Hosted Zone

Note that AWS Route53 is a Domain Name System (DNS) web service, which translates and routes domain name requests to the respective IP address. For more details on Route53, visit https://aws.amazon.com/route53/.

You’ll need to create one subdomain and redirect your request to the bucket.

Click on Create Record Set:

Static Website Hosting with Amazon S3 6

Figure 4.23: Record Set for blog.tweakings3.com

Provide the name as blog and set the Alias option to Yes. Here, you can provide Alias Target as s3-website-ap-southeast-1.amazonaws.com, which means that the request will be redirected to http://blog.tweakings3.com.s3-website-ap-southeast-1.amazonaws.com.

Create another Record Set with the name www.blog and set the Alias option to Yes and Alias Target as the same S3 URL s3-website-ap-southeast-1.amazonaws.com. So, this record set states that it will redirect www.blog.tweakings3.com to http://www.blog.tweakings3.com.s3-website-ap-southeast-1.amazonaws.com:

Static Website Hosting with Amazon S3 7

Figure 4.24: Record Set for www.blog.tweakings3.com

  1. Test the URL: Try executing these URLs,

http://www.blog.tweakings3.com/ or http://blog.tweakings3.com/:

Static Website Hosting with Amazon S3 8

Figure 4.25: Test URL

If you found this article helpful, you can explore Sunil Gulabani’s Amazon Web Services Bootcamp to learn how to build and manage highly reliable and scalable applications and services on AWS. This book is a fast-paced guide that will quickly enhance your skills to develop a highly scalable cloud environment.

 

Leave a comment

Your email address will not be published. Required fields are marked *