Lightning-Fast Static Website with Amazon S3 and CloudFront with Origin Access Control (OAC)

Harnessing the power of Amazon S3 and CloudFront, with the added advantage of Origin Access Control (OAC), offers many benefits for hosting a static website. With Amazon S3’s reliable and scalable storage, with CloudFront’s global content delivery network, a website can provide lightning-fast access to users worldwide.

Implementing OAC adds an essential layer of security that prevents direct access to the S3 bucket, mitigating potential security risks. OAC is also empowered with fine-grained control over access permissions, enabling us to define specific rules and restrictions.

In this step-by-step guide, we will delve into the seamless integration of Amazon S3, CloudFront, and Origin Access Control (OAC) to deploy a lightning-fast static website. Throughout this article, we will gain valuable insights and practical instructions to successfully deploy and leverage the remarkable capabilities of S3, CloudFront, and OAC, ensuring that a static website loads quickly, remain highly available, and provides an exceptional browsing experience.

Let us get started!

S3 bucket configuration

We have an existing S3 private bucket named tutorials-dojo-react-build-files. This bucket contains the build files for the static website. All of these objects are private and do not need to make public throughout this deployment.

NOTE: Observe that the Static website hosting is DISABLED

Creating Origin Access Control (OAC)

• In the AWS Management Console, go to CloudFront, under Security, Create a Control Setting.

NOTE: Make sure that the Sign requests (recommended) option is selected

Create CloudFront Distribution

• From CloudFront Dashboard, Click Distribution, then Create Distribution

Select the target bucket from the dropdown:

• In Origin Access, select Origin access control settings (recommended). Then select the OAC created from the previous steps.

NOTE: Unlike the legacy settings for Origin Access Identity (OAI), where there is an option to update the bucket policy automatically. For this setup, it needs to be manually updated always.

• Leave the Default settings and then proceed to “Create Distribution”

After the “Distribution” is created, a bucket policy will be created. Make sure to copy and update the bucket policy in the S3 bucket. Then Save Changes.

• Go Back to the created CloudFront Distribution and Edit the Settings:

• Fill the Default root object with index.html

NOTE: Adding “index.html” as the default root object in the CloudFront distribution is essential for ensuring that visitors to the website can access the desired content without specifying the exact file name in the URL. By setting “index.html” as the default root object, CloudFront knows to look for this file and automatically serve it to the user. This eliminates the need for users to explicitly include “index.html” in the URL.

Access the website

• Copy the distribution domain name from the CloudFront Distribution created previously:

• Open the browser and paste the domain name in this example dgx107u4pf1u3.cloudfront.net. As we can see, the website can already be accessed from CloudFront.

• Check if the website can be accessed from the CloudFront domain alone. If we try to access using S3 URL, we will encounter the following error:

This demonstrates the enhanced security and access control of this setup. OAC acts as a protective barrier, allowing only trusted sources like our CloudFront distribution to interact with the S3 bucket where our static website files are stored. By preventing direct access to the S3 bucket, OAC reduces the risk of unauthorized access attempts and potential data breaches.

Upon confirming this, we completed deploying a lightning-fast static website using Amazon S3 and CloudFront. We can now deliver our website content quickly and efficiently to users worldwide. With S3’s reliable storage, CloudFront’s global content delivery network, and the added benefits of Origin Access Control (OAC), we have the tools to create a secure, scalable, high-performance website.

References:

Restricting access to an Amazon S3 origin – Amazon CloudFront

https://aws.amazon.com/blogs/networking-and-content-delivery/amazon-cloudfront-introduces-origin-access-control-oac

Use CloudFront to serve a static website hosted on Amazon S3