How to Create Cloudfront Distribution in AWS for S3 Bucket ? - Coding

CloudFront is a content delivery network (CDN) service provided by AWS that delivers data, videos, applications, and APIs to viewers with low latency and high transfer speeds. In this article, we will explore how to create a CloudFront distribution in AWS to serve content stored in an S3 bucket.

Key Terminologies

CloudFront: Imagine you have a website with lots of images, videos, and other content. CloudFront is like a super-fast delivery service for this content. It has many locations around the world called “edge locations.” When someone visits your website, CloudFront sends the content from the edge location closest to them, making your website load faster for them.
Distribution: A CloudFront “distribution” is like a set of instructions that tells CloudFront where your content is stored and how to deliver it to users. It specifies things like which origin server (like an S3 bucket or a web server) to get the content from and how long to cache it for.
S3 Bucket: Think of an S3 bucket as a big digital storage container provided by AWS. You can put all kinds of stuff in it, like files, images, videos, and data. It’s like a virtual hard drive in the cloud where you can store your website’s content. When you set up a CloudFront distribution, you can tell CloudFront to get your website’s content from an S3 bucket.

Approach to create CloudFront distribution in AWS for S3 bucket

Step 1: Create an S3 Bucket, If you haven’t already, create an S3 bucket to store the content you want to distribute via CloudFront.

for this, you should have an AWS account.

S3 bucket creation

Step 2: Give a name to the bucket and unmark block all public access, other fields can be as it is, and then click Create bucket. make sure your bucket name should be globally unique.

public aceses

When Bucket created, it will listed down with others buckets.

Create bucket

Step 3: Now, we have to upload some content in bucket, we can either upload objects or files directly, or we can create folder to separate files and objects. For example, we want to upload html file named as index.html. we click add files then we can drag and drop or select from device.

HTML

<!DOCTYPE html>
<html lang="en">
    <style>
        .container{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
    </style>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>AWS Page</title>
    </head>
    <body>
        <main class="container">
            <div>
                <h1>Hello, Geeksforgeeks</h1></div>
            <div>
                <p>I am learning AWS</p></div>
        </main>
    </body>
</html>

As soon as we done with file upload file, the status turn into succeeded. after that, we navigate to uploaded files just by clicking index.html

files

Here we can see other properties of uploaded files, as S3 URL, AWS region, ARN, object URL and so on.

Bucket properties

Every bucket has a policy, so we have to make sure to create that one, for this we have to go in bucket permissions, below, in a section, we can see bucket policy, initially, there will be nothing, so we have to create that, so click edit button and follow below procedure.

As we have to select a statement, from all services, we will choose S3, and from there, we will choose actions as ‘GetObject’.

Bucker policlies

The bucket policy will look like this, as my bucket name is prahlad3, your bucket name will anything followed by “/*” to select all files under bucket, if you want host any specific file, just write name after “/”., for Principal, set “*”.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Statement1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::prahlad3/*"    
        }
    ]
}

Step 4: As we are hosting HTML page, so we have to Enable Static Website Hosting.

Static Web Hosting

In object general property, we have Object URL, when we open it, it will show our hosted page.

Object url Output:

Acessing the object from S3 Step 5: Now the time to create CloudFront Distribution for s3 bucket.

we open CloudFront console and click on “Create Distribution.”

Create Distribution

we choose delivery method as web and configure the origin settings by selecting the S3 bucket as the origin domain name.

Origin domain

we can configure other distribution settings, such as cache behavior, distribution settings, and security settings. when we review and confirm the distribution settings, then we click “Create Distribution.”

Cloud front get created

Wait for Distribution Deployment, It may take some time for the CloudFront distribution to be deployed and fully functional.

Step 6: When the deployment is done, we simply copy distribution domain name, and replace with Object URL in s3 bucket.

Cloudfront url

We can see the URL from CloudFront, so in this way, we can set cloudfront distribution in AWS for S3 bucket.

Acessing HTML From Cloudfront

Benefit

Suppose you have a static website hosted in an S3 bucket named “example.com.” By creating a CloudFront distribution for this S3 bucket, you can improve the website’s performance and reliability by serving content from edge locations closer to your users.

Conclusion

In simple terms, using Amazon CloudFront with an S3 bucket has some great perks. It makes your website faster by storing copies of your content closer to your users all around the world. This means people can access your website quicker, no matter where they are. Plus, CloudFront keeps your data safe while it travels across the internet with encryption and access controls. It’s easy to set up and manage, works well with other Amazon services, and is cost-effective. Overall, CloudFront helps make your website faster, safer, and more reliable for your users.

Cloudfront Distribution in AWS for S3 Bucket – FAQs

Can I use CloudFront with dynamic content stored in an S3 bucket?

Yes, CloudFront can serve both static and dynamic content stored in S3 buckets. You can configure CloudFront to cache dynamic content with a TTL (time to live) that suits your application’s requirements.

How does CloudFront improve website performance?

CloudFront caches content at edge locations worldwide, reducing latency and improving load times for users accessing the content from different geographic locations.

Can I use a custom domain with my CloudFront distribution?

Yes, you can configure CloudFront to use a custom domain (e.g., www.example.com) instead of the default CloudFront domain.

Is there a cost associated with using CloudFront?

Yes, CloudFront charges for data transfer out, requests, and optional features such as HTTPS, field-level encryption, and Lambda@Edge functions.

Reffered: https://www.geeksforgeeks.org

Amazon Web Services

Related
AWS Athena vs Google BigQuery: A Comparison of Data Analysis Services
10 Best Cloud Services in India (Free & Paid) in 2024
What is AWS Incident Manager?
How to install Ansible in AWS EC2 Server ?
How to use AWS CLI in GitHub Actions ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	18