Alibaba Cloud ESA Edge Secure Content Delivery Network How to Cache Static Files Tutorial

To realize that only js, css, png, jpg, and gif files are cached on Alibaba Cloud ESA, and all other content is not cached, the most recommended method is to create a "static resource caching whitelist" rule. This ensures that only the file type you specify will be cached, and other requests will be dynamically returned to the source to avoid caching chaos.

The following are the detailed steps:

Step 1: Go to the caching rule configuration page

Log in to the Alibaba Cloud ESA console.

On the site management page, click the target site you want to configure to enter the site management interface.

In the left navigation bar, find and click Cache Rules Cache Rules.

Step 2: Create a rule to "cache only static resources"

On the Cache Rules page, click the Add Rule button.

Fill in a clear and easy-to-remember name for the rule, such as cache-static-whitelist.

Step 3: Configure matching conditions (core step)

If the request matches the following rules... , we need to set an expression to exactly match the resource you want to cache.

Rule expression: Select "Edit Mode" in the drop-down box, switch to the expression input interface, and then enter the following code. Be sure to replace the honmau in the code with your own domain name.

(http.host in {"honmau"} and lower(http.request.uri.path.extension) in {"js" "css" "png" "jpg" "jpeg" "gif"})

Warm reminder:

If your site may have other static resource types that need to be cached (such as webp, svg, ico), you can add them in curly braces {} and separate them with spaces.

Step 4: Configure caching operations

In the cache operation area at the bottom of the page, make the following settings:

Cache Eligibility: Select "Meets Cache Conditions". This means that all requests that match the above rules will be cached through the edge nodes of the ESA.

Edge cache expiration time: Click "Configure" to set the length of time that these static resources are expected to be cached on the ESA edge node.

Recommendation: For images, JS, and CSS files that change frequently, you can set a longer time, such as 30 days (2592000 seconds) or longer.

You can select "Set as follows", then select "File Suffix", and enter the corresponding number of seconds.

Browser cache expiration time: Click "Configure" to set the cache time of resources in the user's browser. It is recommended to keep the cache time consistent with the edge, or slightly shorter.

Step 5: Confirm that the rules are in effect

Since multiple rules may have priority issues, make sure that the "whitelist" rule you create is at the top of the rule list. ESA executes rules in top-to-bottom order. Once the request matches the rules at the upper level, the rules at the lower level (such as the default "no cache" rule) are no longer executed.