JS and images doesn't load, but CSS is (ubuntu + nginx without apache)

JS and images doesn't load, but CSS is (ubuntu + nginx without apache)

by Davor Budimir -
Number of replies: 5

Hi everyone!

I decided to move to hestiacp + nginx (without apache) configiguration because of the speed (nginx) and financial constraints (cpanel became expensive for me). I'm still using cpanel + apache for my current moodle installation, until I set up everything on dev environment.

Until now I have been able to manage everything by myself using the documentation and all the A+ information contained on this forum, but for the last 2 days have been unable to fix issue with JS and images not being loaded (404 error). However, CSS loads fine.

Maybe someone like Ken "Mighty God" Task could enlighten my burned brain and give some light in order to fix the problem.

Currently my dev environment is:

  • Ubuntu 22.04 with hestiacp
  • PHP-FPM served by Nginx (without apache)
  • PHP 8.0.28
  • MariaDB 10.11.2
  • Moodle 4.1.2+ (Build: 20230314)

Since I followed every tutorial on moodle documentation, I believe that everything is set up correctly, but I might be wrong. I'll paste my config below:

--------------------------------------------
Moodle configuration file
--------------------------------------------

$CFG->wwwroot   = 'https://dev.example.com';

$CFG->dataroot  = '/home/dbbuda/web/dev.example.com/private/moodledata';

$CFG->admin     = 'admin';


$CFG->directorypermissions = 0777;

$CFG->slasharguments = true;

$CFG->sslproxy = true;

$CFG->preventexecpath = true;


$CFG->xsendfile = 'X-Accel-Redirect';

$CFG->xsendfilealiases = array(

      '/dataroot/' => '/home/dbbuda/web/dev.example.com/private/moodledata',

      '/localcachedir/' => '/home/dbbuda/web/dev.example.com/private/moodledata/localcache',

      '/cachedir/' => '/home/dbbuda/web/dev.example.com/private/moodledata/cache',

      '/tempdir/'  => '/home/dbbuda/web/dev.example.com/private/moodledata/temp',

      '/filedir'   => '/home/dbbuda/web/dev.example.com/private/moodledata/filedir',

);

--------------------------------------------
hestiacp/nginx custom template config file
https://hestiacp.com/docs/server-administration/web-templates.html
--------------------------------------------

server {

    listen      %ip%:%web_port%;

    server_name %domain_idn% %alias_idn%;

    root        %docroot%;

    index       index.php index.html index.htm;

    access_log  /var/log/nginx/domains/%domain%.log combined;

    access_log  /var/log/nginx/domains/%domain%.bytes bytes;

    error_log   /var/log/nginx/domains/%domain%.error.log error;


    include %home%/%user%/conf/web/%domain%/nginx.forcessl.conf*;


    rewrite ^/(.*\.php)(/)(.*)$ /$1?file=/$3 last;


    location = /favicon.ico {

        log_not_found off;

        access_log off;

    }


    location = /robots.txt {

        allow all;

        log_not_found off;

        access_log off;

    }

location ~ ^(.+\.php)(.*)$ {

    root /home/dbbuda/web/dev.example.com/public_html/;

    fastcgi_split_path_info  ^(.+\.php)(.*)$;

    fastcgi_index            index.php;

    fastcgi_pass             127.0.0.1:9000;

    include /etc/nginx/mime.types;

    include                  fastcgi_params;

    fastcgi_param   PATH_INFO       $fastcgi_path_info;

    fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;

}

# Very rarely should these ever be accessed outside of your lan

    location ~* \.(txt|log)$ {

        allow 192.168.0.0/16;

        deny all;

    }


    # No no for private

    location ~ ^/sites/.*/private/ {

        return 403;

    }


    location / {

        location ~* ^.+\.(jpeg|jpg|png|webp|gif|bmp|ico|svg|css|js)$ {

            expires     max;

            fastcgi_hide_header "Set-Cookie";

        }


        location ~ \..*/.*\.php$ {

        return 403;

        }


        location ~ [^/]\.php(/|$) {

            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

            fastcgi_split_path_info ^(.+\.php)($|/.*);

            try_files $fastcgi_script_name =404;


            fastcgi_pass    %backend_lsnr%;

            fastcgi_index   index.php;

            fastcgi_param SCRIPT_FILENAME $request_filename;

            fastcgi_param PHP_VALUE open_basedir="/home/%user%/web/%domain%/private/moodledata:/home/%user%/web/%domain%/public_html:/home/%user%/web/%domain%/public_shtml:/home/%user%/tmp:/var/www/html:/etc>

            fastcgi_intercept_errors on;

            include /etc/nginx/fastcgi_params;

            include     %home%/%user%/conf/web/%domain%/nginx.fastcgi_cache.conf*;

        }

    }


    location /error/ {

        alias   %home%/%user%/web/%domain%/document_errors/;

#       error_page 404 /error/index.php;    error_page 403 =404 /error/index.php;

    }

location ~ /\.(?!well-known\/) {

       deny all;

       return 404;

    }


    location /dataroot/ {

        internal;

        alias /home/dbbuda/web/dev.example.com/private/moodledata/;

    }


    location ~ (/vendor/|/node_modules/|composer\.json|/readme|/README|readme\.txt|/upgrade\.txt|db/install\.xml|/fixtures/|/behat/|phpunit\.xml|\.lock|environment\.xml) {

        deny all;

        return 404;

    }


    location /vstats/ {

        alias   %home%/%user%/web/%domain%/stats/;

        include %home%/%user%/web/%domain%/stats/auth.conf*;

    }


    include     /etc/nginx/conf.d/phpmyadmin.inc*;

    include     /etc/nginx/conf.d/phppgadmin.inc*;

    include     %home%/%user%/conf/web/%domain%/nginx.conf_*;

}

I didn't modify default nginx config file since I'm using "templates" in hestiacp

  • On every config edit I reboot server and purge all caches in moodle.
  • I used /admin/tool/replace/index.php to change all example.com links to dev.example.com
  • I have also set cgi.fix_pathinfo to 1 in php.ini

The funny thing is that everything was working fine without any special configuration for Nginx/PHP/FPM (out of the box installation). But no I can't tell why it stopped working.

As I said previously, any help would be highly appreciated.

Thanks for everything, not just for your upcoming help but for all these years resolving Moodle issues.

Regards,
Davor



Average of ratings: -
In reply to Davor Budimir

Re: JS and images doesn't load, but CSS is (ubuntu + nginx without apache)

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
Compare your Nginx configuration with the doc page Nginx.
Average of ratings: -
In reply to Visvanath Ratnaweera

Re: JS and images doesn't load, but CSS is (ubuntu + nginx without apache)

by Davor Budimir -
Thank you for the prompt response dear Visvanath.

I've read nginx conf docs page again and simplify it to this config below. However, I still don't see progress, JS and images are not being loaded.

server {
listen %ip%:%web_ssl_port% ssl http2;
server_name %domain_idn% %alias_idn%;
root %sdocroot%;
index index.php index.html index.htm;
access_log /var/log/nginx/domains/%domain%.log combined;
access_log /var/log/nginx/domains/%domain%.bytes bytes;
error_log /var/log/nginx/domains/%domain%.error.log error;

ssl_certificate %ssl_pem%;
ssl_certificate_key %ssl_key%;
ssl_stapling on;
ssl_stapling_verify on;

include %home%/%user%/conf/web/%domain%/nginx.hsts.conf*;

rewrite ^/(.*\.php)(/)(.*)$ /$1?file=/$3 last;

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

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

location ~* \.(txt|log)$ {
allow 192.168.0.0/16;
deny all;
}

# No no for private
location ~ ^/sites/.*/private/ {
return 403;
}

location / {
location ~* ^.+\.(jpeg|jpg|png|webp|gif|bmp|ico|svg|css|js)$ {
expires max;
fastcgi_hide_header "Set-Cookie";
}

location ~ \..*/.*\.php$ {
return 403;
}

location ~ ^(.+\.php)(.*)$ {
    root /home/%user%/web/%domain%/public_html/;
    fastcgi_split_path_info  ^(.+\.php)(.*)$;

    if(!-f $document_root$fastcgi_script_name) {return 404;}
    
    fastcgi_index            index.php;
    fastcgi_pass             127.0.0.1:9000;
    include /etc/nginx/mime.types;
    include                  fastcgi_params;
    fastcgi_param   PATH_INFO       $fastcgi_path_info;
    fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
}

}

location /error/ {
alias %home%/%user%/web/%domain%/document_errors/;
}

location ~ /\.(?!well-known\/) {
deny all;
return 404;
}

location /vstats/ {
alias %home%/%user%/web/%domain%/stats/;
include %home%/%user%/web/%domain%/stats/auth.conf*;
}

location /dataroot/ {
internal;
alias /home/%user%/web/%domain%/private/moodledata/;
}
proxy_hide_header Upgrade;

include /etc/nginx/conf.d/phpmyadmin.inc*;
include /etc/nginx/conf.d/phppgadmin.inc*;
include %home%/%user%/conf/web/%domain%/nginx.ssl.conf_*;
}
Average of ratings: -
In reply to Davor Budimir

Re: JS and images doesn't load, but CSS is (ubuntu + nginx without apache)

by Ken Task -
Picture of Particularly helpful Moodlers

There's sorta an un-written rule .. whomever responds, follow through ... but since you 'invited' me in  ('rattled my tree' really) ...  Mr. V has already given good advice! smile

First ... and foremost ...

I assure you am mere mortal!

Never heard of hestiacp - until now.
https://hestiacp.com/
I see is a Control Panel.   Not sure what that has to do with your choice
of setup for a Moodle, however.

".. unable to fix issue with JS and images not being loaded (404 error)"

Did look through the config info ... looks like you are trying to lock down
your site - following Moodle suggestions.   Maybe too much!   See this is dev site so good place to tinker/test frustration level really!

See quite a few lines that return 404 - *like*:

location ~ (/vendor/|/node_modules/|composer\.json|/readme|/README|readme\.txt|/upgrade\.txt|db/install\.xml|/fixtures/|/behat/|phpunit\.xml|\.lock|environment\.xml) {
        deny all;
        return 404;

So suggestion - remove or comment out all of the config lines related to return 404!  Does that fix it?
Then add them back ... one at a time until site breaks again.

Yes, painful but ... like I said ... am mere mortal! smile

And your error logs don't give you any hint/clue?

Since server is linux, suggest installing 'multitail' - have to download to server and compile .. but get that working and you can watch realtime logs. 

https://www.vanheusden.com/multitail/

I have a couple of multitail scripts - one for watching realtime logs related to web is one ... access logs, error logs, for both port 80 and 443 in one terminal window has proven to be useful.

'SoS', Ken

Average of ratings: -
In reply to Ken Task

Re: JS and images doesn't load, but CSS is (ubuntu + nginx without apache)

by Rudraksh Batra -
HI Ken,

I too have migrated the from one server to another, however my webserver is nginx now, earlier it was apache. Now what is happening, I am using aapanel and added the below in website config file, and enabled the slash arguments in moodle, if i disable it in moodle it works fine, when i upload image or file, it shows in upload box. however as moodle says it would be require for future version so i thought of enabling it with ngnix with below configuration in website conf file, still it behaves in same manner not show in upload box, any advise:

location ~ ^(.+\.php)(.*)$
{
root /www/lms/moodle;
fastcgi_split_path_info ^(.+\.php)(.*)$;
fastcgi_index index.php;
fastcgi_pass 127.0.0.1:9000;
include /www/server/nginx/conf/mime.types;
include fastcgi_params;
fastcgi_param PATH_INFO $fastcgi_path_info;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}

Regards
Average of ratings: -
In reply to Rudraksh Batra

Re: JS and images doesn't load, but CSS is (ubuntu + nginx without apache)

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
Compare your Nginx configuration with the doc page Nginx. There are countless people running Moodle on Nginx.

P.S. Unless your hosting environment and all the configuration files are identical to the original post JS and images doesn't load, but CSS is (ubuntu + nginx without apache), there is no point in pasting your question to that discussion. It is called piggy-back and not appreciated here. I hope, the moderator will split this sub-thread.
Average of ratings: -