Host a static content website using S3 and CloudFront

5 min readJun 20, 2024

--

What is CloudFront?

It’s a fully managed, highly scalable service that speeds up the distribution of static or dynamic content. CloudFront delivers all your content using worldwide data center locations called Edge locations. When a user requests its content, it will route to the nearest edge location with less latency. If the content is not with the edge location, then it requests the origin to get the content. The new content will be stored in the edge location for future users.

How CloudFront Works?

Amazon CloudFront is a content delivery network (CDN) service built for high performance, security, and developer convenience.

1. You specify origin servers, like S3 buckets or web servers.

2. You upload your files to the origin servers.

3. You create a CloudFront distribution with the origin servers.

4. CloudFront will create a DNS name for your distribution.

5. CloudFront sends the distribution configuration to edge locations except for your content.

Use cases

1. Accelerate static website content delivery

2. Serve video on demand or live-streaming video

3. Encrypt specific fields throughout system processing

4. Customize at the edge

5. Serve private content by using Lambda@Edge customizations

Steps to Follow

Demo Scenario: Host static content or static website on AWS S3 and use CloudFront distribution to route traffic to S3.

Step 1: Create an Amazon S3 bucket and configure it to host a website

1. Navigate to the S3 bucket section in the Aws console, click on Create a bucket

2. Provide a name and choose a region

3. Accept all the default settings and click on Create bucket

Step 2: Create a sample website and save the file in your S3 bucket

Now we have created a bucket and let’s configure it for website hosting

Click on the bucket created earlier, click on the properties

2. Scroll down to Static website hosting and choose to enable

3. In the index document, specify the name index.html. Click on Save changes

Step 3: Upload the index to create website content

As we enabled static website hosting earlier, let's upload the HTML file.

Create a file called index.html and copy the below content to the file

<html>
<head>
<title>Amazon CloudFront Getting Started</title> 
</head>
<body>
<h1>Routing Internet Traffic to an Amazon S3 Bucket for Your Website</h1>
<p>For more information, see 
<a href=" https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/HowCloudFrontWorks.html">Getting Started with Amazon CloudFront</a> 
in the <emphasis>Amazon CloudFront Developer Guide</emphasis>.</p>
</body>
</html>

2. Below is the file created

3. Let’s upload this file to the s3 bucket. Navigate to the S3 bucket and click on upload

4. Verify the uploaded file

Step 4: Edit the block public Access settings

1. Navigate to permission under the bucket

2. Click on edit block public access settings, clear all settings, and click on save

Step 5: Attach a Bucket Policy

After you edit Amazon S3 Block Public Access settings, you can add a bucket policy to grant public read access to your bucket objects. When you grant public read access, anyone on the internet can access your bucket.

1. Navigate to permissions under the S3 bucket. Under bucket policy, click on edit

2. Copy the below bucket policy and paste it into the policy section. Replace the bucket name. Click on Save Changes.

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

Step 6: Create CloudFront distributions for the S3 bucket

1. Navigate to CloudFront, click on Create a CloudFront Distribution

2. Choose the origin as the S3 bucket created earlier from the dropdown.

3. Under cashing Keep everything else default and click on create distribution.

4. Note down the Distribution domain name: https://dh8b2cz5zgywp.cloudfront.net

Step 7: Testing

Copy the distribution name and paste it into the browser

https://dh8b2cz5zgywp.cloudfront.net

Pricing

CloudFront charges for data transfers out from its edge locations, along with HTTP or HTTPS requests.

Conclusion

CloudFront is a highly scalable distribution service that speeds up the distribution of your static and dynamic content. CloudFront can be used with AWS WAF to securely access. Route 53 can be used along with CloudFront for user-friendly domain names.