How to Use AWS CloudFront for Statically Hosted Website in S3

Posted By:Shivaranjani Ramakrishnan
Posted on:22 Jul 2019
AWS
 

If you’re hosting your static website on AWS S3 you have already been exposed to the wonders of AWS and how if effectively used, can make the whole process of web hosting extremely simple and cost-effective. Now that your website is set up in S3, you would want to speed up the process of rendering images, etc in the website. This is where CloudFront comes into the picture. CloudFront is the CDN service provided by AWS. But before jumping into the setup lets understand what a CDN is in the first place.

What is AWS CDN?

Amazon Web Services offers Content Delivery Network ( CDN) which is a geographically distributed network of proxy servers that strategically uses data centres around the world to deliver content quickly and efficiently with low latency. CloudFront is AWS’s CDN.

AWS CDN insisive cloud
AWS CDN

CloudFront, when used tactfully, can have a huge positive impact on the general user experience of your website. Without a CDN in place, the images, texts, etc, would take much longer to load if your user is geographically further from the server. With a CDN, the user’s request would get directed to the nearest edge location hence reducing the latency.

Now that we know the benefits of using CloudFront let’s go ahead and set up a CloudFront distribution for a statically hosted website in S3.

Step 1: Create AWS CloudFront Distribution

In the AWS search box choose the CloudFront service. Click on create a distribution. Since we are using CloudFront for a website choose web distribution.

Cloudfront insisive cloud
Cloudfront Distribution Screen

Step 2: Select AWS S3 Bucket Endpoint 

In the  Origin Domain Name choose your S3 bucket endpoint where the site is hosted. Since S3 bucket is your origin, you can specify an object path say ‘bucket-name.s3.amazonaws.com/production instead of just the bucket name.

AWS S3 Bucket Endpoint Screen

Step 3: Select Viewer Protocol Policy for AWS CloudFront

Depending on your website choose the corresponding protocol under Viewer Protocol Policy for CloudFront to accept the requests. Leave the remaining values as default under the Default Cache Behaviour Settings.

Step 4: Choose SSL Certificate

Next in the Distribution Settings if you’re using a Custom Domain then type your domain name in the ‘Alternate Domain Names’ field. You can choose the Default CloudFront Certificate option or if you do have a certificate you can choose the Custom SSL Certificate option.

Leave the remaining settings to default.

SSL Certificate insisive cloud
SSL Certificate Screen

Step 5: Get the Domain Name of the CloudFront distribution

Now click on Create Distribution. It takes about 20 minutes or so for your distribution changes to come into action. Once your distribution is created go to the CloudFront Distributions page and get the Domain Name of the CloudFront distribution.

Step 6: Create an A record

After getting your distribution domain name, go to Route 53 and create an A record pointing it to the respective CloudFront Domain Name if your DNS Provider is elsewhere do the same except create a CName Record.

Now that you’ve set up your AWS CloudFront your website would take less time to load and make it more user-friendly due to the increase in speed.

Read: Deployment using AWS CodeDeploy and BitBucket Pipeline

5 Pros of CloudFront for Statically Hosted Website in S3:

  1. Increases speed of delivery of the content of your website.
  2. Increases SEO ranking as faster websites are ranked higher.
  3. Reduces load on the central server due to the use of edge location servers.
  4. Enhances user experience.
  5. Can handle a high number of requests with ease.

Cons:

  • The invalidation charges are $0.005 per path after the free 1000 per month have been used, hence if not used judiciously, it would lead to a hefty bill at the end of the month.

Final Thoughts 

AWS CloudFront can be a good addition to your website if it has viewers distributed around the world and if used wisely can amplify user experience, but if your website is not a high traffic site CloudFront can become a sunken cost.

Getting started with insisive cloud is quick and simple. Create a role insisivecloud has been scheduling instances and saving users up to 60% . We will be glad to serve you, just drop an email- info@insisiv.com or give us a missed call on +91 730 365 6936.

4 Replies to “How to Use AWS CloudFront for Statically Hosted Website in S3”

Leave a Reply

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


Notice: Undefined index: loggedin_user in /var/www/html/wp-content/plugins/freshchat/widget-settings/add_to_page.php on line 97