NGINX not serving CSS, Images and other media files

Question

I have installed NGINX on my ubuntu 16.04 LTS server to satisfy the need to navigate to different applications on the same linux server. So I have installed it and followed this tutorial : https://www.youtube.com/watch?v=PTmFbYG0hK4&t=677s I defined it exactly as the tutorial shows but I ran into a problem where the NGINX not serving any media files for a specific application (CSS, Images, stylesheets etc). I will be clearer: I defined inside sites-available a configuration file as such (of course I made a symbolic link to the sites-enabled directory.):

server{

    listen 80;
    listen 443 ssl;

    location / {
            root /home/agent/lexicala;
    }

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

The "location /" - serving my HTML files and website perfectly. But when I try to approach to "MyServersIP/test/" (serving a node app) which supposed to be served from "location /test" - the routing is good but NGINX serving it without any media. On the chrome console I have inspected it in chrome and see the following errors:

GET http://MyServersIP/stylesheets/style.css net::ERR_ABORTED
GET http://MyServersIP/scripts/jquery.multiselect.js net::ERR_ABORTED
GET http://MyServersIP/css/jquery.multiselect.css net::ERR_ABORTED

I have tried to follow posts which I saw that people ran into the same problem: Nginx fails to load css files ; https://superuser.com/questions/923237/nginx-cannot-serve-css-files-because-of-mime-type-error ; https://www.digitalocean.com/community/questions/css-files-not-interpreted-by-the-client-s-browser-i-think-my-nginx-config-is-not-good And many more, but nothing worked for me.

Another thing worth mentioning - when I swap routings like this:

server{

listen 80;
listen 443 ssl;

location / {
        proxy_pass "http://127.0.0.1:5000"; 
}

location /test {
        root /home/agent/lexicala;
        rewrite ^/test(.*) $1 break;
}}

The node app is served perfectly, but it is not good for me as I want the users to approach my node app through the 'test' URL.

This is my nginx.conf file (I have made no changes):

user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {
        worker_connections 768;
        # multi_accept on;
}

http {

    ##
    # Basic Settings
    ##

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    # server_tokens off;

    # server_names_hash_bucket_size 64;
    # server_name_in_redirect off;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    ##
    # SSL Settings
    ##

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;
    ##
    # Logging Settings
    ##

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

    ##
    # Gzip Settings
    ##

    gzip on;
    gzip_disable "msie6";

    # gzip_vary on;
    # gzip_proxied any;
    # gzip_comp_level 6;
    # gzip_buffers 16 8k;
    # gzip_http_version 1.1;
    # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    ##
    # Virtual Host Configs
    ##

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}

I tried to supply as much details as I could but if something is missing I would be glad to add. Hope you guys help me find solution to this bug cause I spend over it good working days.

NGINX not serving CSS, Images and other media files

0 Answers0