Scripting

How to Cache Content in NGINX

Web performance is a major factor for the websites. Caching in NGINX particularly plays a very important role to increase the user experience.

Let us talk about how we can cache a content in NGINX. We will explain step by step and show how it helps both the simple and more complex parts of a website. By understanding this article, we will know about how to perform the fine-tune caching for optimal performance as this ensures our applications load faster and more efficiently.

Cache a Content in NGINX

Caching in NGINX is a pivotal technique that involves the storage and delivery of web content from a cache, reducing the reliance on repeated requests to the origin server. This process yields substantial enhancements in website and application performance by alleviating the server load, curbing the latency, and ultimately enriching the overall user experience.

NGINX operates as a versatile reverse proxy and load balancer, boasting the formidable caching capabilities. NGINX takes charge of intercepting the incoming requests. When a client seeks a content that already resides in the cache, NGINX promptly retrieves and serves it directly from the cache, completely bypassing any interaction with the origin server.

This efficient mechanism translates to expedited load times and a significantly reduced load on the application servers. This leads to a very smooth internet experience for the user. So, caching a content in NGINX is very useful in boosting the web performance.

Set Up and Configure the Basic Cache in NGINX

We need to set up and configure the basic caching for content. These two directives named “proxy_cache_path” and “proxy_cache” are important for caching a content. The “proxy_cache_path” specifies the cache’s path and settings. The directory, levels, keys_zone, max_size, and other settings are all set by us. This phase is used to set up the caching architecture. The caching method is activated with the help of “proxy_cache”.

We need to advice NGINX to cache the supplied material by adding this directive to our NGINX configuration. First, open the NGINX configuration file. Then, in the HTTP context, add the “proxy_cache_path” directive to specify the cache path and set the cache parameters.

proxy_cache_path /var/cache/nginx app1 levels=1:2 keys_zone=PROXYCACHE:100m max_size=500m inactive=60m;

Then, we need to specify how the requests are cached. Add the “proxy_cache_key” directive.

proxy_cache_key "$scheme$request_method$host$request_uri";

We may add a custom HTTP header to show the cache state for monitoring purposes.

add_header X-Cache-Status $upstream_cache_status;

Within a location block, specify the cache zone that we defined earlier to enable caching for proxied responses.

location / {

  proxy_pass http://127.0.0.1:3080;

  proxy_cache PROXYCACHE;

  proxy_cache_valid 200 15m;

  proxy_cache_valid 404 2m;

}

Here, in the previous example, the responses with HTTP status codes of 200 will be cached for 15 minutes and the responses with a status code of 404 will be cached for 2 minutes.

Finally, we need to save the NGINX configuration file.

Reloading is also for NGINX to take effect of the changes.

$ sudo nginx -t

$ sudo systemctl reload nginx

Method to Cache a Static Content

Static contents in our website are materials that remain static across pages. Static content includes items such as videos, images, documents, JavaScript files, and CSS files.

Here is a step-by-step method to cache a static content in Nginx.

We need to determine the types of static content that we want to cache such as images, CSS files, JavaScript files, or documents.

Then, we need to define a cache zone using the “proxy_cache_path” directive in the NGINX configuration file.

proxy_cache_path /var/cache/nginx/static levels=1:2 keys_zone=STATIC:10m max_size= 100m inactive= 60m;

After that, we need to activate the cache inside the “location /static” block for a static content.

server {

  server_name www.test.com;

  root /var/www/ test.com/htdocs;

  index index.html;

  access_log /var/log/nginx/access.log;

  error_log /var/log/nginx/error.log;

  location / {

      try_files $uri $uri/ /index.html?$args;
 
  }

  location /static {

      proxy_cache STATIC;

      proxy_cache_valid 200 302 1d;

      proxy_cache_valid 404 2m;

  }

}

Lastly, we can save the configuration file and reload NGINX to apply caching for a static content.

Conclusion

We can improve our website performance by understanding how to cache a content in NGINX. NGINX provides the required capabilities to improve the overall user experiences. Websites load quicker and run smoother by applying the caching content methods.

Similar Posts