Create a CDN on AWS using (S3 & CloudFront)

First, you need to log into the AWS account.

Then Open Amazon S3 and from the buckets list click on Create Bucket

Bucket name: sanjaysikdar-bucket # Enter your bucket name

AWS Region: Asia Pacific (Mumbai) ap-south-1 # Mine

Leave All Default Config (As it is):

Object Ownership: ACLs disabled (recommended)

Block Public Access settings for this bucket: Block all public access

Bucket Versioning: Disable

Default encryptionInfo: Server-side encryption with Amazon S3 managed keys (SSE-S3)

Bucket Key: Enable

Object Lock: Disable

Then click on Create bucket button

Now, it is time to create CloudFront distribution.

First, click on Create distribution button

Settings Overview:

Origin:

Origin domain: Choose the S3 bucket that you have created.

In my case sanjaysikdar-bucket.s3.ap-south-1.amazonaws.com

Origin path: leave blank

Name: Enter your preferred name. sanjaysikdar-bucket.s3.ap-south-1.amazonaws.com

Origin access: Legacy access identities

• Origin access identity > Create new OAI / Select from dropdown

• Bucket policy > Yes, update the bucket policy

You can also go with Origin access control settings (recommended) [If you require signed URLs]

Enable Origin Shield: No (Your Preference)

Default cache behavior:

Compress objects automatically: Yes

Viewer protocol policy: HTTP and HTTPS

Allowed HTTP methods: GET, HEAD

Restrict viewer access: No

Cache key and origin requests: Legacy cache settings

Legacy cache settings > Headers > Include the following headers

• Origin

• Access-Control-Request-Method

• Access-Control-Request-Headers

Query strings: None, Cookies: None, Object caching: Use origin cache headers

Web Application Firewall (WAF): Do not enable security protections

Settings:

Price class: Use all edge locations (best performance)

Alternate domain name (CNAME) - optional [We will add it later]

Custom SSL certificate - optional [later]

Supported HTTP versions: HTTP/2

Default root object - optional : leave_blank

Standard logging: Off

IPv6: On

Description: Sanjay Sikdar CDN

Then click on Create distribution button

Update Bucket Permission:

Let's go back to the S3 Bucket Amazon S3 > Buckets > sanjaysikdar-bucket

From the bucket tabs click on Permissions

Review the Bucket Policy:

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E27987TNZ8NIN5"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::sanjaysikdar-bucket/*"
        }
    ]
}

Then Scroll on Cross-origin resource sharing (CORS) Section, Edit and Paste this JSON (Remove all the comments)

Where do I get the Cloudfront URL?

CloudFront > Distributions > [YOUR DIST ID] > General > Distribution domain name

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "POST",
            "GET",
            "PUT",
            "HEAD",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://xxp0c1h5nxx25.cloudfront.net" // Your Origins
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    }
]

Now it's time to upload a file for check.

Let's go back to the Amazon S3 > Buckets > sanjaysikdar-bucket and upload a file

• After uploading a file you can't access the uploaded file using your S3 bucket Object URL You will get an AccessDenied Error!

Example Object URL: https://sanjaysikdar-bucket.s3.ap-south-1.amazonaws.com/27691585.png

You need to replace the host URL for accessing the file in my case:

https://sanjaysikdar-bucket.s3.ap-south-1.amazonaws.com/27691585.png > https://xxp0c1h5nxx25.cloudfront.net/27691585.png

After replacing the host url you can easily access your file over your own CDN. 😊

Alternate domain name (CNAME) - optional:

Let's head back to the CloudFront Distribution:

CloudFront > Distributions > [YOUR DIST ID] > General > Settings > Click on Edit

In the Settings section, you will get `Alternate domain name (CNAME) - optional` > Click on Add item Button

In my case, I'm using `cdn.sanjaysikdar.dev` and below the

Custom SSL certificate - optional > Request certificate or Select SSL Certificate from the Dropdown.

• Legacy clients support: Disabled

• Security policy: TLSv1.2_2021 (recommended)

• Click on Save changes button.

The Next step is adding CNAME into your DNS:

After this, now you can access your file using this brand-new CDN URL.

• ~~https://xxp0c1h5nxx25.cloudfront.net~~/27691585.png > https://cdn.sanjaysikdar.dev/27691585.png

I hope you find this article helpful. If you encounter any difficulties in understanding this approach, please don't hesitate to leave a comment.

Requesting certificate >

• Certificate type: Request a public certificate > Click on the Next button

  [Must be on N. Virginia region]

• Request public certificate:

  • Domain names: example.com

  • Click Add another name to this certificate > enter *.example.com

• Validation method: DNS validation - recommended [Your Preference]

• Key algorithm: RSA 2048

• Click on the Request button