Efficient Website Deployment with CloudFront: S3 Bucket Hosting & CDN Integration
CloudFront, a robust content delivery network (CDN) offered by Amazon Web Services (AWS), plays a pivotal role in optimizing website performance by reducing latency and efficiently delivering content to users across the globe. In this comprehensive project, we delve into understanding CloudFront's functionality and deploying a static website hosted on an S3 bucket through CloudFront, exploring its functionalities and advantages along the way.
Table of Contents:
Understanding CDN and CloudFront
CloudFront Mechanics: How it Works
Benefits of AWS CloudFront
Setting Up CloudFront on AWS
Creating an S3 Bucket for Hosting
Enabling Static Website Hosting
Creating a CloudFront Distribution
CloudFront is a content delivery network (CDN) service provided by Amazon Web Services (AWS). We can set up the cloud front ahead of the S3 bucket or EC2 instance or any load balancer that will help us prevent the request directly to the origin server.
To understand the cloud front better we first should know what is CDN.
Imagine you have a website with lots of cool content, like images, videos, and documents. When a user visits your site from a different location far away from your server, the content might take a long time to load. That's where CDN comes to the rescue!
A CDN is like a network of servers spread across various locations worldwide. These servers store a copy of your website's content. When a user requests your website, the content is delivered from the server closest to the user, making it super fast! It's like having a local store for your website content everywhere in the world.
How Does CloudFront Work?
Let's understand how CloudFront works with a simple example:
Imagine you have a website with images stored on an Amazon S3 bucket (a cloud storage service). When a user requests an image, the request goes to CloudFront first.
Here's how the process flows:
Step 1: CloudFront checks if it already has the requested image in its cache (storage). If it does, great! It sends the image directly to the user. If not, it proceeds to Step 2.
Step 2: CloudFront fetches the image from the S3 bucket and stores a copy in its cache for future requests. Then, it sends the image to the user.
The next time someone requests the same image, CloudFront will deliver it from its cache, making it super fast and efficient!
Benefits of CloudFront
Fast Content Delivery: CloudFront ensures your content reaches users with minimal delay, making your website lightning fast.
Global Reach: With servers in various locations worldwide, CloudFront brings your content closer to users, regardless of where they are.
Security: CloudFront provides security features like DDoS protection and SSL/TLS encryption to keep your content and users safe.
Scalability: CloudFront can handle traffic spikes effortlessly, ensuring a smooth experience for your users.
Cost-Effective: Pay only for the data transfer and requests made, making it cost-effective for businesses of all sizes.
Setting Up CloudFront on AWS
Firstly, we'll create an S3 bucket named "nahid-example.com". After that, we've enabled the bucket versioning option. We've kept all the other settings as default. Finally, we hit the create bucket button and our bucket has been successfully created.
Now, we'll host a simple static website on our S3 bucket. To do that, we need to upload all the files related to our static website into the S3 bucket. So far, we've uploaded a simple index.html file.
To host our static website on the S3 bucket, we first need to enable the "Static Website Hosting" option. To do this, we'll navigate to the Properties tab, locate the "Static Website Hosting" option, and edit it to "Enable". Then, we'll save the settings. Once done, our static website hosting will be enabled, and an S3 object URL will automatically be created.
Now, we'll copy the S3 object URL and paste it into the browser's search bar to see if our application can be accessed.
However, I know that it won't be accessible because we intentionally blocked public access when creating the S3 bucket. Therefore, an "Access Denied" error will appear.
Create a CloudFront Distribution
Now will will access it using the Cloud Front where we will Set our S3 Object as the origin and create the Distribution where we have configured the OAI ( Origin Access Identity ) and will update the Bucket Policy to let access the object for the Cloud Front.
Go to the AWS Management Console and navigate to CloudFront. Then Click "Create Distribution."
Currently, we need to select our origin domain, which we created in the S3 bucket. Then, in the "origin access option," we'll choose "legacy access identities."
For the origin access identity, if it's not created yet, we'll have to create one. If we don't have an existing OAI, we'll select the "create new OAI" option. Additionally, it's crucial to select "Yes, update the bucket policy" in the bucket policy option.
In the Web Application Firewall section, we've chosen "Do not enable security protections" because this setup is for learning/demo purposes. Enabling this option might incur charges to our AWS account.
Finally, we've set the default root object as index.html so that when users send their first request, they'll see the homepage. However, if preferred, users can set any other page as their default. We'll leave the rest of the settings to their default values. Clicking the "Create Distribution" button will create our distribution.
Look, the state is in the 'deploying' phase, which means it will take some time as CloudFront configures all the settings. Therefore, we need to wait for a while. Once the state changes to 'deployed', we'll be able to access our application.
Now that the state is 'deployed', we can access our application by copying the distribution domain name and pasting it into the browser. We can access the application without distributing the S3 bucket object URL in any way.
Great news! We've successfully accessed our static application hosted on the S3 bucket.
In this project, we explored the nuances of Amazon CloudFront, an integral component in modern web deployment strategies. Through a step-by-step approach, we learned about its capabilities in optimizing content delivery, enhancing user experience, and bolstering security measures. By setting up a static website on an S3 bucket and leveraging CloudFront, we witnessed how it efficiently handles content distribution while significantly reducing latency. With CloudFront's global reach, scalability, and security features, we've achieved a high-performing and secure web application accessible worldwide.
Thank you for reading this blog. If you found this blog helpful, please like, share, and follow me for more blog posts like this in the future.
— Happy Learning !!!