CDN caches static websites deployed on Function Compute

How to use CDN to cache static websites deployed on function calculations?

Taking my blog station deployed on function computing as an example, I will gradually introduce how to use CDN to cache static websites hosted by function computing.

Adding CDN functionality to a function

1) Assign a domain name to the function and add a CNAME record

Since I want end users to be able to access through blog.dengchao.fun, I need to assign a different domain name to the function blog.xxx.dengchao.fun:

2) Add a custom domain name and set routing

Set the assigned domain name to the custom domain name function calculated by the function:

"Because HTTPS can also be set on the CDN, and the SSL protocol version cannot be set before function calculation, HTTPS functionality is not enabled here.".

3) Add a CDN with the origin type of "Function Calculation Domain Name"

Next, create a new acceleration domain name on the CDN console:

Users will eventually access my blog by accelerating the domain name blog.dengchao.fun. The business type option does not affect the final acceleration effect, and can be selected arbitrarily.

Then add an origin:

Because the custom domain name calculated by the function does not have HTTPS enabled, the port of the origin site needs to be set to port 80, which can also reduce the response time when returning to the source (the actual effect is negligible).

4) Add CDN accelerated domain name records of CNAME type

After setting up the origin information and saving it, Alibaba Cloud will review the origin content, and if it passes the review, it will provide you with a CDN service provider's domain name:

Next, you need to resolve your accelerated domain name to the domain name provided by the CDN service provider:

After adding the CNAME record, the CDN console will display a "Configured" status in a moment, and then you can access it using the configured acceleration domain name.

Set CDN cache

Configuring the acceleration domain name is not enough. Otherwise, every time a user accesses the acceleration domain name, they need to pull data from the source site. Therefore, we need to set up a cache on the CDN to reduce the number of times they return to the source. 1) Add a cache expiration time rule

Assuming that we want the CDN node to cache all content in the root directory of the website for one day, we need to add the corresponding configuration on the cache management page of the CDN accelerated domain name:

"I thought the cache was set up when I started here, but after the website had been running for some time, I observed the CDN monitoring and found that the cache hit rate had been very low.". After observing the network request log in the browser console and analyzing the request headers one by one, an exception was finally found: the source station set the Cache Control response header to public, with max age=0.

2) Fix Cache-Control response headers

After carefully reviewing the document on the MDN for the Cache Control response header [2] and Alibaba Cloud CDN's introduction to cache expiration time configuration [3], it is confirmed that the previous CDN cache configuration has defects. After positioning the problem, the solution is also clear: just find a way to delete the Cache-Control response header from the source site.

Solution 1: Modify the Cache-Control response header returned by the source HTTP server. Since the source HTTP server has set the Cache-Control response header to max-age=0, we may as well change the source HTTP server. However, considering that the static website we deploy on function computing is hosted by an Express server generated by the website-fc plug-in, if modified, adjustments need to be made from the local website-fc plug-in source code. However, the website-fc plug-in may be updated irregularly, so we need to check it irregularly and patch it again as appropriate, which is very laborious to implement. Therefore, we cannot choose this option.

Scheme 2: Configure the CDN and delete the Cache-Control response header returned by the origin HTTP server. Looking at the document again, we found that Alibaba Cloud CDN provides the function of configuring the back-to-source HTTP response header [4], including the function of deleting the back-to-source response header. Therefore, we can use this function to have the CDN delete the Cache-Control response header returned by the origin station. After configuring, observe the response header of the network request under the accelerated domain name again and find that there is indeed no response header with Cache Control: public, max age=0.

3) Effect comparison: Due to the low traffic volume of blog stations, the effect is not obvious. Therefore, a monitoring screenshot of another website with relatively large traffic was captured: First, there was a comparison of traffic. From the monitoring data, there was no significant difference in traffic over the past two days:

Then there is a comparison of back-to-source traffic. It is found that after deleting the Cache-Control response header, the back-to-source traffic decreases significantly:

At the same time, the byte hit rate and request hit rate have significantly improved:

It seems that the cache we configured has indeed taken effect.

After configuring the CDN acceleration domain name and cache expiration time rules, remember to check the response header of the origin site. If the response header related to cache control already exists in the response of the origin, adjustments can be made on the HTTP server or CDN of the origin as appropriate.

The p.s acceleration principle [7] assumes that your acceleration domain name is www.aliyundoc.com. After accessing the CDN and starting the acceleration service, when an end user initiates an HTTP request in Beijing.