How To Use Amazon CloudFront As One Of The Best CDNs

JudisWeb – How to Use Amazon CloudFront as One of the Best CDNs – Distributes the content of a website that can be accessed worldwide, with very low latency and very high transfer speeds, making it one of the best choices for blog/website/e-commerce creators so the content is delivered and accessed very quickly.

For example, we are a bag manufacturer, where we want to sell our products through a website with a target market of ASIA, Europe, and Africa. If our main server is in Indonesia or Singapore, the low latency and/or fast access is only when the user accesses from the Indonesia/Singapore area only. What if European or African users access our website? Of course, the difference in latency is very high for European users, so it takes a longer time to open website content.

amazon cloudfront
CDN

For example, an Indonesian or Singapore user accessing our website only takes 0.8-1.2 seconds and all website content in the form of text, images, videos, etc. is sent very quickly when accessed. Meanwhile, users who are outside the territory of Indonesia or Singapore need 8-15 seconds to open the website content.

Using a CDN is the right solution where content on our main server in the form of static files is distributed to the data center point we want so that website content can be accessed quickly and with very low latency, one of which is Amazon CloudFront.

What is Amazon CloudFront?

Amazon CloudFront is a global content delivery network (CDN) service that securely delivers data to users with low latency and high transfer speeds. CloudFront delivers your content through a worldwide network of data centers called edge locations. When a user requests content that we serve with CloudFront, the user is directed to the edge location that provides the lowest latency (time delay), so the content is delivered at the best possible performance.

How to Create a CDN on CloudFront

Of course you need an AWS account to be able to use Amazon CloudFront services, if you don’t have an AWS account, please read here to create an AWS Free Tier account.

Amazon CloudFront Free Tier: 2,000,000 HTTP and HTTPS Requests of Amazon CloudFront, 50 GB Data Transfer Out of Amazon CloudFront

Step 1: Login to AWS Console

If you already have an AWS account, log in to AWS Management Console.

Step 2: Creating S3 Bucket

On the AWS Management Console dashboard, look for the section Services and select S3. Amazon S3 is what we use to distribute website content to CloudFront. I have made an article related to S3 with the title How to Easily Create AWS S3 Bucket Public/Private Access can be read and learned in making S3 Bucket.

In this example of creating a bucket I named this bucket with “judisweb-aws-tutorial” and of course with Public Access, and upload some static files like HTML, CSS, JPG into that bucket.

JudisWeb aws cloudfront s1
Upload Static File to S3 Bucket

If the previous bucket has been created, you can open it immediately CloudFront dashboards.

Step 3: Create an Amazon CloudFront distribution

Next back to AWS Management Console > All Services > Networking & Content Delivery > CloudFront, or by using the search box service search by keyword CloudFront.

Click Create distributionAfter that, fill in the origin domain using the S3 Bucket that we created earlier.

JudisWeb s3bucket to cloudfront
Configure Origin

Example of using Origin Path (optional):

  • Origin Domain – S3 Bucket named judisweb-aws-tutorial
  • Origin Path – /test-website

When the user enters the URL cloudfront-domain/index.html in the browser, CloudFront sends a request to Amazon S3 for judisweb-aws-tutorial/test-website/index.html.

When the user enters cloudfront-domain/images/logo.jog in the browser, CloudFront sends a request to Amazon S3 for judisweb-aws-tutorial/test-website/images/logo.jpg.

Continue to section Default cache behavior, by default this configuration is the most common without the need to change. On options Compress objects automatically choose Yes, CloudFront can automatically compress certain files before they are accepted by the user. In other words, for example, an HTML object or file with a size of 100KB has been compressed by CloudFront to 33KB and then it is received by the user.

JudisWeb cloudfront cache
Configure Cache

Next in the section Settings, specify Price class where our content uses edge location. Because AWS uses a payment system “pay as yo go“, then in this case we can calculate the costs incurred. If the AWS account is still in Free Tier status, then we can get a quota of 2 million HTTP/HTTPS requests and 50GB of data transfer in 1 month for 12 months for free. Of course, if the usage is above 50GB, then we need to pay for the excess usage of the quota that has been determined.

JudisWeb cloudfront dist settings
Choosing Edge Location

If all settings have been prepared then click Create distribution to start deploying from S3 Bucket to CloudFront.

Step 4: Testing CloudFront

After creating distributions from S3 CloudFront, we need to wait a while for all files to be distributed to all edge locations.

PicsArt 10 28 08.51.58
Deploy S3 Bucket to CloudFront

After the deploy process is complete, then we can try by accessing the files on CloudFront. In section Details we can see the domain name of our CloudFront distribution. To access the file address in CloudFront is the same as we access the file address in S3. For example the image file address on S3: bucket-name.s3.region.amazonaws.com/images/logo.jpg Becomes cloudfront-domain.cloudfront.net/images/logo.jpg.

JudisWeb cloudfront distributed
Amazon CloudFront Test website

Finally all the files in the S3 Bucket that we created for distribution to CloudFront have been distributed to the edge location and are publicly accessible either HTML, JPG, JS, CSS or other static files.

Hope it is useful.




Leave a comment

Your email address will not be published. Required fields are marked *