DEV Community

Cover image for Hosting a Static website on a private Amazon S3 bucket using CloudFront’s OAC
Goodnews Azonubi
Goodnews Azonubi

Posted on

Hosting a Static website on a private Amazon S3 bucket using CloudFront’s OAC

Introduction

In this article, we’ll explore how to securely host a static website on a private Amazon S3 bucket using Amazon CloudFront with Origin Access Control (OAC). By following these steps, you can ensure that your website content is accessible only through authorized channels while benefiting from the performance and scalability of CloudFront.

Prerequisites

To follow through with this article you need to meet the following requirements

  • You should have registered an AWS Account
  • Static website files to be uploaded (HTML, CSS, JavaScript)

Table of contents

  • Amazon S3
  • Amazon CloudFront
  • Creating an Amazon S3 Bucket
  • Uploading Static Website Files
  • Setting Up CloudFront and OAC
  • Testing Your Setup
  • Conclusion

Amazon S3

Amazon Simple Storage Service (Amazon S3) is an object storage service used to store and retrieve any type data i.e text files, video files etc.

Amazon CloudFront

Amazon CloudFront is an Amazon web service that speeds up the distribution of your static and dynamic web contents securely using a content delivery network (CDN). CloudFront ensures your web contents are accessible globally by caching them in edge locations.

Creating an Amazon S3 Bucket

  • Log in to your AWS Management Console. Navigate to the S3 service.

Image description

  • Click Create bucket and enter a unique bucket name
  • Scroll down and click Create bucket

Image description

Leave other settings as default. By default your bucket is set to private

Image description

Uploading Static Website Files

Upload your static website files to the S3 bucket.

Image description

This is all we are doing here for now

Setting Up CloudFront and OAC

  • Go to the CloudFront service in the AWS Management Console.

  • Click Create a CloudFront distribution

Image description

Choose your s3 bucket name from the origin domain pop up.

Image description

  • Since our bucket is private we need a way to access it privately using CloudFront distribution. To achieve this we need to create an Origin Access Control (OAC) which is a newer way to establish secure connection. Unlike Origin Access Identity (OAI) which is an older way to connect CloudFront distribution to S3, Amazon CloudFront introduces Origin Access Control (OAC) which provides more functionality like signed requests, supports accessing S3 in all AWS regions which includes currently existing and future regions and more features.

Image description

Image description

You can choose to enable WAF which adds another layer of security to incoming traffic going to your CloudFront distribution

Image description

But since this is a temporal deployment you can go with the second option

Image description

Now scroll down and click on Create distribution

Copy Policy generated by CloudFront OAC

Image description

Let’s go back to our S3 bucket permission to paste our generated policy

Image description

Paste policy and save changes

Image description

Testing your setup
Go back to your CloudFront to copy your Distribution domain name

Image description

Paste on your browser

Image description

  • Verify that your content is served securely via CloudFront.

Conclusion

In conclusion, by following the steps outlined in this guide, you’ve successfully set up a secure and efficient hosting environment for your static website using Amazon S3, CloudFront, and Origin Access Control (OAC). Your website content is now accessible only through authorized channels, ensuring both security and scalability.

That’s all for now, I hope you found this helpful 🙂

Let’s connect on LinkedIn

Top comments (0)