Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

Exploring AWS Cloudfront

Posted in AWS Tutorial
Updated on Dec 31, 2023
By Mari Selvan
👁️ 49 - Views
⏳ 4 mins
💬 1 Comment
Exploring AWS Cloudfront

Photo Credit to CodeToFun

🙋 Introduction

Amazon CloudFront, a content delivery network (CDN) service provided by AWS, can significantly enhance the performance, scalability, and global reach of your web application.

In this tutorial, we'll explore how to integrate AWS CloudFront with an existing Application Load Balancer (ALB) that is already serving your domain via a hosted zone.

📚 Prerequisites

Before you proceed, ensure you have the following:

  • An AWS account with access to CloudFront and an ALB.
  • An ALB configured and serving your domain through a Route 53 hosted zone.

🎨 Create an AWS CloudFront Distribution

Follow the steps below to create a CloudFront Distribution.

  1. Open the AWS Management Console and navigate to the CloudFront service.

  2. Click on the Create a Cloudfront Distribution button.

    Create a Cloudfront Distribution

    Photo Credit to CodeToFun

  3. In cloudfront Origin Configuration, choose your application load balancer as the origin domain and Match Viewer as the protocol.

    Cloudfront origin domain and match viewer

    Photo Credit to CodeToFun

  4. Choose TLSv1.2 as Minimum origin SSL protocol.

    Cloudfront Minimum origin SSL protocol

    Photo Credit to CodeToFun

  5. In the Default Cache Behavior section, select your preferred options for Viewer Protocol Policy and Allowed HTTP Methods.

    Cloudfront default cache behavior

    Photo Credit to CodeToFun

  6. In the Cache Key and Origin Request section, choose the recommended setting and select a cache policy of your choice, as shown in the image below.

    Cloudfront Cache Key and Origin Requests

    Photo Credit to CodeToFun

  7. In the Web Application Firewall (WAF) section, choose Enable security protections.

    Cloudfront Web Application firewall

    Photo Credit to CodeToFun

  8. In the Settings section, choose Use all edge locations, provide the Alternate domain name (CNAME), and select Custom SSL certificate and cache policy of your choice, as shown in the image below.

    Cloudfront settings

    Photo Credit to CodeToFun

  9. Keep all suggested settings unchanged, and then press the Create Distribution button.

    Cloudfront supported http versions

    Photo Credit to CodeToFun

  10. Congratulations! We have created the Cloudfront distribution successfully.

    Cloudfront Created Successfully

    Photo Credit to CodeToFun

🖥️ Monitor and Configure CloudFront

  1. Return to the CloudFront console.
  2. Explore the monitoring and logging options available for your distribution.
  3. Adjust cache settings, behaviors, and other configurations based on your application's requirements.

🔄 Update DNS Records in Route 53

If your domain is currently pointed directly to the ALB, you might need to update the DNS records to point to the CloudFront distribution:

  1. Navigate to the Route 53 service.
  2. Select the hosted zone for your domain.
  3. Update the A or CNAME records to point to the CloudFront distribution domain name.

    CloudFront updating hosted zone A record type

    Photo Credit to CodeToFun

🔄 Invalidate Cache (Optional)

If you make changes to your application and want to clear the CloudFront cache:

  1. Open the CloudFront console.
  2. Find and select your distribution.
  3. Go to the "Invalidations" tab.
  4. Click on Create Invalidation and specify the path or paths to invalidate.

    Create Invalidation

    Photo Credit to CodeToFun

🎉 Conclusion

Congratulations! You've successfully explored AWS CloudFront and integrated it with your existing Application Load Balancer.

CloudFront adds a layer of optimization, ensuring your web application is delivered with low latency and high availability to users around the world.

Remember to consider best practices for security, pricing, and content management when using CloudFront in a production environment.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mari Selvan
Mari Selvan
3 months ago

If you have any doubts regarding this article (Exploring AWS Cloudfront), please comment here. I will help you immediately.

We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy