Skip to content

How to add CDN to a static website using S3 and Cloudfront?

Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, high transfer speeds, all within a developer-friendly environment.

We can improve the optimal performance of our static website and also make them secure just by hosting the site in S3 and using Cloudfront. In this post we will be showing how we can add CDN to a static website using S3 and Cloudfront. If you haven’t configured the S3 for hosting your static website you can check out the link below and continue from there. 

How to host a static website in AWS S3 bucket?

To configure Cloudfront in AWS lets go to AWS management console and search for Cloudfront in the services and get into AWS Cloudfront Management Console then => Create Distribution => Get started with web distribution.

In Origin Domain Name: Select the S3 bucket where you are hosting the static website. 

Origin Path: If you want CloudFront to run from a certain folder path within the S3 bucket then you can specify Origin Path but in our case, we have hosted our static site in the bucket itself so we will leave it empty. 

Origin Shield: It is an additional caching layer to protect the origin’s availability but we don’t need that for this demo at the moment. 

Origin ID: This is the bucket ID where we hosted our website in which will be filled automatically.

Restrict Bucket Access: We can set it to yes if we don’t want the S3 bucket to be accessed directly without using Cloudfront. We have to ultimately set it to Yes to make it more secure but for now, we are setting it to No to test. Later we will definitely set it to yes. 

Leave origin connections attempts, timeouts, and custom headers as default as these are extra configurations that are not needed for now. 

Viewer Protocol Policy: We will select the second option to Redirect all HTTP traffic to HTTPS so that even insure connection requests will be redirected automatically to secure connections. 

HTTP methods and Cached HTTP methods can be set as default and it mainly focuses on specifying the time to live (TTL) values for objects in the cache. 

Price class: Here we can define which Edge location to use to cache our website, by default it has selected all edge locations which is most optimal but will be expensive than selecting only one edge location. We will leave it to default as this will be best to host the website that runs with high performance all around the globe. 

SSL Certificate: If we have SSL certificates from other vendors for our website then we can configure SSL certificates and provide Alternate Domain Names. Which we won’t be doing in this demo. 

All other values can be set to default and configure

Default Root Object: index.html (This is basically telling CloudFront to look for index.html when hitting S3 bucket)

Set all others to default and press Create Distribution. This will take a while so just have to wait up to 20 mins for this to set up. 

After the setup is complete we will see the Status to Deployed and if we open the distribution we can find the domain name for the Cloudfront distribution if we copy the Domain name and browse it in the browser then we can now successfully see our website through CloudFront. Now all the website is cached and shown from the CloudFront edge location instead of going all the way to S3. 

Now we have successfully added CDN to a static website using S3 and Cloudfront but in addition to that we can set a custom domain to point to our CloudFront distribution via AWS Route53 for that you can checkout the following link : 

 

Leave a Reply

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