Guided Lab: Getting Started with Amazon CloudFront

Tutorials-Dojo

Description

Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency and high transfer speeds. By caching content at edge locations worldwide, CloudFront allows users to access content more quickly, especially if it is far from the origin server. Common use cases include accelerating websites, streaming videos, and securely delivering software, applications, and APIs to end users.

In this lab, we’ll walk through setting up an Amazon CloudFront distribution to deliver content from an S3 bucket. This setup helps reduce the load on your origin server and improve user experience by caching and delivering content from the closest edge location.

Prerequisites

This lab assumes you have the following:

Basic knowledge and understanding of Amazon S3 Bucket and Amazon CloudFront

If you find any gaps in your knowledge, consider taking the following lab:

Objectives

By the end of this lab, you will:

Learn how to configure a public CloudFront distribution linked to an S3 bucket.
Set S3 bucket permissions to allow public access to objects.
Test and verify the public access to the CloudFront distribution.

Subscribe to access AWS PlayCloud Labs

Lab Steps

Create an S3 Bucket (Origin for CloudFront)

1. Navigate to the S3 Console in the AWS Management Console.

2. Create a new bucket:

Name your bucket uniquely (e.g., my-cloudfront-origin-bucket-<add-any-number-to-make-it-unique> )
Uncheck “Block all public access” (for now, as we’re setting it up as a public website).
- Then, check the “I acknowledge that the current settings might result in this bucket and the objects within becoming public.”

Note: Setting public permissions on the bucket will allow anyone on the internet to access its content. This configuration is suitable for serving public content only.

Click Create Bucket.

3. Upload content:

Copy the following HTML code and save it as index.html on your computer:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Discover the Philippines</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f0f8ff;
            color: #333;
        }
        h1 {
            color: #0073bb;
        }
        p {
            line-height: 1.6;
        }
        .highlight {
            color: #e67e22;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Welcome to the Philippines</h1>
    <p>The Philippines is an archipelago comprising more than 7,000 islands, known for its rich biodiversity, vibrant culture, and stunning landscapes.</p>
    <p><span class="highlight">Manila</span> is the capital city, while <span class="highlight">Cebu</span> and <span class="highlight">Davao</span> are major urban centers.</p>
    <p>The country offers a wide range of tourist attractions, from pristine beaches to historical landmarks.</p>
</body>
</html>

Upload this index.html file to the S3 bucket.

4. Set Bucket Permissions:

Go to Permissions > Bucket Policy and add the following policy, but don’t forget to change the placeholder:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::<bucket-name>/*"
    }
  ]
}

Create a CloudFront Distribution with Public Access

1. Go to the CloudFront Console in the AWS Management Console.

2. Click on Create a CloudFront distribution.

3. Follow the configurations below:

For the Origin:
- Origin Domain: Select the S3 bucket you created (my-cloudfront-origin-bucket-<add-any-number-to-make-it-unique> ).
- Name: This will be automatically named, but you can edit the name as you desire.

Origin Domain: This is the domain name of the origin server from which CloudFront will pull content. It could be an S3 bucket (my-cloudfront-origin-bucket-3000.s3.us-east-1.amazonaws.com), HTTP server, or any valid DNS domain. This example uses an S3 bucket.

- Origin access: Select Public.

Origin Access:

Public: Allows public access to the bucket directly but is not recommended for secure applications.

Origin Access Control (OAC) (recommended): Restricts direct access to the S3 bucket, allowing only CloudFront to access it. This enhances security.

Legacy Access Identity (OAI): An older method to control access to the bucket, which may be less secure than OAC.

For the Default cache behavior:
- In the Viewer protocol policy, select Redirect HTTP to HTTPS.

- For Cache key and origin requests, select Legacy cache settings.

Default Cache Behavior

Path Pattern: Specifies the URL path pattern for this cache behavior. The default path * applies this behavior to all requests.
Compress Objects Automatically:
- Yes: Automatically compresses files for faster delivery, which is beneficial for text-based files like HTML, CSS, and JavaScript.
Viewer Protocol Policy:
- Redirect HTTP to HTTPS (recommended): Redirect all HTTP requests to HTTPS for secure communication.
- HTTPS Only: Forces HTTPS-only communication, rejecting HTTP requests entirely.
Allowed HTTP Methods:
- GET, HEAD (recommended for basic content delivery): Allows only safe, read-only requests.
- GET, HEAD, OPTIONS: Adds support for preflight requests (useful for APIs).
- PUT, POST, PATCH, DELETE: Allows additional methods suitable for dynamic or interactive applications.
Restrict Viewer Access:
- Yes: It requires signed URLs or cookies, which are essential for serving private content.
- No (default): No restrictions on viewer access, suitable for publicly accessible content.
Cache Policy: Controls how CloudFront caches content. Choose an existing cache policy or create a new one to customize caching behavior based on headers, cookies, and query strings.
Origin Request Policy: Controls the headers, cookies, and query strings that CloudFront includes in requests to the origin. Selecting an appropriate policy can help ensure only necessary data is sent to the origin.

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

Web Application Firewall (WAF): AWS WAF can protect your CloudFront distribution from common web security vulnerabilities. Enable WAF to secure your content from threats like SQL injection and cross-site scripting (XSS).

Leave the rest as default.
Click Create Distribution.

Test the CloudFront Distribution

1. Wait for the status to change from In Progress to Deployed.

2. Copy the CloudFront Distribution Domain Name:

Go to the General tab in CloudFront Console and locate the Domain Name (e.g., d1234abcde.cloudfront.net).

3.Access Your Content via CloudFront:

Open a new browser tab and navigate to https://<CloudFrontDomainName>/index.html.
Replace <CloudFrontDomainName> with your actual CloudFront domain name.
Verify that the HTML content about the Philippines loads correctly, showcasing the cached file from the CloudFront edge location.

Congratulations! You have successfully set up a CloudFront distribution linked to an S3 bucket and tested it with an HTML page. This setup enables faster, more secure content delivery by caching files at edge locations, reducing load on your origin server.

Key Takeaways:

Amazon CloudFront enables low-latency content delivery by caching it closer to users.
Using an S3 bucket as the origin for CloudFront is a practical way to serve static content, such as HTML pages, images, and scripts.
CloudFront distributions improve performance and enhance user experience by reducing latency for global users.
Setting up a CloudFront distribution with public access simplifies deployment but is suitable only for content meant to be publicly accessible.
This configuration allows CloudFront to deliver content without additional access restrictions.
Always review bucket permissions carefully to ensure only intended content is publicly accessible.

As a best practice, remember to delete any resources no longer in use, such as the S3 Bucket and CloudFront Distributions, to maintain a clutter-free AWS environment.

Thank you for joining this lab, and happy learning!