{"id":23558,"date":"2024-01-02T07:51:06","date_gmt":"2024-01-02T07:51:06","guid":{"rendered":"https:\/\/linuxways.net\/?p=23558"},"modified":"2024-01-03T04:46:41","modified_gmt":"2024-01-03T04:46:41","slug":"cache-content-nginx","status":"publish","type":"post","link":"https:\/\/linuxways.net\/de\/scripting\/cache-content-nginx\/","title":{"rendered":"How to Cache Content in NGINX"},"content":{"rendered":"<p>Web performance is a major factor for the websites. Caching in NGINX particularly plays a very important role to increase the user experience.<\/p>\n<p>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.<\/p>\n<h2><strong>Cache a Content in NGINX<\/strong><\/h2>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<h2><strong>Set Up and Configure the Basic Cache in NGINX<\/strong><\/h2>\n<p>We need to set up and configure the basic caching for content. These two directives named \u201cproxy_cache_path\u201d and \u201cproxy_cache\u201d are important for caching a content. The \u201cproxy_cache_path\u201d specifies the cache&#8217;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 \u201cproxy_cache\u201d.<\/p>\n<p>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 \u201cproxy_cache_path\u201d directive to specify the cache path and set the cache parameters.<\/p>\n<div class=\"codecolorer-container nginx blackboard\" style=\"width:100%;\"><div class=\"nginx codecolorer\"><a href=\"http:\/\/wiki.nginx.org\/NginxHttpProxyModule#proxy_cache_path\"><span class=\"kw23\">proxy_cache_path<\/span><\/a> \/var\/cache\/nginx app1 levels<span class=\"sy0\">=<\/span><span class=\"nu0\">1<\/span>:<span class=\"nu0\">2<\/span> keys_zone<span class=\"sy0\">=<\/span>PROXYCACHE:100m max_size<span class=\"sy0\">=<\/span>500m inactive<span class=\"sy0\">=<\/span>60m<span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Then, we need to specify how the requests are cached. Add the \u201cproxy_cache_key\u201d directive.<\/p>\n<div class=\"codecolorer-container nginx blackboard\" style=\"width:100%;\"><div class=\"nginx codecolorer\"><a href=\"http:\/\/wiki.nginx.org\/NginxHttpProxyModule#proxy_cache_key\"><span class=\"kw23\">proxy_cache_key<\/span><\/a> <span class=\"st0\">&quot;$scheme$request_method$host$request_uri&quot;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>We may add a custom HTTP header to show the cache state for monitoring purposes.<\/p>\n<div class=\"codecolorer-container nginx blackboard\" style=\"width:100%;\"><div class=\"nginx codecolorer\"><a href=\"http:\/\/wiki.nginx.org\/NginxHttpHeadersModule#add_header\"><span class=\"kw14\">add_header<\/span><\/a> X-Cache-Status <span class=\"re0\">$upstream_cache_status<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Within a location block, specify the cache zone that we defined earlier to enable caching for proxied responses.<\/p>\n<div class=\"codecolorer-container nginx blackboard\" style=\"width:100%;\"><div class=\"nginx codecolorer\"><a href=\"http:\/\/wiki.nginx.org\/NginxHttpCoreModule#location\"><span class=\"kw3\">location<\/span><\/a> \/ <span class=\"br0\">&#123;<\/span><br \/>\n<br \/>\n&nbsp; <a href=\"http:\/\/wiki.nginx.org\/NginxHttpProxyModule#proxy_pass\"><span class=\"kw23\">proxy_pass<\/span><\/a> <a href=\"http:\/\/wiki.nginx.org\/NginxHttpCoreModule#http\"><span class=\"kw3\">http<\/span><\/a>:\/\/127.0.0.1:<span class=\"nu0\">3080<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; <a href=\"http:\/\/wiki.nginx.org\/NginxHttpProxyModule#proxy_cache\"><span class=\"kw23\">proxy_cache<\/span><\/a> PROXYCACHE<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; <a href=\"http:\/\/wiki.nginx.org\/NginxHttpProxyModule#proxy_cache_valid\"><span class=\"kw23\">proxy_cache_valid<\/span><\/a> <span class=\"nu0\">200<\/span> 15m<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; <a href=\"http:\/\/wiki.nginx.org\/NginxHttpProxyModule#proxy_cache_valid\"><span class=\"kw23\">proxy_cache_valid<\/span><\/a> <span class=\"nu0\">404<\/span> 2m<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>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.<\/p>\n<p>Finally, we need to save the NGINX configuration file.<\/p>\n<p>Reloading is also for NGINX to take effect of the changes.<\/p>\n<div class=\"codecolorer-container nginx blackboard\" style=\"width:100%;\"><div class=\"nginx codecolorer\">$ sudo nginx -t<br \/>\n<br \/>\n$ sudo systemctl reload nginx<\/div><\/div>\n<h2><strong>Method to Cache a Static Content<\/strong><\/h2>\n<p>Static contents in our website are materials that remain static\u00a0across pages. Static content includes items such as videos, images,\u00a0documents,\u00a0JavaScript files, and CSS files.<\/p>\n<p>Here is a step-by-step method to cache a static content in Nginx.<\/p>\n<p>We need to determine the types of static content that we want to cache such as images, CSS files, JavaScript files, or documents.<\/p>\n<p>Then, we need to define a cache zone using the \u201cproxy_cache_path\u201d directive in the NGINX configuration file.<\/p>\n<div class=\"codecolorer-container nginx blackboard\" style=\"width:100%;\"><div class=\"nginx codecolorer\"><a href=\"http:\/\/wiki.nginx.org\/NginxHttpProxyModule#proxy_cache_path\"><span class=\"kw23\">proxy_cache_path<\/span><\/a> \/var\/cache\/nginx\/static levels<span class=\"sy0\">=<\/span><span class=\"nu0\">1<\/span>:<span class=\"nu0\">2<\/span> keys_zone<span class=\"sy0\">=<\/span>STATIC:10m max_size<span class=\"sy0\">=<\/span> 100m inactive<span class=\"sy0\">=<\/span> 60m<span class=\"sy0\">;<\/span><\/div><\/div>\n<p>After that, we need to activate the cache inside the \u201clocation \/static\u201d block for a static content.<\/p>\n<div class=\"codecolorer-container nginx blackboard\" style=\"width:100%;height:100%;\"><div class=\"nginx codecolorer\"><a href=\"http:\/\/wiki.nginx.org\/NginxHttpCoreModule#server\"><span class=\"kw3\">server<\/span><\/a> <span class=\"br0\">&#123;<\/span><br \/>\n<br \/>\n&nbsp; <a href=\"http:\/\/wiki.nginx.org\/NginxHttpCoreModule#server_name\"><span class=\"kw3\">server_name<\/span><\/a> www.test.com<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; <a href=\"http:\/\/wiki.nginx.org\/NginxHttpCoreModule#root\"><span class=\"kw3\">root<\/span><\/a> \/var\/www\/ test.com\/htdocs<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; <a href=\"http:\/\/wiki.nginx.org\/NginxHttpIndexModule#index\"><span class=\"kw15\">index<\/span><\/a> <a href=\"http:\/\/wiki.nginx.org\/NginxHttpIndexModule#index\"><span class=\"kw15\">index<\/span><\/a>.html<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; <a href=\"http:\/\/wiki.nginx.org\/NginxHttpLogModule#access_log\"><span class=\"kw20\">access_log<\/span><\/a> \/var\/log\/nginx\/access.log<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; <a href=\"http:\/\/wiki.nginx.org\/CoreModule#error_log\"><span class=\"kw1\">error_log<\/span><\/a> \/var\/log\/nginx\/error.log<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; <a href=\"http:\/\/wiki.nginx.org\/NginxHttpCoreModule#location\"><span class=\"kw3\">location<\/span><\/a> \/ <span class=\"br0\">&#123;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; &nbsp; <a href=\"http:\/\/wiki.nginx.org\/NginxHttpCoreModule#try_files\"><span class=\"kw3\">try_files<\/span><\/a> <span class=\"re0\">$uri<\/span> <span class=\"re0\">$uri<\/span>\/ \/<a href=\"http:\/\/wiki.nginx.org\/NginxHttpIndexModule#index\"><span class=\"kw15\">index<\/span><\/a>.html?<span class=\"re0\">$args<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp;<br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n&nbsp; <a href=\"http:\/\/wiki.nginx.org\/NginxHttpCoreModule#location\"><span class=\"kw3\">location<\/span><\/a> \/static <span class=\"br0\">&#123;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; &nbsp; <a href=\"http:\/\/wiki.nginx.org\/NginxHttpProxyModule#proxy_cache\"><span class=\"kw23\">proxy_cache<\/span><\/a> STATIC<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; &nbsp; <a href=\"http:\/\/wiki.nginx.org\/NginxHttpProxyModule#proxy_cache_valid\"><span class=\"kw23\">proxy_cache_valid<\/span><\/a> <span class=\"nu0\">200<\/span> <span class=\"nu0\">302<\/span> 1d<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; &nbsp; <a href=\"http:\/\/wiki.nginx.org\/NginxHttpProxyModule#proxy_cache_valid\"><span class=\"kw23\">proxy_cache_valid<\/span><\/a> <span class=\"nu0\">404<\/span> 2m<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>Lastly, we can save the configuration file and reload NGINX to apply caching for a static content.<\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>We can improve our website performance by\u00a0understanding 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.<\/p>","protected":false},"excerpt":{"rendered":"<p>Practical tutorial on how to perform the fine-tune caching in NGINX for optimal performance to ensure that our applications load faster and more efficiently.<\/p>","protected":false},"author":111,"featured_media":23563,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[168],"tags":[],"class_list":["post-23558","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripting"],"_links":{"self":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts\/23558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/users\/111"}],"replies":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/comments?post=23558"}],"version-history":[{"count":0,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts\/23558\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/media\/23563"}],"wp:attachment":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/media?parent=23558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/categories?post=23558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/tags?post=23558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}