Nginx try_files points to wrong folder

Question

I'm hosting a vue history site using nginx docker and the nginx config is the following

server {
        listen 80;
        location / {
                root   /var/www/dist/;
                index  index.html index.htm;
                try_files $uri $uri/ index.html;
        }

}

I can access "http://the.ip.of.server". However when I tried to visit "http://the.ip.of.server/search", it shows the following error. It tries to open "/etc/nginx/htmlindex.html" instead of "/var/www/dist/index.html" which makes no sense.

2020/05/10 04:24:01 [error] 7#7: *2 open() "/etc/nginx/htmlindex.html" failed (2: No such file or directory), 
client: xx.xx.xx.xx, server: , request: "GET /search HTTP/1.1", host: "the.ip.of.server"

I have no idea where "/etc/nginx/htmlindex.html" comes. The configuration should be right since I can access /.

Answer 1

You should put the root element outside the location block.

server {
   listen 80;
   root /var/www/dist;
   index index.html index.htm
   location / {
      try_files $uri $uri/ =404;
   }
}

After change the configuration remember to restart your nginx instance (if using docker force build image).