Guide: Hosting a Secure Static Site with S3 & CloudFront OAC

This guide summarizes the modern, secure method for hosting a high-performance static website on AWS, based on the Tutorials Dojo article. The core of this architecture is using Amazon S3 for storage, Amazon CloudFront for content delivery, and Origin Access Control (OAC) to secure the connection between them.

Architecture Overview & Why Use OAC?

The architecture is simple and robust:

1. Your website's static files (HTML, CSS, JS, images) are stored in a private S3 bucket.

2. A CloudFront distribution acts as the fast, global Content Delivery Network (CDN) and the public-facing entry point to your site.

3. Origin Access Control (OAC) is a CloudFront feature that locks down your S3 bucket, ensuring it can only be accessed by your CloudFront distribution, not directly from the internet.

This is superior to legacy methods like public S3 buckets (which are insecure) or the older Origin Access Identity (OAI), as OAC provides stronger security and more granular policy options.

Step 1: Prepare Your S3 Bucket

First, set up the S3 bucket that will store your website's files.

1. Create an S3 Bucket: Create a new bucket in the AWS region of your choice.

2. Upload Your Files: Upload your website's build files (e.g., index.html, style.css, etc.) to the bucket.

3. Block All Public Access: In the bucket's "Permissions" tab, ensure that "Block all public access" is turned ON. This is a critical security step.

4. Disable Static Website Hosting: In the bucket's "Properties" tab, make sure that the "Static website hosting" feature is Disabled. Since CloudFront will be handling all web requests, this S3 feature is not needed and can interfere with the setup.

Step 2: Create a CloudFront Distribution with OAC

Next, create the CloudFront distribution that will serve your content.

1. Navigate to the CloudFront console and click "Create distribution".

2. For the Origin domain, select your S3 bucket from the dropdown list.

3. In the Origin access section, select Origin access control settings (recommended).

4. Click Create new OAC. You can accept the default name and settings. This creates the new OAC identity that CloudFront will use.

5. After creating the OAC, CloudFront will display a message suggesting you update the S3 bucket policy. While it offers a "Copy policy" button, it's often best to complete the distribution setup first and then apply the policy manually.

6. Set Viewer protocol policy to Redirect HTTP to HTTPS for improved security.

7. In the Default root object field, enter index.html.

Finish creating the distribution and wait for it to deploy.

Step 3: Apply the S3 Bucket Policy

This is the most important step for securing your bucket. The OAC is created, but the S3 bucket doesn't yet know to trust it. You must add a bucket policy to grant access.

1. Navigate to your S3 bucket in the AWS console and go to the "Permissions" tab.

2. Click "Edit" in the "Bucket policy" section.

3. Paste the following JSON policy. You must replace YOUR_BUCKET_NAME and YOUR_CLOUDFRONT_DISTRIBUTION_ARN with your actual values.