How to configure nginx to find subfolders for /js /css related to index.html?

Question

I have my working Vuejs application and I also have problems when I deploy it to it's production environment. Unfortunately, I can't figure out how the configuration should be setup?

When I go to my application from a web browser (in my case http://10.0.0.4/kommandoran2.0), there are no problems in finding index.html. But linked files in index.html in subfolders are not found (like javascript files [example http://10.0.0.4/kommandoran2.0/js/example.js] or style sheets [example http://10.0.0.4/kommandoran2.0/css/example.css]). I have a 404 error for all .js and .css files.

Production environment: My operation system is Ubuntu (on a Raspberry Pi), my web server is nginx. This is where my application files are located in my production environment:

Edit 1 (clarification to where the application files are located):

/home/pi/kommandoran2.0/js/example.js
/home/pi/kommandoran2.0/css/example.css
/home/pi/kommandoran2.0/img/example.jpg 
/home/pi/kommandoran2.0/index.html

This is the server block from my nginx configuration file:

server {
    listen 80 default_server;
    listen [::]:80 default_server;



    server_name mypi.example.org;
    root /var/www/html/;
    index index.php index.html index.htm;

    location /kommandoran2.0 {
        root  /home/pi;
        index index.html;

        try_files $uri $uri/ =404;


        #I believe that I need some more configuration in this block but I can't figure out what needs to be done?
    }

    location /iot {
            rewrite ^/iot(.*) $1 break;
            proxy_pass      "http://127.0.0.1:1880";
    }

    location ~ \.php$ {

        include /etc/nginx/fastcgi_params;

        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  /var/www/html/$fastcgi_script_name;
        fastcgi_param  REQUEST_URI      $request_uri;
        fastcgi_param  QUERY_STRING     $query_string;
        fastcgi_param  REQUEST_METHOD   $request_method;
        fastcgi_param  CONTENT_TYPE     $content_type;
        fastcgi_param  CONTENT_LENGTH   $content_length;
        fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
    }

    location ~ /\.ht {
        deny all;
    }
}

I believe that my problem is very similar to this one, Nginx 404 for css js files, but I don't understand how I could adapt the solution to my problem.

Edit 2, log and error in browser This is output from nginx in /var/log/nginx/access.log (extract, I am trying to browse my application at http://10.0.0.4/kommandoran2.0/ here, see browser further down).

10.0.0.4 - - [31/Oct/2018:12:31:37 +0100] "GET /kommandoran2.0/ HTTP/1.1" 304 0 "-" "Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Raspbian Chromium/65.0.3325.181 Chrome/65.0.3325.181 Safari/537.36"
10.0.0.4 - - [31/Oct/2018:12:31:37 +0100] "GET /kommmandoran2.0/css/app.cb44bddd.css HTTP/1.1" 404 200 "http://10.0.0.4/kommandoran2.0/" "Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Raspbian Chromium/65.0.3325.181 Chrome/65.0.3325.181 Safari/537.36"
10.0.0.4 - - [31/Oct/2018:12:31:38 +0100] "GET /kommmandoran2.0/css/chunk-vendors.e084a3f2.css HTTP/1.1" 404 200 "http://10.0.0.4/kommandoran2.0/" "Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Raspbian Chromium/65.0.3325.181 Chrome/65.0.3325.181 Safari/537.36"
10.0.0.4 - - [31/Oct/2018:12:31:38 +0100] "GET /kommmandoran2.0/js/chunk-vendors.dcf6e5da.js HTTP/1.1" 404 200 "http://10.0.0.4/kommandoran2.0/" "Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Raspbian Chromium/65.0.3325.181 Chrome/65.0.3325.181 Safari/537.36"
10.0.0.4 - - [31/Oct/2018:12:31:38 +0100] "GET /kommmandoran2.0/js/app.96c7cdcf.js HTTP/1.1" 404 200 "http://10.0.0.4/kommandoran2.0/" "Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Raspbian Chromium/65.0.3325.181 Chrome/65.0.3325.181 Safari/537.36"

This image depicts the requests made corresponding to log file above:

Question: How should I make Nginx understand the correct path to my /js and /css folder?

Where are your `.js` and `.css` files located on the server disk? — Tero Kilkanen, Oct 31 '18 at 07:19
They are located in these folders: `/home/pi/kommandoran2.0/js/example.js` `/home/pi/kommandoran2.0/css/example.css` `/home/pi/kommandoran2.0/images/example.jpg` `/home/pi/kommandoran2.0/index.html`. I will edit my question. — Hauns TM, Oct 31 '18 at 07:26

noelli · Accepted Answer · 2018-10-31T12:50:46.860

2

I think the root directory inside your Location /kommandoran2.0 is the Problem here.

The location is checked against your URI http://10.0.0.4/kommandoran2.0 which will then search for index.html and also the css, js, etc. Folders inside of the specified root directory: /home/pi

But with your Filestructure, it should search in /home/pi/kommandoran2.0.

The full location Block would then look like this:

location /kommandoran2.0 {          # Maybe just /kommandoran see below.
    root  /home/pi/kommandoran2.0;
    index index.html;

    try_files $uri $uri/ =404;
}

I'm not sure why your index.html did work though not having tried it myself.
One reason could be that because your location coincidentally matches your Folder Name, $uri/ locates it into /home/pi/kommandoran2.0 and finds index.html.

Maybe changing your location Block to /kommandoran without the 2.0 would help clarify things and also makes rewrites easier if necessary.

This is a good help with Locations in Nginx: http://nginx.org/en/docs/beginners_guide.html

Edit:
As seen in your access.log your Page tries to load the resources from /kommmandoran2.0/, which has one m too much, are those static links inside your index.html?
If so, try fixing that to relative links or the right adress, for Example:

<link rel="stylesheet" type="text/css" href="css/app.cb44bddd.css">

or:

<link rel="stylesheet" type="text/css" href="/kommandoran2.0/css/app.cb44bddd.css">

edited Oct 31 '18 at 12:50

answered Oct 31 '18 at 09:50

noelli

48
5

Great thanks for your support! I tried your `location {}` block but then I couldn't reach even my index.html file (404, still the same for .css and .js). I also tried to update `kommandoran2.0` to `kommandoran` (both in configuration file and file structure) but there were no differences, still 404 on .css and .js. – Hauns TM Oct 31 '18 at 10:23
@HaunsTM did you try changing the name Only in the configuration, so that the Folder hasn't the same Name as the location? What does your nginx error and access log say? (typically in `/var/log/nginx/`) – noelli Oct 31 '18 at 10:30
I updated both configuration file and folder name to `kommandoran`(removing the `2.0` from `kommandoran2.0`). I updated my question with an excerpt from the log and also a screenshot from the browser inspector. – Hauns TM Oct 31 '18 at 11:56
@HaunsTM i updated my Answer, as seen in the logs your html wants to load resources from the wrong directory (`/kommmandoran2.0/`) – noelli Oct 31 '18 at 12:51
If it was possible to upvote this answer 1000 X I would do it right away! Indeed my paths were wrong! I also had to edit my `location`-block to deal with images but that would have been impossible without your help. 1 `m` too much, 1 million thanks! – Hauns TM Oct 31 '18 at 19:42

score 2 · Answer 2 · answered Oct 31 '18 at 19:22

2

Your nginx log entries show that the browser tries to load app.cb44bddd.css, chunk-vendors.e084a3f2.css etc. The actual files on your filesystem don't have the hexadecimal section in the URL.

This most likely some cache-busting mechanism employed by your application.

You need to either change your application so that it uses the correct filenames in the URLs in the HTML code, or add code to your nginx configuration that matches all app*.css to app.css.

The latter one is a fragile solution and can cause all kinds of unwanted side-effects.

answered Oct 31 '18 at 19:22

Tero Kilkanen

34,499
3
38
58

Thanks for your input! Actually, I believe that the main thing was an almost invisible (embarrassing) spelling mistake when I built my application for production environment. That was one part of it. The other thing I did to get it work was that I also updated my `index.html` to use relative paths. Don't know if that was necessary but it works now. Thanks for your answer! – Hauns TM Oct 31 '18 at 19:52

score 0 · Answer 3 · answered Oct 31 '18 at 20:18

The original question already has an answer, this is just in case anyone else has a problem similar to mine. Here is what I did to get it work:

I set up my VueJS-project to use relative paths in index.html (relative to /js /css /svg etc)
I deployed my VueJS-project to this file folder on my Raspberry Pi /home/pi/kommandoran2.0, example:

/home/pi/kommandoran2.0/index.html
/home/pi/kommandoran2.0/maps.svg
/home/pi/kommandoran2.0/js/allJavascriptFiles.js
/home/pi/kommandoran2.0/css/allCSSFiles.css

I had this in my nginx.conf (excerpt of the most essential I guess):

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name mypi.example.org;
    root /home/pi;
    index index.php index.html index.htm;

    location / {
        index index.html;
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        try_files $uri $uri/ =404;
    }

    location ~* \.(js|css|svg)$ {
        root  /home/pi/kommandoran2.0;
        expires 1y;
    }
}

How to configure nginx to find subfolders for /js /css related to index.html?

3 Answers3

Linked