Skip to content
HomeBlog
HomeBlog
HomeBlog
Goodnews Azonubi profile photo

Goodnews Azonubi

Backend/DevOps Engineer

Sep 27, 2024

·

3 min read

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

  • aws
  • staticwebapps
  • cloudstorage
  • devops
·

Originally published on dev.to ↗

Goodnews Azonubi profile photo

Goodnews Azonubi

Backend/DevOps Engineer

Building @stacklenzz | @Littlelyst

Comments & Discussion(0)

Leave a Comment

All guests are welcome. You can provide your name or leave it blank to post as Anonymous.

Loading comments…

← All articles

© Goodnews Azonubi · Backend & DevOps Engineer · Fullstack Developer

Admin

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.

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

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

Uploading Static Website Files

Upload your static website files to the S3 bucket.

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

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

  • 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.

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

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

Now scroll down and click on Create distribution

Copy Policy generated by CloudFront OAC

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

Paste policy and save changes

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

Paste on your browser

  • 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