How to Create an S3 Bucket on AWS & Host a Static Website

Today we’re going to create an S3 bucket on AWS and modify it so that it can host a static website and be reachable through the internet. Also, we’re going to use CloudFront with the static website to take advantage of edge caching benefits. And to enhance the security of the website, we will restrict direct access to the S3 bucket by end-users.

Real-World Use Case Scenario

Let’s say we have a startup company that offers digital banking services. The company uses their website as a platform to interact with the bank, acquire new customers and provide them with information regarding the services offered. At this time, the website is hosted on an on-premises server. This requires a dedicated IT team to manage it, which creates additional costs and complexity to the infrastructure. As a solution, the company has decided to move their website to Amazon S3.

What is Amazon S3?

Amazon S3 (Simple Storage Service) is a highly scalable cloud storage service used to store infinite amounts of data. S3 provides great data availability, performance and security. Use cases for S3 include data archiving, backup and restore, static website hosting, data lakes and big data analytics, and more.

What are S3 buckets?

S3 buckets are containers used to store objects. Objects are files along with the metadata (additional information) for them. Buckets offer unlimited storage capacity for objects, and high durability by replicating and storing the data across multiple devices in an Availability Zone.

What is CloudFront?

Amazon CloudFront is a service that delivers content, such as web pages and application data, with low latency, high scalability and security. CloudFront caches (temporarily stores) content at Edge Locations stationed around the world near end-users. This improves response time by delivering the content from the Edge Location nearest to the user, instead of directly from the S3 bucket.

Let’s get started.

To complete these steps, you will need an AWS account. If you don’t have one, sign-up for an account at aws.amazon.com.

Once you have an AWS account, sign in to your AWS Management Console.

In your AWS Management Console, select Services. Scroll down and select Storage. On the right side, select S3.

Click Create Bucket.

Choose a Bucket name. Keep in mind, bucket names must be Globally Unique across all AWS accounts, which means two buckets cannot have the same name.

Scroll down and make sure to uncheck Block Public Access settings for this bucket. Also make sure to check the “I acknowledge…” box below.

Scroll down and click Create bucket.

Click on the bucket name.

Click Upload then click Add Files to add your content file to the bucket.

Once you have the content file added, click Upload at the bottom of your screen.

You should see Upload succeeded on the next page.

Click Close to go to the bucket dashboard. Once there, click the Properties tab.

Scroll down to Static website hosting and click Edit. (Here the bucket will be modified to allow static website hosting.)

Under Static website hosting click Enable. In the Index document field, enter the name of the html file that was added to the bucket. Then scroll down and click Save Changes.

Now if you scroll down and click the Bucket website endpoint,

you will get a 403 Forbidden error. This is because permissions are not set to grant access to the website.

Go back. Scroll up and click the Permissions tab.

Scroll down to Bucket policy and click Edit. Make sure Block off public access is Off.

Click Add new statement.

This will populate a default bucket policy as shown below.

Edit the bucket policy to reflect the policy shown below. Replace <BUCKET_NAME> with the name of your bucket.

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

Scroll down and click Save changes. Go to Properties and click the Bucket website endpoint again.

You will now see that your website is accessible. Here is an example of my publicly accesible website:

Now go to https://aws.amazon.com/cloudfront/ and click Get Started with Amazon CloudFront.

On the next page, click Create a CloudFront distribution.

Click the field under Origin domain and select your S3 bucket.

Select Origin access control setting (recommended) and click Create control setting. Selecting Origin access control settings restricts access to the S3 bucket and only allows access to the content through CloudFront.

Click Create.

Click the field under Origin access control and select the control setting you created.

Scroll down and under Viewer protocol policy select Redirect HTTP to HTTPS. We want to select this so that CloudFront will redirect HTTP requests to HTTPS. HTTPS is more secure than HTTP as it encrypts all traffic using SSL/TLS protocols.

Scroll down and under Cache policy select CachingOptimized. Caching stores copies of your content at edge locations closer to end users. Requests for your content are served from the edge location closest to the user instead of from the origin server. Reducing requests to the origin server reduces latency and improves performance.

Under Web Application Firewall (WAF) select Enable security protections. With AWS WAF, you can monitor web requests to your CloudFront distribution and protect it from common web-based attacks with defined rules.

Scroll down and click Create distribution.

On the next page, click Copy policy then click Go to S3 bucket permissions to update policy. We are going to update the S3 bucket policy to restrict direct access.

On the Permissions tab next to Bucket policy click Edit.

Under Policy paste the policy you copied after creating the CloudFront distribution.

Click Save changes.

Go to CloudFront and click on your distribution.

Copy the Distribution domain name.

Open a new tab and paste the Distribution domain name in the address bar. Add the name of the file in the bucket at the end of the URL. You will now see your content is visible.

Now let’s see if we can access the S3 bucket directly. Go to your bucket and click on the file thats there.

Click the Object URL to view the file in the bucket.

You will see the page below. This page indicates that access to the bucket is restricted.

That’s it! Thank you for following along with me. Stay tuned for more!