Local nginx wildcard installation not loading JS files

Question

I have installed a nginx server configuration on my localhost. It's a multi store PrestaShop 1.6.1.4. You can see the nginx configuration right here:

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

root /var/www/html/devsite;
index  index.php index.html index.htm;
server_name .devsite.com;

location / {
rewrite ^/api/?(.*)$ /webservice/dispatcher.php?url=$1 last;
rewrite ^/([0-9])(-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$1$2.jpg last;
rewrite ^/([0-9])([0-9])(-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$1$2$3.jpg last;
rewrite ^/([0-9])([0-9])([0-9])(-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$1$2$3$4.jpg last;
rewrite ^/([0-9])([0-9])([0-9])([0-9])(-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$1$2$3$4$5.jpg last;
rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])(-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6.jpg last;
rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7.jpg last;
rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8.jpg last;
rewrite ^/([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ /img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9.jpg last;
rewrite ^/c/([0-9]+)(-[_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ /img/c/$1$2.jpg last;
rewrite ^/c/([a-zA-Z-]+)(-[0-9]+)?/.+\.jpg$ /img/c/$1.jpg last;
rewrite ^/([0-9]+)(-[_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ /img/c/$1$2.jpg last;
try_files $uri $uri/ /index.php?$args;        
}

# AlphaImageLoader for IE and fancybox
rewrite ^images_ie/?([^/]+)\.(jpe?g|png|gif)$ js/jquery/plugins/fancybox/images/$1.$2 last;

# Web service API
rewrite ^/api/?(.*)$ /webservice/dispatcher.php?url=$1 last;

# Installation sandbox
rewrite ^(/install(?:-dev)?/sandbox)/(.*) /$1/test.php last;

#Change this block to your admin folder
location /admin {
    if (!-e $request_filename) {
        rewrite ^/.*$ /admin/index.php last;
    }
}

# Source code directories
location ~ ^/(app|bin|cache|classes|config|controllers|docs|localization|override|src|tests|tools|translations|travis-scripts|vendor|var)/ {
    deny all;
}
# Prevent exposing other sensitive files
location ~ \.(yml|log|tpl|twig|sass)$ {
    deny all;
}

location ~ \.php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
}

}

I have arrived to the conclusion it's some sort of missing configuration with the Nginx Wildcard configuration, but I might be wrong, I'll quickly explain what I can see:

The page loads fine, admin works fine but there's a template that doesn't load the respective JS which enables the customer product selection process.

I have checked the inspector network debugger and I can see the file being loaded in the production environment correctly whereas it doesn't load as in the localhost environment...

Thanks for the help.

There seems to be some key info missing. `doesn't load the respective JS` - what does that mean? 404? What is the URI of the problem JS? I don't see anything in the nginx config that handles JS explicitly? Or is it just a static resource somewhere under `devsite/`? To put it another way, what makes you suspect the problem is in the nginx config? — Don't Panic, Dec 28 '20 at 09:00

score 0 · Answer 1 · answered Dec 26 '20 at 14:46

Things you may check, that have worked for me, at least once in the past:

Check the permissions in the local environment, i.e. use
```
namei -nom path/to/jsfile 
```

to check that the path to the resource is accessible and ownership is appropriate (use chmod and chown to make appropriate alterations)

Check the permissions of the file itself (maybe an app or a process rewrites each time you run your service the js and file permissions are reset)
Check if you production instance is not really servicing the js file but has it cached from a previous state. Install maybe a clear cache button/add on or something that will allow you to deactivate cache. Some browsers have this feature.
Depending on your dev environment (is it Django is it something else?) it can be the case that servicing static files in the dev and in the prod environments might differ by design.
Check if the code you have in the dev and in the prod environments are really the same!
Stop the prod environment (if this won't interrupt any real service and won't bother your clients) and restart it. Do you experience the same issue?
Check again if both prod and dev look at the same nginx config file. Restart nginx and reload config
Try removing from dev nginx config the complex regex statements and check if js file can be serviced
Check locations of dev and prod static files and verify that they are proper in your config

As soon as I remember something additional I will post it here. Good luck!

Local nginx wildcard installation not loading JS files

1 Answers1