Tanmay Shukla for AWS Community Builders

Posted on Mar 20, 2023 • Updated on Mar 22, 2023

Setup CloudFront & Amazon S3 to Deliver objects on the Web Apps (securely & efficiently)

#aws #cloud #devops #security

What is S3 ?

AWS S3 (Simple storage service) is an object storage service offering industry-leading scalability, data availability, security, and performance.
Businesses can store and retrieve any amount of data, at any time, from anywhere on the web. S3 is highly durable and designed to provide 99.999999999% durability of objects over a given year, making it a reliable and secure solution for storing critical data.
S3 is widely used in storing and serving object on the internet, whether it is images, videos, or any other unstructured data. But when we use S3 with Cloudfront it provides lot of benefits

What is Cloudfront ?

Cloudfront is the AWS Content delivery network that speeds up distribution of your static and dynamic web content, such as .html, .css, .js, and image files, to your users.
CloudFront delivers your content through a worldwide network of data centers called edge locations.

Here are some applications of CloudFront:

Content Delivery: CloudFront accelerates the delivery of your content by caching your content at edge locations worldwide. This reduces the time it takes for users to access your content and improves the performance of your web applications.
Video Streaming: CloudFront can deliver high-quality video streaming to users worldwide. It can also integrate with AWS Elemental Media Services to provide a complete video streaming solution.
Website Security: CloudFront integrates with AWS Shield to provide protection against DDoS attacks. It also supports SSL/TLS encryption to secure your content in transit.
Global Applications: CloudFront provides a global presence to your application by caching your content at edge locations worldwide. This allows your users to access your content from a location that is geographically closer to them, reducing latency and improving their experience.
API Gateway: CloudFront can be used as a custom origin for API Gateway. This allows you to cache API responses at edge locations, reducing the load on your API backend and improving the performance of your APIs.

Serving S3 objects with CloudFront has several benefits:

1.) Improved performance: CloudFront is a content delivery network (CDN) that caches content at edge locations around the world. By serving S3 objects with CloudFront, you can improve the performance of your application by reducing latency and improving load times for users located far away from the S3 bucket.

2.) Reduced costs: Serving S3 objects with CloudFront can help reduce your data transfer costs by caching frequently accessed content at edge locations. This reduces the number of requests made to the S3 bucket, which can help reduce your data transfer costs.

3.) Improved security: CloudFront can help improve the security of your S3 objects by enabling you to restrict access to your content using a variety of authentication methods, such as signed URLs or AWS Identity and Access Management (IAM) policies.

4.) Customization: CloudFront provides a range of customization options, such as custom SSL certificates, custom error pages, and content compression, which can help you optimize the delivery of your S3 objects to your users.

5.) Scalability: CloudFront is designed to handle high levels of traffic and can automatically scale to accommodate increases in demand. This can help ensure that your application remains highly available and responsive, even during periods of high traffic.

Overall, serving S3 objects with CloudFront is a best practice for many AWS customers who need to distribute their content globally, improve the performance of their applications, and reduce their costs.

Setup the S3 and Cloudfront for serving objects through Web application.

Objective

1.) Sign in to AWS management console.

2.) Create and setup the S3 Bucket (Private) to store objects.

3.) Create the Cloudfront distrubution for your S3 bucket.

4.) Setup the IAM role and permissions for Web application.

5.) Finally, test the application !!!

Steps for Implementation of the project:

1.) Sign in to AWS management console.

First, sign in to the AWS console with your username and password and select the appropriate region like us-east-1.

2.) Create and setup the S3 Bucket (Private) to store objects.

Let's search for S3 and open th S3 console
Create S3 bucket:
- Give a globally unique name and region to your bucket.
- Set the object ownership and keep ACL's disabled.
- Block all public access - It provides an additional layer of security for your data, preventing unauthorized access and ensuring that your data is protected at all times.
- Enable the versioning - With S3 versioning, every time an object is updated or deleted, a new version of the object is created, allowing users to access and restore previous versions of the object.
- Enable the encryption - In Server-side encryption, Amazon S3 encrypts your objects before saving them on disks in AWS data centers and then decrypts the objects when you download them. All Amazon S3 buckets have encryption configured by default and all new objects uploaded to an S3 bucket are automatically encrypted at rest
- Object lock - It helps to prevent accidental deletion or modification of objects. With Object Lock, you can set a retention period for objects in a bucket, during which time the objects cannot be deleted or modified. For now we'll keep this default.
- Finally click on the Create bucket
Now let's upload some objects in S3 bucket for testing or project.

**3.) Create the Cloudfront distrubution for your S3 bucket.**

Search for clodufront in AWS console search bar & open the cloudfront dashboard.
Select the Origin domain of your bucket from drop down & give the name of the cloudfront distribution.
Set the origin access as Origin access control settings.
We also need to create the access control setting for this cloudfrony distro like below:
Enable the Shield as it helps to minimize your origin’s load, improve its availability, and reduce its operating costs.
In Default cache behaviour settings set configurations as below, else keep it default.
Let Function associations - optional be as default for now.
In the final section i.e. settings, choose as per your usecase and requirements like below:
- In this we need to choose the price class and AWS WAF web ACL we want to associate it with.
- If we want to add a custom domain to the clodfront distribution then we can add it here.
- In default root object, the object you specify will return if user requests root URL.
Once the Cloudfront Distribution got created then we need to add the given policy in the respective S3 Bucket policy. So copy the bucket policy from here.
Then go to S3 bucket > Permissions > Edit bucket policy.

4.) Setup the IAM role and permissions for Web application.

So now, you can use this cloudfront distribution in your applications. Usually Applications requires PutObject, GetObject and DeleteObject permissions for S3 bucket For that you need to give your application via IAM user or role (recommended)
The Get Operation (read access but only to web app user not anonymous) will be handled by Cloudfront.
For Put and delete object you need to create an IAM role and attach the below IAM policy.



    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::cloudfront-demo1-s3/*",
            ]
        }
    ]
}

Now, assign the IAM role to web application server** and you are good to go.

5.) Finally, test the Application !!

Now we can test the cloudfront domain which is setup to deliver the object from private S3 bucket.
By hitting the https://Distribution-domain-name/s3-object-name, it will return as below.
While if we just hit the domain https://Distribution-domain-name then it will show us the object that we had set in default root object.