CDN on top of your website to increase your core web vitals
Tags: webdev
Published: 2021-11-22 07:02:42

This is a long title, but it is on the point. 

I am going to show you how to set up AWS Cloudfront, the CDN solution of Amazon, in front of your AWS website.  

> The solution works if your website is hosted on a single server or if you have multiple instances behind a load balancer. In the case you host your website in a Kubernetes cluster, I don't have a solution at the moment, but feel free to leave your solution in the comments.

## Why would you do that first?

Because you will take profit of the very distributed CDN network of AWS! That means your website will be faster and available to a bigger audience. That relies on the good connectivity that AWS maintains inside its internal network. 

It means for example instead of serving your website from a central location: a server or a load balancer located in Singapore to a Canadian visitor. You will serve your website from the closest point in the CDN of AWS in Canada. 

And why that works? Because of the internal AWS network which is a lot more optimized than the regular internet. Using the regular internet routing to reach out to a website on the other side of the planet would never be as optimized. Internet neutrality won't favor your communication, and your Canadian ISP does not control routing up to Singapore. 

On top of that, increasing performances means increasing your core web vitals and your SEO!

## Ok sounds great! So how do I do that?

First, let's set up the CDN. 

1. Go to Cloudfront in AWS
2. Click on `Create distribution` 
![Create a distribution](https://img.bloggu.io/ipfs/bafkreif5yckuedwv66na7nm76stwcl6vhjspugnigljudysxngc5gy6pvi)    
3. Enter your origin
    1. If you have a unique server, use the `Public IPv4 DNS`
        
        ![EC2](https://img.bloggu.io/ipfs/bafkreiamnzwcvcd6turo6bd2dphvd3c2wjljftiwumycgwozl4wtlzeiy4)
        
    2. If you use a load balancer, use the `DNS name`
        
        ![LB](https://img.bloggu.io/ipfs/bafkreida7w6ewuyymizxb7nofj57vzmsqbwgwvjuzio5yqdv3qu2xnwhei)
        
4. In the section `Default cache behavior`, 
    1. I suggest you set `Redirect HTTP to HTTPS`,
        
        ![Redirect to HTTPS](https://img.bloggu.io/ipfs/bafkreibwy2oicqxbm3g3vfbsqsurs5nyslei7ksuzcqfvotuawhiyk45ji)
        
    2. *(Optional)* Set `Allowed HTTP methods` to `GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE` if your website have interactions and forms,
        
        ![Get](https://img.bloggu.io/ipfs/bafkreigcpvka3p3lq6re2x4xjg2urbwddfphld5oyqhos5ax36tanhro2u)
        
    3. Check `Cache policy and origin request policy`, select `CachingDisabled` as `Cache policy` (because your website is dynamic so you don't want to cache), and select `AllViewer` as `Origin request policy` (this will allow cookies and query parameters to be transferred to your website origin).
        
        ![Cache policy] (https://img.bloggu.io/ipfs/bafkreielfidfe5fkdhsumtligjos4ygtyfxn6hubp5tjx2iep7b36rpqfm)
        
5. In the section `Settings`
    1. Check `Use all edge locations (best performance)`
        
        ![Edges](https://img.bloggu.io/ipfs/bafkreievsxvmkctxknrshjfsqio3vkjsgqitmqyxbnyci7nyif7fls6gne)
        
    2. Click on `Add item` in `Alternate domain name (CNAME)`  to add your domain name
        1. If you want to have your root domain and www subdomain behind the CDN do it twice
        
        ![Example with two domains](https://img.bloggu.io/ipfs/bafkreic7uwnreqzkk4yuptvqtyeodqn3xqs3o7lcix7vg3o524fsqwlljm)
        
    3. Select or request a certificate for the domain you entered previously
        1. Select the recommended `Security policy` 
        
       ![Security policy](https://img.bloggu.io/ipfs/bafkreiheosj6okmge6a2ulrk656f6ypx2q7u7fglcfrl5uwi3wcg7f5k3i)
        
6. Click on `Create distribution` 

Second, update your DNS record. Once your distribution is ready copy the `Distribution domain name` of it, it should start by d. Then update the domain you entered at step 5b. 

And voilà.

If you encounter any issues implementing it, leave comments. If you are using Kubernetes and you found a solution to do that, let me know I am curious about it.