Why is Nginx not able to serve css and JS files?

Question

The following is my nginx config:

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

        server_name my-domain.com;

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

        #pass through headers from Jenkins which are considered invalid by Nginx server.
        ignore_invalid_headers off;

        location /userContent {
            #have nginx handle all the static requests to the userContent folder files
            #note : This is the $JENKINS_HOME dir
            root /var/lib/jenkins/;
            if (!-f $request_filename){
                 #this file does not exist, might be a directory or a /**view** url
                 rewrite (.*) /$1 last;
                 break;
            }
            sendfile on;
         }

    location / {
            root /opt/tomcat/webapps/ROOT/;
        #index index.jsp index.html index.htm;

        proxy_set_header    Host              $host;
            proxy_set_header    X-Real-IP         $remote_addr;
            proxy_set_header    X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header    X-Forwarded-Proto $scheme;

            # Required for new HTTP-based CLI
            proxy_http_version 1.1;
            proxy_request_buffering off;

        proxy_pass http://127.0.0.1:7070/;
        }

    #Include other locations
    include   /etc/nginx/locations-enabled/*.loc;
}

and in /etc/nginx/locations-enabled/flowable.loc

location /flowable-idm {
    root /opt/tomcat/webapps/flowable-idm;

    include /etc/nginx/mime.types;

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

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

    proxy_set_header    Host              $host;
    proxy_set_header    X-Real-IP         $remote_addr;
    proxy_set_header    X-Forwarded-For   $proxy_add_x_forwarded_for;
    proxy_set_header    X-Forwarded-Proto $scheme;

    # Required for new HTTP-based CLI
    proxy_http_version 1.1;
    proxy_request_buffering off;

    proxy_pass http://127.0.0.1:7070/flowable-idm;
}

The setup is to proxy for some apps deployed in apache tomcat. The permissions in the root directory look like so:

-rw-r-----  1 tomcat tomcat 3.5K Apr  5  2017 404.html
-rw-r-----  1 tomcat tomcat  250 Apr  5  2017 browserconfig.xml
-rw-r-----  1 tomcat tomcat  15K Apr  5  2017 favicon.ico
drwxr-x---  2 tomcat tomcat 4.0K Dec 20 10:45 fonts/
-rw-r-----  1 tomcat tomcat  24K Apr  5  2017 .htaccess
drwxr-x---  2 tomcat tomcat 4.0K Dec 20 10:45 i18n/
-rw-r-----  1 tomcat tomcat 8.1K Dec 22 13:54 idm-service.js
drwxr-x---  2 tomcat tomcat 4.0K Dec 20 10:45 images/
-rw-r-----  1 tomcat tomcat 6.8K Dec 11 16:04 index.html
drwxr-x--- 34 tomcat tomcat 4.0K Dec 20 10:45 libs/
-rw-r-----  1 tomcat tomcat  318 Apr  5  2017 manifest.json
drwxr-x---  3 tomcat tomcat 4.0K Dec 20 10:45 META-INF/
drwxr-x---  3 tomcat tomcat 4.0K Dec 20 10:45 scripts/
drwxr-x---  4 tomcat tomcat 4.0K Dec 20 10:45 styles/
drwxr-x---  4 tomcat tomcat 4.0K Dec 20 10:45 views/
drwxr-x---  4 tomcat tomcat 4.0K Dec 20 10:45 WEB-INF/

with Nginx added as a member of the tomcat group. At the moment Nginx is able to serve the xml and HTML files located in root but I get a 404 with any other type of file that should be served.
So whilst the index.html page is loaded, all the other files (.css and .js) in the libs, scripts, styles and view sub-directories are returning 404s. Here is the output of nginx -V:

nginx version: nginx/1.13.7
built by gcc 5.4.0 20160609 (Ubuntu 5.4.0-6ubuntu1~16.04.5)
built with OpenSSL 1.0.2g  1 Mar 2016
TLS SNI support enabled
configure arguments: --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-g -O2 -fstack-protector-strong -Wformat -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2 -fPIC' --with-ld-opt='-Wl,-Bsymbolic-functions -Wl,-z,relro -Wl,-z,now -Wl,--as-needed -pie'

EDIT: The following are the requests I made for testing purposes:
http://my-domain/flowable-idm/favicon.ico returns 404
http://my-domain/flowable-idm/index.html returns 200
http://my-domain/flowable-idm/404.html returns 200
http://my-domain/flowable-idm/idm-services.js returns 404

If I may offer an off-the-cuff guess: might need to add `try_files $uri $uri/ =404;` inside the `location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {` block. — virullius, Dec 22 '17 at 14:39

score 3 · Answer 1 · answered Dec 22 '17 at 15:52

3

Your location /flowable-idm is not within the server block to which it pertains. It's outside the block, which is not allowed. If you tried to reload nginx with this configuration, it would refuse to load and continue with its old configuration. If you tried to restart nginx with this configuration, it would fail to start. Put the location within the server block.

answered Dec 22 '17 at 15:52

Michael Hampton

237,123
42
477
940

Actually, that location block is part of the include. it is the location block for the flowable. I'll edit the question to reflect that – Dark Star1 Dec 25 '17 at 17:08

score 1 · Accepted Answer · answered Jan 03 '18 at 09:25

1

It would seem that removing the root directory and the
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 1M; }
resolved my issues.

answered Jan 03 '18 at 09:25

Dark Star1

1,355
6
21
37

Why is Nginx not able to serve css and JS files?

2 Answers2