Serve Static Content through nginx with nginx cache

NGINX is a powerful tool for Serving Static Content like. images, JavaScript, CSS, etc. It provides cache which allows  client’s side program  to reduce server load and increase the content delivery speed.

Below is the example server block for serving static images and videos,

server {
        listen       80;
        server_name  localhost;
        #index  index.html index.htm;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location /api/ {
proxy_pass http://127.0.0.1:8010/;

        }

  # static image load by using direct folder structure
  
   location /images/ {
           root   /Users/Lenovo/Downloads/nginx-1.13.8/nginx-1.13.8/data;
        }

    # static image load by using regex 

  location ~ \.(gif|jpg|png)$ {
           root   /Users/Lenovo/Downloads/nginx-1.13.8/nginx-1.13.8/data/images/;
        }

  # static media download by using direct folder structure

  location /media/ {
   root   /Users/Lenovo/Downloads/nginx-1.13.8/nginx-1.13.8/data;
    }

  # static media download by using regex 

  location ~ \.(mp3|mp4) {
    root   /Users/Lenovo/Downloads/nginx-1.13.8/nginx-1.13.8/data/media/;
  }

}


when you hit the server with http://localhost/images/img1.jpg --- it will get the img1.jpg from /Users/Lenovo/Downloads/nginx-1.13.8/nginx-1.13.8/data/images directory.

when you hit the server with http://localhost/media/vid1.mp4 --- it will get the vid1.mp4 from /Users/Lenovo/Downloads/nginx-1.13.8/nginx-1.13.8/data/media directory.

Watch below video for serving static images and video files,

Video - Nginx cache for video and image files

Watch below video for serving static html,css and js files,

Video - Nginx serving static html ,js and css files