Cloud Resume Challenge

Overview

What is CloudFront?
Configuring and Deploying CloudFront

Objective

By the end of this blog, you will have a nice-looking CloudFront URL where you can see your Static content. We will Understand more about CloudFront and why we are implementing it.

Pre-requisites

Part 1: The Cloud Resume Challenge — AWS

Just follow the above blog to deploy the static content on the S3 bucket.

What is CloudFront

Amazon CloudFront is a content delivery network (CDN) service provided by Amazon Web Services (AWS). It enables efficient and secure distribution of static and dynamic web content, including images, videos, scripts, and APIs, to users globally. By using a network of strategically located edge locations, CloudFront reduces latency and accelerates the delivery of content, resulting in an improved user experience.

Key Features:

Global Reach: CloudFront operates from a vast network of edge locations strategically positioned around the world, ensuring low-latency content delivery to users wherever they are.
High Performance: Leveraging advanced caching techniques, CloudFront accelerates the delivery of content by caching it at edge locations. This minimizes the load on origin servers and reduces latency for end-users.
Security: CloudFront provides robust security features, including SSL/TLS encryption, access control, and integration with AWS Web Application Firewall (WAF). This helps protect your content and applications from various online threats.
Scalability: CloudFront seamlessly scales to handle varying levels of traffic, making it suitable for websites and applications of any size. It integrates with other AWS services, such as S3, Elastic Load Balancing (ELB), and Lambda, for a flexible and scalable architecture.
Cost-Effective: With a pay-as-you-go pricing model, CloudFront allows you to pay only for the data transfer and requests you use. It offers cost-effective solutions for both small websites and large-scale applications.

Integration with S3:

One of the powerful use cases for CloudFront is its integration with Amazon S3. By configuring CloudFront to use S3 as its origin, you can achieve a highly scalable and cost-effective solution for serving static content. This blog will guide you through setting up this integration, optimizing performance, and implementing best practices to make the most out of CloudFront and S3 together.

Configuring and Deploying CloudFront

Step 1: Add the following code to your template.yaml file

MyDistribution:
  Type: AWS::CloudFront::Distribution
  Properties:
    DistributionConfig:
      DefaultCacheBehavior:
        ViewerProtocolPolicy: allow-all
        TargetOriginId: your static bucket URL
        DefaultTTL: 0
        MinTTL: 0
        MaxTTL: 0
        ForwardedValues:
          QueryString: false
      Origins:
        - DomainName: your static bucket URL
          Id: your static bucket URL
          CustomOriginConfig:
            OriginProtocolPolicy: http-only
      Enabled: "true"
      DefaultRootObject: index.html

DistributionConfig: Configuration for the CloudFront distribution

DefaultCacheBehavior: Configuration for the default cache behavior.

ViewerProtocolPolicy: allow-all: Allows viewers to access content using both HTTP and HTTPS.

TargetOriginId: The ID of the target origin. In this case, it points to an S3 bucket hosting a website in the US East (N. Virginia) region.

DefaultTTL, MinTTL, MaxTTL: Time-to-live (TTL) settings for caching. All set to 0 means no caching.

ForwardedValues: Configuration for forwarding values to the origin.

QueryString: false: Does not forward query strings to the origin.

Origins: Configuration for the origins (the source of your content).

DomainName: The domain name of the S3 bucket serving as the origin.

Id: A unique ID for the origin.

CustomOriginConfig: Configuration for a custom (non-S3) origin.

OriginProtocolPolicy: http-only: Specifies that the origin can be accessed using only HTTP.

Enabled: "true": Specifies whether the distribution is enabled. In this case, it's set to true.

DefaultRootObject: index.html: The default root object (the object that CloudFront returns when requests are made to the root URL).

In summary:

This code creates a CloudFront distribution that:
Fetches content from your S3 bucket.
Allows both HTTP and HTTPS access.
Disables caching at edge locations.
Enforces HTTP-only communication with the origin.
Serves “index.html” as the default file when a directory is requested.
Prevents query strings from being forwarded to the origin.

Step 2: Deploy and review the changes in CloudFront

Using the sam command build and deploy the recent changes, after successful deployment check the CloudFront and It should have CloudFront Distribution created.
Review the Configuration and try the new Distribution Domain Name. It starts with some random number and ends with cloudfront.net
You should see the static content of your website using the CloudFront domain name. (Add comments in case you are facing any issues.)

Step 3: Make simple changes in the code and see the behavior

Try to make simple changes in your code and sync the code with the s3 bucket using CLI.
Check the S3 static bucket URL and It should show the latest updated content
Go to CloudFront URL and It should also show the latest updated content.
It is happening because we have set the TTL to 0, which means caching is disabled, that’s why it is fetching the latest content from S3.
While disabling caching can maintain content freshness, it’s important to weigh the trade-offs with potential performance impacts. Consider re-enabling caching if content updates are infrequent and performance is a priority.

So that should be everything for this Part 2 of the Cloud resume challenge, We have configured CloudFront. However, We have now a unique ID in the URL which is not exactly what we want.

In the next part will configure CloudFront with Route 53 where we will map the Domain name to replace that unique ID.

If this post was helpful, please follow and like the article

DevOps - Agile on steroids.