INTRODUCTION

If you ask me what the cheapest and easiest way to host a static website application is, I would tell you S3 bucket coupled with CloudFront without blinking an eye. You can have the fastest, and most cost efficient website deployed to your customers with those two services unlike the elastic beanstalk.

This is especially good if you are just a small business owner with a very lean budget and a minimal website.

What is AWS S3

S3 is an accronym for Simple Storage Service. The Amazon storage service that offers industry leading scalability, data availability, security and performance. The AWS S3 is used to store metadata or multi media files referred to as Object in a container called Buckets. A bucket can store any number of object, however, you can have only a hundred bucket per AWS accounts. That is more than enough in many cases.

Interestingly, S3 is made up of different classes that are designed based on the use case of the objects stored in them. The classes includes S3 standard, S3 Standard Infrequent-Access, S3 Intelligent tiering, S3 One-Zone, S3 Glacier Instant Retrieval, S3 Glacier Flexible Retrieval, and S3 Glacier Deep Archive. Each differs in cost and availability up to 99.999999999 (11 9s). S3 also has a lifecycle policy, which when configured can move the objects in a bucket to another class after the lifecycle (in number of days).

WHAT IS CLOUDFRONT

Amazon CloudFront according to the official AWS website, is a web service that speeds up distribution of your static and dynamic web content, such as .html, .css, .js, and image files, to your users. CloudFront also delivers your content through a worldwide network of data centers called edge locations.

When a user requests content that you’re serving with CloudFront, the request is routed to the edge location that provides the lowest latency (time delay), so that content is delivered with the best possible performance.

Create s3 bucket

Now that we know a little about S3 and CloudFront, let’s move to host a static website using this services.

We will start by creating the a bucket, thereafter we will upload the source code which is our website, then enable the static web hosting in S3 before creating CloudFront to host our application.

Search for S3 in you AWS console, and click the Create Bucket button.

Enter a unique name for your S3 bucket, the bucket should not be use anywhere in the world, so you have to be creative in creating the name. Select your preferred region.

Uncheck the Block All Public Access option. We do this so that S3 can allow users access via CloudFront to the website that we host. Alternatively you block all public access and use the ACL to control access. However, that is beyond the scope of this tutorial.
Also, check the acknowledgement from AWS too.

Then click the Orange Create Bucket button.

upload the source code

Once the bucket is created we will need to upload the static website code into the S3 bucket. I find the demo code for this tutorial here. You can also clone the repository from here.

Under the new window,find the objects tab, then click Upload

Select all the elements in the root directory of the static website source code and upload to S3. DO NOT put the root directory directly into S3. This is because AWS S3 will not host the website with the directory in the bucket thereby making it difficult for CloudFront to serve.

Click the Upload button, then wait a few minutes for the application source code to upload into S3.

You will see Succeeded like below.

Now, we need to set the permissions for AWS S3 to allow the Static Web Hosting property have visibility of the website source code we upload earlier. We will add the GetObject and PutObject into the Bucket Policy.

create bucket policy

First, select Permissions from the options, Scroll down to find the Bucket Policy.

Click the Edit under Bucket Policy.

Click the Add New Statement

Use the Filter actions to find S3, then scroll down to find GetObject and PutObject from the list of permissions in the statement.

Your final Bucket policy should look like the below. You can also copy and paste this code in the json window.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Statement1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:PutObject"
            ],
            "Resource": "arn:aws:s3:::sample-static-site-ytess0w/*"
        }
    ]
}

Click the Create Policy button.

enable the static web hosting properties in AWS s3

Since we are able to generate the policy for the S3 bucket that contains the source code of our application, we can go ahead and use the Static Web Hosting feature in AWS S3 to host our website and a little close to using AWS CloudFront.

Click on the Properties

Scroll down to find the Static Website Hosting feature. Click Edit.

Click the Enable and the under Hosting Type, select Host a Static Website. Use index.html for the Index Document. Then click the Create button.

You will find the URL for the S3 static application at the bottom of your page.

Copy and paste the URL on your web browser to and you will find the application.

SETup cloudfront to serve the static web application from s3

Next, we will serve this static application with CloudFront. CloudFront is AWS caching service. We will use it to achieve three purpose in this tutorial. First is to cache our static web application for faster load time, second is to add a secure layer to our web traffic with HTTPS, and thirdly, to secure the direct S3 static url from direct access.

So, search for CloudFront from the AWS Search bar. Click on Create a CloudFront Distribution.

In the Origin domain, DO NOT select the S3 bucket from the drop down list. Instead, Copy the static application URL and paste it their. That will make CloudFront serve the application hosted with the Static Web Hosting. Using the S3 arn will only serve the bucket content which is not what we want.

Select only HTTP for the protocol.

For the Origin path, you can enter index.html. Although it is optional. Leave the name as it is.

The next configuration for using CloudFront to serve the website we use S3 to host will be to use the HTTPS in the viewer protocol policy. Use the GET, HEAD methods. Then click Create Distribution.

It will take about 3-5 minutes for AWS CloudFront to finish configuring. After that, grab the CloudFront URL and paste in your web browser.

Paste the CloudFront URL in your web browser and you will see the application served with the SSL lock.

Conclusion

We have successfully used AWS S3 to host our simple website and served our customers AWS CloudFront URL.

This is just one way to host a static website on AWS. I demonstrated how to deploy static application using docker and also Nginx on Ubuntu EC2 server. Each has it’s own uniqueness and use case. I recommend you check it out by clicking here.

troubleshooting

1. ERROR: 403 Forbidden Code: AccessDenied Message, AccessDenied
   SOLUTION: Create the bucket policy, or check that the bucket policy is properly created with the GetObject and PutObject permission.

2. ERROR: 404 Not Found
   Code: NoSuchKey
   Message: The specified key does not exist.
   Key: index.html
   SOLUTION: This means S3 can not find the index.html file in the bucket. Check the content you uploaded into S3 and make sure index.html is at the root of the bucket.