Setting the "Expires" HTTP header for static content served from Nginx?

I prefer to do a more complete cache header, in addition to some more file extensions. The '?' prefix is a 'non-capturing' mark, nginx won't create a $1. It helps to reduce unnecessary load.

location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
    expires 30d;
    add_header Pragma public;
    add_header Cache-Control "public";
}

server {
    ...

    location ~* \.css$ {
       expires 30d;
    }
    ...
}

The location directive

The expires directive

I don't have enough reputation to comment on why the accepted answer would cause the files to no longer show up, but I figured it out and would like to help out!

Short version:

Make sure you have a root directory specified for your location block on images if you do not have a global one set!

Long version below:

First of all, my method of implementing this solution was really similar to this answer, where you write the rule (as in the accepted answer):

location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
    expires 30d;
    add_header Pragma public;
    add_header Cache-Control "public";
}

into a file img-cache.conf

and then include that file into your server {...} directive.

My example of somesite.com in my sites-available folder:

 #Image Caching
 include /etc/nginx/conf/img-cache.conf;

That way you can add the image caching location block to multiple sites you might be running.

Second of all, I have a situation where my /var/www/ contains two folders that I allow as public_html - secure and training, so I have to make specific location blocks in my site's server directive singling out these folders.

As such, I do not have a global root directory set.

So when you make your image location blocks, you may not be providing them with a root directory from which to look for the images in!

My solution was then to:

location ~ ^/training.+\.(?:ico|css|js|gif|jpe?g|png)$ {
        root /var/www/;
        expires 7d;
        add_header Pragma public;
        add_header Cache-Control "public";
        try_files $uri 404;
}

location ~ ^/.+\.(?:ico|css|js|gif|jpe?g|png)$ {
        root /var/www/secure;
        expires 7d;
        add_header Pragma public;
        add_header Cache-Control "public";
        try_files $uri 404;
}

You can also set the expires to maximum. Here is the directive I use for css and js.

# Set css and js to expire in a very long time
location ~* ^.+\.(css|js)$ {
    access_log off;
    expires max;
}

All the aforementioned solutions will deny the possibility to have different aliases for different paths. Also for the sake of having all your different cache expirations in one place you should use nginx map in the following way.

...

# Expires mappings
map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch;
    text/css                   max;
    application/javascript     7d;
    ~image/                    max;
}

...

server {
   listen ...;

   expires $expires;
   location /assets/ {
      # It is now possible to serve some resources from different path
      alias /var/www/my_other_path/
   }

   # and have them all have same expirations
   location / {
       try_files $uri $uri/ /index.html;
   }
...
}

Off disables caching, epoch (for unix epoch) results in resource always being refetched, max sets the date to browser max value.

The ~image/ matches any image types.

More about nginx maps at http://nginx.org/en/docs/http/ngx_http_map_module.html.

If you have one place that is home to all your static files, something like this will do...

 location /static {
            your/location/to/static/files/static;
            expires 30d;
            add_header Cache-Control "public";
    }

The accepted answer caused nginx to not find any of my static files. Not really sure why, but this is a simple alternative.

Most of the answers on this page are extremely outdated and/or convoluted...

For starters, the Expires header is not a good option these days, nor is the Pragma header... ideally, you should disable both of these headers in your Nginx configuration.

more_clear_headers "Pragma Expires";

It's much cleaner to set a single Cache-Control header on your static assets location block:

location ~* \.(atom|bmp|bz2|css|doc|docx|eot|gif|gz|ico|jpeg|jpg|js|mid|midi|mp4|ogg|ogv|otf|png|ppt|rar|rss|rtf|svg|svgz|tar|tgz|ttc|ttf|wav|webp|woff|woff2|xls|zip)$ {
    add_header Cache-Control "public, max-age=691200";
}

Remember that for Nginx, if you use the expires directive such as expires max this is NOT just setting an HTTP Expires header, it's also setting a Cache-Control header too, so it can get very messy rather quickly.

TLDR just use Cache-Control on your static files so that CDNs like Cloudflare can cache them at the edge and/or browsers can cache them for a while.

And I recommend NOT using any cache headers for your page/HTML content on dynamic sites like WordPress because it will only lead to conflicts and confusion... if you really want to, you can just use an etag for your pages, but I personally don't and think those make more sense when using aggressive output caches like Varnish or Litespeed's LS Cache.

The approaches above are what we use in SlickStack and it works fantastic for performance and stability, while guarding against e.g. WordPress plugins (or people) messing with your settings.

Step1: Configuring Cache-Control and Expires Headers:

sudo nano /etc/nginx/sites-available/default

Add the following above the server block:

# Expires map
map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch;
    text/css                   max;
    application/javascript     max;
    ~image/                    max;
}

And this line within server block. expires $expires;

sudo systemctl restart nginx

Source: DigitalOcean