Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nginx finds css but doesn't load it into index.html

my nginx server serves an index.html file, which loads a css file and some js files. the css file is loaded (NO 404), but the style doesn't appear.

folders :

/src
    /assets
        /images
            ...
        /sounds
            ...
    /css
        /style.css
    /js
        ...
    index.html

sound and images loaded by the js files work perfectly.

/etc/nginx/sites-enabled/default/ :

server {
  listen 8080;
  server_name jumpnrun jumpnrun.vm;
  access_log /var/log/nginx/jumpnrun.access.log;
  error_log /var/log/nginx/jumpnrun.error.log;

  location / {
    try_files $uri $uri/index.html;
  }

  location ~ ^/(assets/|css/|js/|index.html) {
    root /src;
    index index.html;
    access_log off;
  }

  location /socket.io {
    add_header Access-Control-Allow-Origin *;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_http_version 1.1;
    proxy_pass http://node-server;
  }

}

index.html :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Jump n' Run</title>
        <link href="css/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <canvas id="game" width='1000' height='500'></canvas>
        <button class="sound"></button>
    </body>
    <!-- JS -->
</html>

if i go to localhost:8080 it gives me the index page but without any styling and the dev tools doesn't show me any errors.

thanks for your help!

EDIT:

The whole thing is in a docker container.. Now every time i browse to localhost:8080 nginx dies. error log is somehow not accessible..

like image 867
Jonas Metzener Avatar asked Apr 03 '15 12:04

Jonas Metzener


People also ask

Does nginx support CSS?

Save this question.

What does try_ files do in nginx?

The try_files directive exists for an amazing reason: It tries files in a specific order. NGINX can first try to serve the static content, and if it can't, it moves on. This means PHP doesn't get involved at all.

What is index in nginx?

The index directive defines the index file's name (the default value is index.html ). To continue with the example, if the request URI is /images/some/path/ , NGINX delivers the file /www/data/images/some/path/index.html if it exists. If it does not, NGINX returns HTTP code 404 (Not Found) by default.


1 Answers

I had a similar problem and resolved it by making sure the http block in my nginx.conf was loading the proper mime.types mappings:

http { 
    include /etc/nginx/mime.types;
}
like image 62
velveteer Avatar answered Sep 22 '22 04:09

velveteer