Load CSS and Js files with Nginx

Question

I am trying to serve an Angular deployed site (I have a dist directory with the index.html file) in Nginx. In that directory I have:

• index.html
• js files
• css files
• assets

I don't have experience in Nginx, so I am trying to serve correctly this site. My configuration for that site is:

server {
    listen  80;
    server_name sibdomain.domain.com;

    location ~* \.(?:css|js|map|jpe?g|gif|png)$ { }

    location / {
        root  /var/www/multiapp/dist;
        index  index.html index.htm;
        try_files $uri $uri/ =404;
         if (!-e $request_filename){
             rewrite ^(.*)$ /index.html?path=$1 break;
         }
    }

    error_page  500 502 503 504  /50x.html;
    location = /50x.html {
        root  /var/www/multiapp/dist;
    }
}

Right now the only file that is being loaded in the index, but the css and js file return 404. In apache this site was working correctly, I had this rule:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# not rewrite css, js and images
RewriteCond %{REQUEST_URI} !\.(?:css|js|map|jpe?g|gif|png)$ [NC]
RewriteRule ^(.*)$ index.html?path=$1 [NC,L,QSA]

And I used this site and they provided me this translation:

# nginx configuration 
  location ~* \.(?:css|js|map|jpe?g|gif|png)$ { }
  location / { 
      if (!-e $request_filename){ 
        rewrite ^(.*)$ /index.html?path=$1 break; 
      }
  }

I checked the logs of nginx and I noticed that it's trying to load those files from another path, the error is this one:

2017/12/13 22:47:55 [error] 14096#0: *50 open() "/usr/share/nginx/html/polyfills.22eec140b7d323c7e5ab.bundle.js" failed (2: No such file or di$rectory), client: xx.xxx.xxx.xx, server: subdomain.domain.com, request: "GET /styles.15b17d579c8773c5fdbd.bundle.css HTTP/1.1"

So, why its try to load from /usr/share/nginx/html/ and not the root path that I configured? What should I modify in order to be able to load the css and js files? thanks

Answer 1

You are missing a root for one of your location blocks, but as they all share the same root , it should be moved to the server context anyway.

You do not need both the try_files and the if...rewrite . The same functionality can be achieved using try_files alone.

The last location block is unnecessary as it uses the same root as location / .

server {
    listen  80;
    server_name sibdomain.domain.com;
    root  /var/www/multiapp/dist;

    location ~* \.(?:css|js|map|jpe?g|gif|png)$ { }

    location / {
        index  index.html index.htm;
        try_files $uri $uri/ /index.html?path=$uri&$args;
    }

    error_page  500 502 503 504  /50x.html;
}

See this document for more.