Stylesheet served from nginx in docker not available on page

Question

I am running nginx inside a docker container. Below is my nginx.conf file:

worker_processes 4;

events {
    worker_connections 1024;
}

http {
    types {
        text/css css;
    }

    upstream appserver {
        server:3000;
    }

    server {
        listen 80;
        server_name localhost;

        root /public;

        try_files $uri/index.html $uri @appserver;

        location @appserver {
            proxy_pass http://appserver;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_redirect off;
        }

        error_page 500 502 503 504 /500.html;
        client_max_body_size 4G;
        keepalive_timeout 10;
    }
}

I have all my static files inside /public. There is another container rails which is behind this nginx container.

When I do curl http://192.168.59.103/landing_page.css, my CSS displays properly (192.168.59.103 is the address from boot2docker ip). However, when I visit a page directly, the CSS is not visible. I am including the stylesheet like this:

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

It displays like this in Chrome inspector:

However, the response is empty:

Any ideas on what to look at? I'm pretty stumped

Answer 1

I went through this problem and there was no use in tinkering with the nginx conf when I discovered that I should run:

docker stop $(docker ps -a -q)

and

docker rm $(docker ps -a -q)

To only later see effects after changing conf nginx and then run:

docker-compose up --build

Clear your web browser's cache, cookies, and history

But even so, I will leave here as is my conf, currently working:

worker_processes  1;  ## Default: 1

worker_rlimit_nofile 8192;

events {
  worker_connections  4096;  ## Default: 1024
}

http {
  include  mime.types;

  index    index.html index.htm index.php;

  default_type application/octet-stream;
  log_format   main '$remote_addr - $remote_user [$time_local]  $status '
    '"$request" $body_bytes_sent "$http_referer" '
    '"$http_user_agent" "$http_x_forwarded_for"';

  sendfile     on;
  tcp_nopush   on;
  server_names_hash_bucket_size 128; # this seems to be required for some vhosts



    server {

            listen *:80;
            server_name my.devcom;

            error_log  /var/log/nginx/error.log;
            access_log /var/log/nginx/access.log;

            root /www;
            index index.php;

            location = /favicon.ico {
                            log_not_found off;
                            access_log off;
                    }

            location = /robots.txt {
                            allow all;
                            log_not_found off;
                            access_log off;
                    }

            location / {
                try_files $uri $uri/ /index.php?$args;

            }


            # redirect server error pages to the static page /50x.html
            #
            error_page 500 502 503 504 /50x.html;
            location = /50x.html {
                root /var/lib/nginx/html;
            }

            # FastCGI 
            location ~ \.php$ {
                try_files $uri =404;
                fastcgi_split_path_info ^(.+\.php)(/.+)$;
                fastcgi_pass php:9000;
                fastcgi_index index.php;
                fastcgi_intercept_errors on;

                include fastcgi_params;
                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                fastcgi_param PATH_INFO $fastcgi_path_info;
            }

            location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
                expires max;
                log_not_found off;
        }


    }
}

Answer 2

Solved it. The answer is here: Nginx finds css but doesn't load it into index.html

...BUT, on top of that I ran into an additional snag: the CSS file was cached, so I had to shift+reload to get it to work.