Amazon S3 storage can host static websites. Combining such a static site with a REST server, we can separate the frontend and backend code completely. In this post, I will go through the procedures to

A domain name could cost as low as $1 a year. The S3 Standard Storage tier costs $0.023 per GB per month for the first 50 TB, and the web hosting service costs less than a cent per 1000 HTTP requests. The setup should take less than 10 minutes.

setup S3 web hosting

In Amazon S3, files are organized in buckets. The size limit for a single file is 5TB, and the number of files in a bucket is unlimited. Here we will only need one bucket for the static website.

Creating a vanilla S3 bucket is as easy as picking a unique bucket name. After accepting all default settings for the bucket, go to the “properties” tab and enable the static web hosting. On that tab, you will find the website endpoint to be of the form

http://<bucket-name>.s3-website-<region>.amazonaws.com

For example

http://my-very-first-bucket.s3-website-us-east-1.amazonaws.com

In the “static web hosting” tab, you should also specify the index document, which is typically index.html, and make sure to upload one.

To enable public access, go to the “Permissions” tab, then the “Bucket Policy” sub-tab, and add the following text. Make sure to fill in the real bucket name.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<bucket-name>/*"
        }
    ]
}

This is the preferred way to grant public access. The alternative is to enable it from access control list, either in the bucket-creation process or in the “Access Control List” (ACL) sub-tab. More details about their differences can be found in this page. In short, bucket policy only provides access control over the whole bucket whereas ACL can do that on individual objects.

Another minor difference is that if public access is granted in ACL, the following URL is also exposed

http://<bucket-name>.s3.amazonaws.com/

link the NameCheap domain name to s3 end point

After buying a domain name from NameCheap, go to the “domain list” tab in the NameCheap user dashboard. Select the newly-purchased domain name, and go to the “Advanced DNS” tab. Here we will set the host records to be something like the table below

Type Host Value TTL
CNAME Record www mysite.com.s3-website-us-east-1.amazonaws.com. Automatic
URL Redirect Record @ http://www.mysite.com Unmasked  

In this example, the bucket is named “www.mysite.com”, which matches the domain name exactly. This is required for the routing to work.

epilogue

Amazon S3 web hosting does not support HTTPS and SSL certificate cannot be assigned to S3 bucket directly. To get HTTPS support, one needs to use Amazon CloudFront in addition.

references