CDN (Content Delivery Network) is the distributed content network, which is all systems placed worldwide. It is used to deliver images, web, video, files,... to users with the highest performance.
How it's work ?
It could cache all content when users have access to the website, and the content would be loading directly at the nearest server instead of loading from the origin server. So that the server has increased workload and decreased resources.
In this guide, we would apply the CDN to address the performance problem that we met in our website, and we had chosen CloudFlare.
Let's begin the journey !!!
At runtime, there is so much static data loaded by the origin server. It used most of the pages, which is why users have bad UX.
To issue that, we would set up the middleware server to cache all static models and deliver them directly.
Firstly, we must be assigning the domain to CloudFlare's nameservers.
Secondly, we configure the DNS. Let's create some records with type A and IP address. After that, we turn on the proxy status.
Thirdly, we create the caching rules for the API. For example, we set the rules for the content proxy API in our system.
and make conditions that apply for the response header, including the cache-control header.
We would create a new API compatible with all conditions in Spring Boot 2.7.x.
Why do we do that?. Obviously, we had gotten the static images from the other site and met the CORS error. To ignore that, we must get the data and convert another header from the origin server to our sites.
the first access, we see that the images are firstly loaded from the origin server. The response header includes:
- cache-control: public, max-age=86400, stale-while-revalidate=86400
- cf-cache-status: MISS (not cached)
- server: cloudflare
average loading time: ~2s
the second access, we see that the images are loaded from Cloudflare. The response header includes:
- cache-control: public, max-age=86400, stale-while-revalidate=86400
- cf-cache-status: HIT (cached)
- server: cloudflare
average loading time: ~300 millisecond
Successfully, we have already applied CDN to solve the performance problem when loading the big resources. We still applied the solution to video, CSS files, and more ... :D Thanks for reading this document.