Website Delivery with Amazon CloudFront

Deliver a static website globally using CloudFront's CDN and secure S3 access.

Introduction

30 Second Summary

When you visit a website, the speed you experience depends on how far the server is from you. A user in Tokyo accessing a server in Virginia will always wait longer than someone down the street.

In this project, you will deploy a static website through Amazon CloudFront, a content delivery network that caches your site at edge locations around the world. Every visitor gets a fast, secure experience no matter where they are.

What You'll Build

A static website delivered globally through CloudFront, secured with Origin Access Control so your S3 bucket stays private.

By the end of this project, you'll have:

  • An S3 bucket containing your website files (HTML, CSS, JavaScript).
  • A CloudFront distribution delivering your site from edge locations worldwide.
  • An Origin Access Control (OAC) policy securing access between CloudFront and your S3 bucket.
  • Secret Mission: Enable S3 static website hosting and compare performance, URLs, and security against CloudFront delivery.

Are there any prerequisites?

You'll need an AWS account to complete this project. If you don't have one yet, complete the "Set Up An AWS Account" project first.

Create an S3 Bucket and Upload Website Files

Before CloudFront can deliver your website to users around the world, it needs a place to pull the files from.

That place is an Amazon S3 bucket. In this step, you will create a bucket, upload three website files to it, and confirm the site works locally before wiring it up to CloudFront.

In this step, get ready to:
  • Create an S3 bucket with a unique name.
  • Download and upload three website files to the bucket.
  • Preview the website locally to confirm it works.
Create an S3 bucket

An S3 bucket is a container that holds your files in the cloud. You need one before you can upload anything.

  • Sign in to the AWS Management Console at https://console.aws.amazon.com.
  • In the search bar at the top, type S3 and select S3 from the results.
  • In the left navigation pane, click General purpose buckets.
  • Click Create bucket.
  • In the Bucket name field, enter a unique name following this pattern:
nextwork-cloudfront-[[YOURNAME="your name and some numbers e.g. jane123"]]
  • Leave all other settings as their defaults.
  • Scroll to the bottom and click Create bucket.

Why does my bucket name need to be unique?

S3 bucket names are globally unique across all AWS accounts. Adding your name and some numbers ensures no one else has already taken the name.

Bucket names must be 3 to 63 characters long, use only lowercase letters, numbers, and hyphens, and start and end with a letter or number.

You should see a green success banner at the top of the page confirming your bucket was created.

Seeing a "Bucket name already exists" error?

Someone else already has that name. Try adding more numbers or a different combination to the end of your bucket name.

Help me fix my S3 bucket name error.

Download and upload website files

Your bucket is empty right now. You need to add the website files that CloudFront will eventually serve to users around the world.

  • Download the three website files provided for this project: index.html, style.css, and script.js.
  • Save them somewhere easy to find on your computer, like your Desktop.
  • Back in the S3 console, click on your newly created bucket name to open it.
  • Click the Upload button.
  • Click Add files.
  • Select all three files (index.html, style.css, script.js) from where you saved them.
  • Click Upload.

You should see a success banner confirming all three files uploaded. Click Close to return to your bucket.

Files not appearing in your bucket?

Make sure you clicked Upload (the orange button at the bottom) after adding files. Simply selecting files does not upload them.

Help me upload files to my S3 bucket.

Preview your website locally

Before connecting this site to CloudFront, confirm the files actually work as a website. You can do this by opening the HTML file directly in your browser.

  • Find the index.html file you downloaded earlier on your computer.
  • Double-click it to open it in your browser.

You should see your website rendered in the browser. It loads from your local machine right now, not from the cloud.

Why preview locally first?

If something looks wrong after deploying through CloudFront, you want to know whether the issue is with the files themselves or with the CloudFront configuration. Previewing locally rules out file problems early.

Page looks broken or blank?

Make sure all three files (index.html, style.css, script.js) are saved in the same folder. The HTML file references the other two files by name, so they need to be together.

Help me troubleshoot my local website preview.

Your website files are uploaded to S3 and confirmed working. Next up, you will create a CloudFront distribution that delivers these files to users from edge locations around the world.

Create a CloudFront Distribution

Your S3 bucket is loaded with website files. The problem is that S3 is designed for storage, not for fast global delivery to users around the world.

Amazon CloudFront solves this by caching your content at 750+ edge locations around the world. In this step, you'll create a CloudFront distribution that uses your S3 bucket as its origin.

In this step, get ready to:
  • Navigate to the CloudFront console and start creating a distribution.
  • Configure your distribution with your S3 bucket as the origin.
  • Record your distribution domain name and test access.
Navigate to CloudFront
  • In the AWS Management Console, click the search bar at the top.
  • Type CloudFront and select CloudFront from the results.
  • Click Create a CloudFront distribution.

What is a CloudFront distribution?

A distribution is a CloudFront resource that tells AWS which content to deliver and where to deliver it from. It connects your origin (the S3 bucket where your files live) to CloudFront's global network of edge locations.

When someone visits your site, CloudFront serves the content from the edge location closest to them instead of fetching it from S3 every time. This makes your site load faster for users everywhere.

Configure your distribution settings

The CloudFront creation wizard walks you through several pages of settings. You'll set a name, choose a distribution type, select your S3 bucket as the origin, and disable the firewall.

  • In the Distribution name field, enter a name that matches your S3 bucket (e.g., nextwork-cloudfront-yourname123).
  • For Distribution type, select Single website or app.
  • Click Next.

You're now on the Origin page where you'll connect your S3 bucket.

  • Click Browse S3 and select your bucket (nextwork-cloudfront-yourname123).
  • Keep the default recommended settings. This automatically configures Origin Access Control (OAC) for your distribution.
  • For Web Application Firewall (WAF), select Do not enable security protections.
  • Click Next, then click Create distribution.

What is Origin Access Control?

OAC is a security feature that restricts access to your S3 bucket so only CloudFront can read from it. Without OAC, anyone who discovers your S3 bucket URL could access your files directly, bypassing CloudFront entirely.

The recommended settings you just kept configure OAC automatically. However, your S3 bucket also needs a policy update to trust requests from CloudFront. You'll handle that in the next step.

Why disable WAF?

AWS WAF (Web Application Firewall) is a paid security service that protects against common web exploits. For this learning project with no real traffic, it's unnecessary cost. You can always enable it later for production sites.

Record your distribution domain name

After creating your distribution, CloudFront takes you to the distribution details page. Your distribution is now deploying across edge locations worldwide.

  • Find the Distribution domain name on the details page. It looks like d111111abcdef8.cloudfront.net.
  • Copy this domain name and save it somewhere you can access later (a text file or sticky note works).
  • Open a new browser tab and paste your distribution domain name into the address bar.
  • Press Enter to visit the URL.

You'll see an XML error page with the message Access Denied. This is expected.

Why am I seeing an Access Denied error?

Your CloudFront distribution is configured to use OAC, which means it will sign requests to your S3 bucket. However, your S3 bucket doesn't have a policy that recognizes and trusts those signed requests yet.

Think of it like having a key (OAC) but the door (S3 bucket policy) hasn't been set up to accept that key. You'll fix this in the next step by updating your bucket policy.

Seeing a different error?

If you see a message about your account needing verification before creating CloudFront resources, contact AWS Support through the AWS Support Center. This is a one-time requirement for some new accounts.

If the page shows nothing or times out, your distribution may still be deploying. Wait a few minutes and try again.

Help me troubleshoot my CloudFront distribution error.

Your CloudFront distribution is created and deploying to edge locations worldwide. In the next step, you'll update your S3 bucket policy so CloudFront can actually serve your website files to visitors.

Configure Origin Access Control (OAC)

Your CloudFront distribution is created, but visiting the domain returns an access error. That's because CloudFront doesn't yet have permission to read files from your S3 bucket.

In this step, you'll fix that by configuring Origin Access Control (OAC). OAC sends authenticated requests from CloudFront to your S3 bucket, so users can only access your site through CloudFront and never directly from S3.

In this step, get ready to:
  • Edit your origin settings to use OAC.
  • Update your S3 bucket policy to grant CloudFront read access.
  • Verify your website is live through CloudFront's global CDN.
Edit the origin settings

Right now, your CloudFront distribution's origin is set to public access. You need to change it to use OAC so CloudFront sends authenticated requests to S3.

  • Return to your CloudFront distribution in the AWS Console.
  • Click the Origins tab.
  • Select your S3 origin (the row showing your bucket name).
  • Click Edit.
  • Under Origin access, change the setting from Public to Origin access control settings (recommended).
  • Click Create new OAC.
  • Leave the default settings (Sign requests is selected, origin type is S3).
  • Click Create.

What is Origin Access Control?

OAC is a security feature that ensures only your CloudFront distribution can read from your S3 bucket. It works by signing every request CloudFront sends to S3, proving the request is legitimate.

Without OAC, anyone who knows your S3 bucket URL could access your files directly. With OAC, your bucket stays private and only serves content through CloudFront.

Why not just make the bucket public?

Making a bucket public works for simple cases, but it means anyone with the S3 URL can bypass CloudFront entirely. You lose caching benefits, usage analytics, and security protections like DDoS mitigation that CloudFront provides.

Update your S3 bucket policy

After creating the OAC, CloudFront provides a bucket policy you need to apply to your S3 bucket. This policy tells S3 to accept authenticated requests from your specific CloudFront distribution.

  • After clicking Create, CloudFront displays a banner with a policy statement. Click Copy policy to copy it to your clipboard.
  • Click the shortcut link provided by CloudFront to navigate directly to your S3 bucket's permissions page.
  • In the S3 console, you should now be on the Permissions tab of your bucket.
  • Scroll down to the Bucket policy section.
  • Click Edit.
  • Paste the copied policy into the policy editor.
  • Click Save changes.

What does this bucket policy do?

The policy grants the cloudfront.amazonaws.com service principal permission to perform s3:GetObject on your bucket's objects. A condition restricts this to only your specific CloudFront distribution, identified by its ARN.

This means only your distribution can read the files. No other CloudFront distribution or AWS service can access your bucket through this policy.

Don't see the policy banner?

If you missed the policy banner, return to your CloudFront distribution's Origins tab, select the origin, and click Edit again. The banner with the copy policy button should reappear.

Help me find the CloudFront bucket policy to copy

Verify your live site

With the bucket policy in place, CloudFront now has permission to read your website files from S3. Time to confirm everything works.

  • Return to your CloudFront distribution and click Save changes on the origin edit page (if you haven't already).
  • Wait for the distribution status to finish deploying. The Last modified field changes from a deploying status to a date and time when complete.
  • Open a new browser tab.
  • Paste your CloudFront distribution domain name (the one you recorded earlier, e.g., d111111abcdef8.cloudfront.net) into the address bar and press Enter.

You should now see your website served through CloudFront's global CDN. The same site you previewed locally is now being delivered from edge locations around the world.

What are edge locations?

CloudFront has 750+ edge locations globally. When a user visits your site, CloudFront serves the content from the edge location closest to them. This reduces latency because the data travels a shorter physical distance.

The first request to any edge location fetches from your S3 bucket (the origin). After that, the content is cached at the edge for 24 hours by default, making subsequent requests even faster.

Still seeing an access error?

Make sure you saved changes on both the CloudFront origin edit page and the S3 bucket policy page. Both saves are required.

If you just saved, wait a few minutes. CloudFront distributions take time to deploy changes across all edge locations. Refresh the page after 2-3 minutes.

Help me troubleshoot my CloudFront access error

Your website is live and secured. CloudFront is serving your content from edge locations worldwide, and your S3 bucket is locked down so only CloudFront can read from it. Next up, you'll take on the Secret Mission and compare this approach to S3 static website hosting.

Secret mission

Compare S3 Static Hosting vs CloudFront

You've seen how CloudFront delivers your site globally. But what if you skipped CloudFront entirely and served your website directly from S3? In this secret mission, you'll enable S3 static website hosting, make your bucket public, and compare the two approaches side by side. The differences in security, protocol, and performance tell you everything about why CDNs exist.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs within the CloudFront always-free tier (1 TB data transfer out and 10 million requests per month), so there are no ongoing costs for a small learning site.

Resources you used:

  • 1 CloudFront distribution (serving your website from edge locations).
  • 1 S3 bucket (nextwork-cloudfront-yourname123) containing your website files.

Keep everything running

No action needed. Choose this if you're still actively building or want to show your site to others.

  • Your CloudFront distribution continues serving your site via HTTPS at no cost within free-tier limits.
  • Your S3 bucket stores 3 tiny files at negligible cost (fractions of a cent per month).
  • If you completed the Secret Mission, your bucket is publicly accessible via S3 static website hosting. Consider re-enabling Block Public Access in the S3 bucket's Permissions tab if you want to lock that down.

Pause - I'll come back to this later

Disable the CloudFront distribution to stop it from serving traffic. Your bucket and files stay in place for when you return.

  • Open the CloudFront console at https://console.aws.amazon.com/cloudfront/v4/home.
  • Select the checkbox next to your distribution.
  • Click Disable, then confirm by choosing Yes, Disable.
  • Your distribution stops serving content but remains in your account. You can re-enable it anytime.
  • If you completed the Secret Mission, re-enable Block all public access on your S3 bucket's Permissions tab to secure it while paused.

Delete - I don't want to use this again

Remove all project resources completely. Delete the CloudFront distribution first, then the S3 bucket.

Delete CloudFront before S3

Always delete the CloudFront distribution before deleting the S3 bucket. A distribution pointing to a non-existent origin causes errors in your AWS account.

Delete the CloudFront distribution:

  • Open the CloudFront console at https://console.aws.amazon.com/cloudfront/v4/home.
  • Select the checkbox next to your distribution.
  • Click Disable, then confirm by choosing Yes, Disable. The Status column changes to Disabled.
  • Wait until the Last modified column updates from "Deploying" to a timestamp. This may take a few minutes.
  • Select the checkbox again and click Delete, then confirm by choosing Delete.

Empty and delete the S3 bucket:

  • Open the S3 console at https://console.aws.amazon.com/s3/.
  • Select the radio button next to nextwork-cloudfront-yourname123 and choose Empty.
  • Type permanently delete in the confirmation field and choose Empty.
  • Return to the bucket list. Select the radio button next to your bucket again and choose Delete.
  • Type the bucket name to confirm, then choose Delete bucket.

That's a Wrap!

That's a Wrap!

You just deployed a website to the world's edge. You now have a live site served through Amazon CloudFront's global CDN, secured with Origin Access Control so only CloudFront can read from your S3 bucket.

You've learned how to:

  • Created an S3 bucket and uploaded static website files to serve as your CloudFront origin.
  • Set up a CloudFront distribution with Origin Access Control (OAC) to deliver your site globally while keeping your bucket private.
  • Verified your live site is accessible via a CloudFront domain name served over HTTPS from edge locations around the world.
  • Secret Mission: Compared S3 static hosting vs CloudFront delivery across performance, security, and URLs.

Ready to quiz yourself?