Configure nginx with multiple locations with different root folders on subdomain

I'm looking to serve the root url of a subdomain and directory of a subdomain to two different folders on my server. Here is the simple set-up that I have and is not working...

server {

    index index.html index.htm;
    server_name test.example.com;

    location / {
            root /web/test.example.com/www;
    }

    location /static {
            root /web/test.example.com/static;
    }
}

In this example going to test.example.com/ would bring the index file in /web/test.example.com/www

and going to test.example.com/static would bring the index file in /web/test.example.com/static

You need to use the alias directive for location /static:

server {

  index index.html;
  server_name test.example.com;

  root /web/test.example.com/www;

  location /static/ {
    alias /web/test.example.com/static/;
  }

}

The nginx wiki explains the difference between root and alias better than I can:

> Note that it may look similar to the root directive at first sight, but the document root doesn't change, just the file system path used for the request. The location part of the request is dropped in the request Nginx issues.

Note that root and alias handle trailing slashes differently.

The Location directive system is

Like you want to forward all request which start /static and your data present in /var/www/static

So a simple method is separated last folder from full path , that means

Full path : /var/www/static

Last Path : /static and First path : /var/www

location <lastPath> {
    root <FirstPath>;
}

So lets see what you did mistake and what is your solutions

Your Mistake :

location /static {
    root /web/test.example.com/static;
}

Your Solutions :

location /static {
    root /web/test.example.com;
}

server {

    index index.html index.htm;
    server_name test.example.com;

    location / {
        root /web/test.example.com/www;
    }

    location /static {
        root /web/test.example.com;
    }
}

https://nginx.org/en/docs/http/ngx_http_core_module.html#root

A little more elaborate example.

Setup: You have a website at example.com and you have a web app at example.com/webapp

...
server {
  listen 443 ssl;
  server_name example.com;

  root   /usr/share/nginx/html/website_dir;
  index  index.html index.htm;
  try_files $uri $uri/ /index.html;

  location /webapp/ {
    alias  /usr/share/nginx/html/webapp_dir/;
    index  index.html index.htm;
    try_files $uri $uri/ /webapp/index.html;
  }
}
...

I've named webapp_dir and website_dir on purpose. If you have matching names and folders you can use the root directive.

This setup works and is tested with Docker.

NB!!! Be careful with the slashes. Put them exactly as in the example.

If you use this, I will suggest you set up this command too.

location /static/ {
    proxy_set_header Host $host/static; // if you change the directory and the browser can't find your path
    alias /web/test.example.com/static/;
}