Website Delivery with CloudFront

Learn why Content Delivery Networks (CDNs) exist with Amazon CloudFront!

Introduction

⚡️ 30 second Summary

Welcome to the Deploy a Website with CloudFront! 🚀

In today's digital world, fast and reliable websites are 👏 crucial 👏

Slow loading times can make your users frustrated and can even turn into lost business.

That's why Content Delivery Networks (CDNs), like Amazon CloudFront, are a business' secret weapon for delivering content quickly and efficiently around the world.

This project is highly relevant for roles like Cloud Network Engineer, Frontend Engineer, or DevOps Engineer - where it is a key responsibility to optimize website performance and ensure scalable, efficient content delivery.

In this project, get ready to...

🪣 Create a storage space in S3 for your website's files.
🌐 Set up CloudFront to distribute your website globally.
🔑 Manage permissions for both S3 and CloudFront.
💎 Compare different methods for hosting your website and analyze their performance.

Three-Tier Architecture

This is also the FIRST project in an awesome three-tier architecture series.

Three-tier architecture splits applications into three essential layers: presentation, logic, and data.

In this project, you're diving into the presentation tier, which is all about how your application interacts with the user - it's the face of your website!

By focusing on the presentation layer first, you're creating a lightning-fast first impression for your users (thanks to CloudFront).

We'll talk more about this architecture in later projects - for now, let's focus on CloudFront. Make sure to follow the rest of this series to build up a fully functional three-tier solution! 🚀

PART TWO (Logic Tier): APIs with Lambda + API Gateway
PART THREE (Data Tier): Fetch Data with AWS Lambda
PART FOUR (putting all three layers together): Build a Three-Tier Web App

Want a complete demo of how to do this project, from start to finish? Check out our 🎬 walkthrough with Natasha 🎬

If you're up for a bit of a challenge, quiz yourself on the key concepts up ahead in this project.

This project is part of a series:

Before we start Step #1...

It's always good to understand exactly what you're here to do.

Set Up an S3 Bucket

Let's start by creating a storage space for our website's files. Amazon S3 (Simple Storage Service) is our go-to service for storing all sorts of data in the cloud. Think of it as a massive, secure, and reliable hard drive in the sky.

In this step, get ready to:

Create a new S3 bucket.

Log into the AWS Management Console

Log in to the AWS Management Console as your IAM Admin user.
Make sure you're in the AWS region closest to you.
Head to the S3 console.

What are S3 buckets?

S3 buckets are like containers in the cloud where you can store your files, just like folders on your computer.

These buckets hold "objects," which are simply your files. We're creating an S3 bucket so it can hold the files that make up our website.

💡 Why are we using S3 in this project?

While the star AWS service in this project is CloudFront, CloudFront is not a storage solution. CloudFront is a content delivery network that simply hosts content that is stored somewhere else, like Amazon S3.

Create an S3 Bucket

Select Create bucket.
Enter a unique Bucket name, like nextwork-three-tier-maya123:
- Enter here so that you can copy it throughout the project:

nextwork-three-tier-[[UNIQUENAME="enter your name-random characters"]]

Replace with your name and a random string of characters.
Leave all other settings as default.
Select Create bucket.
Click into your created bucket.

Nice work! Step 1 down, you've just created the bucket that will hold your website files.

Upload Website Files

Now that we have our storage bucket set up, let's fill it with the actual content of our website. Website files include HTML files, CSS stylesheets, JavaScript code, and any other assets like images or videos.

In this step, get ready to:

Upload your website files to the S3 bucket.

Download the following website files (right click on each link, and select Save link as...):

What is index.html?

index.html is the main file for a website. It's where you organise the text, pictures, and everything that makes up your webpage.

💡 What is style.css?

style.css is where you write down the visual appearance of your website's HTML elements. It controls everything from font sizes and colors to layout designs, helping you keep a consistent style across your website.

💡 What is script.js?

script.js refers to a JavaScript file that adds interaction to your website. It's where you would write the instructions for making things on your website move or change when you click a button or submit a form.

Verify what you've downloaded by heading to the Downloads folder in your local computer.
Open index.html in your browser.

How can I open index.html in my browser?

Right click on index.html.
Select Open With > select your preferred browser.

Do you see a simple web page?

Am I setting up a static website?

Yup! A static website consists of a set of HTML, CSS, and JavaScript files that serve website content.

Whether a site is a static website or a web app depends on where the code is run:

Static websites don't need to communicate with any backend cloud resources, like databases, so code or logic is run on the client side i.e. the browser.
Web apps, on the other hand, execute code on the server side. For example, apps that use databases, APIs or Lambda functions in the backend.

Upload Your Website Files

Head back to the S3 console.
Select Upload.
Select Add files.
Select the three website files in your Downloads folder.
Select Upload.
Upload success!

Set Up a CloudFront Distribution

Now that our website files are uploaded, it's time to introduce Amazon CloudFront, our secret weapon for delivering it all over the world.

In this step, get ready to:

Set up CloudFront to host your site.

Navigate to CloudFront

Head to the CloudFront console.

What is Amazon CloudFront?

Amazon CloudFront is a Content Delivery Network (CDN), which means it speeds up the distribution of your static and dynamic web content, such as .html, .css, .js, and image files.

💡 How does CloudFront speed up distributions?

By using caching!

Caching is the process of storing copies of files in a cache, i.e. a temporary storage location, so that they can be accessed more quickly.

CloudFront caches your website content in multiple servers around the world. When a user requests content that you're serving with CloudFront, the request is routed to the edge location that provides the lowest latency (time delay), so content is delivered with the best possible performance.

Create a CloudFront Distribution

Select Create a CloudFront distribution.

What is a CloudFront distribution?

A CloudFront distribution is a set of instructions that tells CloudFront how to deliver your content.

It specifies where your website's files are stored (called the origin), how they should be cached, and other delivery settings like security standards.

In the Distribution options panel, enter a name to match your S3 bucket in the Distribution name.
Now for the Distribution type, select the Single website or app option.
Select Next.

In the Origin panel, select the Browse S3 button.

Select your bucket name and click Choose.

Keep the default in the Settings panel and select Next at the bottom.

What are CloudFront Settings?

CloudFront settings help you control how your files are delivered from your storage (like S3) to users around the world. These settings include how CloudFront connects to your storage, who can access your files, and how quickly updates show up for users.

Most beginners use the recommended settings, which balance speed, security, and simplicity.

💡What does “Allow private S3 bucket access to CloudFront” mean?

If your S3 bucket is private, CloudFront can be given special permission to fetch files for you. This keeps your files locked up from the public but lets CloudFront deliver them quickly to your users.

It’s like giving CloudFront a private key to your storage room, so only it can get in and share your stuff.

For Web Application Firewall (WAF), select Do not enable security protections.

What is Web Application Firewall (WAF)?

AWS WAF is a web application firewall. A WAF protects your website from common threats. For example, a WAF could block traffic from IP addresses that are known for malicious behaviour.

Let's review the configuration. Select Create distribution if everything looks good!

Select Next.

Phew! You've just set up a CloudFront distribution from scratch - nice work.

Verify your CloudFront Distribution

Now that our CloudFront distribution is created, let's see if it's working!

In this step, get ready to:

View your CloudFront distributed site.

Verify Your CloudFront Distribution

Copy the distribution domain name. This is the URL that CloudFront will use to serve your website.

Paste the domain name into your web browser.
Whoops! You'll see a Site can't be reached error.

Why is there an error?

Don't worry, this is expected! We haven't given CloudFront permission to access our S3 bucket yet.

By default, S3 buckets are private. CloudFront needs explicit permission to access the files in your bucket.

Great, at least we've visited our CloudFront distribution for the first time 😎

We'll fix this error in the next step, by updating our CloudFront distributions's settings.

Update your CloudFront settings

Let's grant CloudFront the necessary permissions to access our S3 bucket. We'll update our S3 bucket settings too after this!

In this step, get ready to:

Update your CloudFront origin's settings.

Update your CloudFront settings

Head back to your CloudFront console.
Select Origins in your distribution's menu bar.

In the Origins panel, select your origin titled nextwork-three-tier S3 bucket.

Select Edit.
Find the Origin access setting, which should have Public selected.

Can you tell what the Origin access setting means for your bucket?

What does it mean for Origin access to be public?

If Origin access is public, it means anyone can access the content directly from the origin i.e. your S3 bucket, not just via CloudFront. This can become a security risk if sensitive data is accessible.

💡 Since origin access is public, why is access still denied in my distribution?

Setting the origin access to public doesn't automatically update the permissions of the objects in your S3 bucket - for security, the objects are private by default. You'll still need to go to your S3 bucket and set all your objects to public for everyone to access them.

So, even if origin access is public, CloudFront can't access your website's content until your objects' access settings are also set to public.

Change the setting from Public to Origin access control settings (recommended).

Why are we changing this setting to origin access control?

Normally, if you want to serve files publicly, those files must be publicly accessible on S3. This could potentially expose your S3 content to unwanted access or security threats.

An origin access control (OAC) is a special user for CloudFront that prevents this. An OAC lets you keep your S3 bucket and objects not publicly accessible, while still making sure they can be accessed through CloudFront.

OAC also gives you granular control over how CloudFront accesses the content. For example, you can add other authentication or security settings to make sure only legitimate users can access your content.

Under the new Origin access control heading, select Create new OAC.
Keep the default settings for your OAC.

Extra for Experts: What does the signing behavior setting mean?

Signing behavior deals with whether requests to the origin need to be signed (an authentication method). This is great for private content that requires authenticated access.

Before forwarding a request to the origin i.e. the S3 bucket storing the website files, CloudFront signs the request. This adds a digital signature that the S3 bucket will check for on every incoming request. If the signature is valid, it grants access to the requested object.

Select Create.
A popup appears under the Origin access control you've just created.

What does the popup say?

The popup tells you that just creating an OAC isn't enough to give CloudFront access to your S3 bucket's objects.

You also need to change your S3 bucket settings!

Recap: The OAC's role is that it makes sure only CloudFront can access the files stored in the S3 bucket. For this restricted access to be effective, the S3 bucket's policy still needs to explicitly grant the OAC permission to the bucket's contents.

Sweet! We're almost done. You've just created an Origin Access Control (OAC), and now we'll need to update the settings on your S3 bucket's side.

Update your S3 bucket's settings

In this step, get ready to:

Update your S3 bucket's permission settings.

Still in your CloudFront distribution's settings page, select Copy policy.

Next, select the shortcut under the popup message. It lets you go straight to your S3 bucket's Permissions tab.

Made it!

In your S3 bucket's Permissions page, scroll to the Bucket policy section.
Select Edit.
Paste the policy that you copied into the policy editor.

Select Save changes.
Head back to your CloudFront distribution's settings page.
Select Save changes.
Revisit your distribution's URL.
Refresh your tab.
What do you see now?

Yay! Congrats on distributing your website over CloudFront.

I don't see a distributed site

Oh no! If you're stuck, ask the NextWork community.

Secret mission

Welcome to your 🤫 exclusive 🤫 secret mission!

Your mission, should you choose to accept it, is to compare using CloudFront vs S3 to serve your website.

💎 In this secret mission, get ready to:

Enable S3 static website hosting.
Compare S3 vs CloudFront based on the hosted website's URLs, permission settings and performance.
Showcase more advanced skills, like using developer tools to inspect a live site, in your project documentation. Stand out from the rest!

Showcase Advanced Skills

Secret mission

This is truly for the PROs!

Are you ready for another level up?

Let's build our skills in investigating website performance and compare our two hosted sites along the way.

Note: you will need to complete the first secret mission before starting this one.

Compare S3 vs. CloudFront Performance Times

Delete your resources

Now that we've completed the project, let's clean up our AWS resources to avoid incurring unnecessary charges.

Resources to delete:

The CloudFront distribution.
The S3 bucket.

Note

Make sure to delete the distribution before you delete the S3 bucket.

If you delete the S3 bucket first, your CloudFront distribution will point to a non-existent origin. This could cause some errors with deleting the distribution itself!

🙋‍♀️ Uh oh, I've aready deleted the bucket first

No worries! You can still resolve this by switching your distribution's origin access from OAC back to Public.

Ask the NextWork community if you're stuck!

CloudFront Distribution

In the CloudFront console, select your distribution.
Select Disable.
Wait for the distribution status to change to Disabled.
Select Delete.

The Delete button isn't working.

If the Delete option isn't available, it means CloudFront is still propagating your distribution to edge locations.

Wait a few minutes, until a new timestamp appears under the Last modified column, then try deleting again.

S3 Bucket

In the S3 console, select your bucket.
Select Empty. Confirm the deletion.
Select Delete. Confirm the deletion again.

That's a wrap!

You've learned how to:

🪣 Create and manage S3 buckets.
⬆️ Upload files to S3.
🌐 Set up a CloudFront distribution for lightning-fast content delivery.
🔑 Secure your S3 bucket using Origin Access Identities.
💎 Compare S3 static website hosting with CloudFront.

Ready to quiz yourself? You got this! 💪

Nice one - you've just set up the first tier of a 3-tier architecture!

Ready for the next three parts of the series?

PART TWO (Logic Tier): APIs with Lambda + API Gateway
PART THREE (Data Tier): Fetch Data with AWS Lambda
PART FOUR (putting all three layers together): Build a Three-Tier Web App

p.s. Does it say "Still tasks to complete!" at the bottom of the screen?

This means you still have screenshots left to upload, or questions left to answer!

Press Ctrl+F (Windows) or Command+F (Mac) on your keyboard.
Search for the text Return to later.
Jump straight to your incomplete tasks!
🙋‍♀️ Still stuck? Ask the community!