Magento 2: Using nginx css js not loading

Question

After installing Nginx server Magento2.3.1 not working CSS js file not loading.

etc/ngnix/ngnix.conf

    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/*;
}


    #mail {
    #   # See sample authentication script at:
    #   # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
    # 
    #   # auth_http localhost/auth.php;
    #   # pop3_capabilities "TOP" "USER";
    #   # imap_capabilities "IMAP4rev1" "UIDPLUS";
    # 
    #   server {
    #       listen     localhost:110;
    #       protocol   pop3;
    #       proxy      on;
    #   }
    # 
    #   server {
    #       listen     localhost:143;
    #       protocol   imap;
    #       proxy      on;
    #   }
    #}

/var/www/html/magneto2/nginx.conf.sample

# Magento Vars
# set $MAGE_ROOT /path/to/magento/root;
# set $MAGE_MODE default; # or production or developer
#
# Example configuration:
# upstream fastcgi_backend {
#    # use tcp connection
#    # server  127.0.0.1;
#    # or socket
#    server   unix:/var/run/php5-fpm.sock;
# }
# server {
#    listen 80;
#    server_name mage.dev;
#    set $MAGE_ROOT /var/www/magento2;
#    set $MAGE_MODE developer;
#    include /vagrant/magento2/nginx.conf.sample;
# }


root $MAGE_ROOT/pub;

index index.php;
autoindex off;
charset off;

add_header 'X-Content-Type-Options' 'nosniff';
add_header 'X-XSS-Protection' '1; mode=block';

location /setup {
    root $MAGE_ROOT;
    location ~ ^/setup/index.php {
        fastcgi_pass   fastcgi_backend;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }

    location ~ ^/setup/(?!pub/). {
        deny all;
    }

    location ~ ^/setup/pub/ {
        add_header X-Frame-Options "SAMEORIGIN";
    }
}

location /update {
    root $MAGE_ROOT;

    location ~ ^/update/index.php {
        fastcgi_split_path_info ^(/update/index.php)(/.+)$;
        fastcgi_pass   fastcgi_backend;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        fastcgi_param  PATH_INFO        $fastcgi_path_info;
        include        fastcgi_params;
    }

    # deny everything but index.php
    location ~ ^/update/(?!pub/). {
        deny all;
    }

    location ~ ^/update/pub/ {
        add_header X-Frame-Options "SAMEORIGIN";
    }
}

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

location /pub {
    location ~ ^/pub/media/(downloadable|customer|import|theme_customization/.*\.xml) {
        deny all;
    }
    alias $MAGE_ROOT/pub;
    add_header X-Frame-Options "SAMEORIGIN";
}

location /static/ {
    if ($MAGE_MODE = "production") {
        expires max;
    }
    location ~* \.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$ {
        add_header Cache-Control "public";
        add_header X-Frame-Options "SAMEORIGIN";
        expires +1y;

        if (!-f $request_filename) {
            rewrite ^/static/(version\d*/)?(.*)$ /static.php?resource=$2 last;
        }
    }
    location ~* \.(zip|gz|gzip|bz2|csv|xml)$ {
        add_header Cache-Control "no-store";
        add_header X-Frame-Options "SAMEORIGIN";
        expires    off;

        if (!-f $request_filename) {
           rewrite ^/static/(version\d*/)?(.*)$ /static.php?resource=$2 last;
        }
    }
    if (!-f $request_filename) {
        rewrite ^/static/(version\d*/)?(.*)$ /static.php?resource=$2 last;
    }
    add_header X-Frame-Options "SAMEORIGIN";
}

location /media/ {
    try_files $uri $uri/ /get.php?$args;

    location ~ ^/media/theme_customization/.*\.xml {
        deny all;
    }

    location ~* \.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$ {
        add_header Cache-Control "public";
        add_header X-Frame-Options "SAMEORIGIN";
        expires +1y;
        try_files $uri $uri/ /get.php?$args;
    }
    location ~* \.(zip|gz|gzip|bz2|csv|xml)$ {
        add_header Cache-Control "no-store";
        add_header X-Frame-Options "SAMEORIGIN";
        expires    off;
        try_files $uri $uri/ /get.php?$args;
    }
    add_header X-Frame-Options "SAMEORIGIN";
}

location /media/customer/ {
    deny all;
}

location /media/downloadable/ {
    deny all;
}

location /media/import/ {
    deny all;
}

location ~ cron\.php {
    deny all;
}

location ~ (index|get|static|report|404|503)\.php$ {
    try_files $uri =404;
    fastcgi_pass   fastcgi_backend;

    fastcgi_param  PHP_FLAG  "session.auto_start=off \n suhosin.session.cryptua=off";
    fastcgi_param  PHP_VALUE "memory_limit=256M \n max_execution_time=600";
    fastcgi_read_timeout 600s;
    fastcgi_connect_timeout 600s;
    fastcgi_param  MAGE_MODE $MAGE_MODE;

    fastcgi_index  index.php;
    fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
    include        fastcgi_params;
}

Ekk4rd · Accepted Answer · 2019-11-15 14:50:29Z

1

Is it not loading because of a 404 ?

Did you check if the file generation to pub/static works, means is it an issue with the loading, or already the generation ?

Is your magento installation in production mode, and if yes, did you regenerate the static content using php bin/magento setup:static-content:deploy?

Did you check the file and folder permissions ?

Nginx Configuration is correctly set up, so the Webroot of nginx points to the /pub folder of the Magento Installation ?

edited Nov 15, 2019 at 14:50

answered Nov 15, 2019 at 14:26

Ekk4rd

5252 silver badges12 bronze badges

site is in development mode, also deploying content hp bin/magento setup:static-content:deploy. and whole project permission is 777

Hafiz Arslan
– Hafiz Arslan

2019-11-15 14:28:13 +00:00
Commented Nov 15, 2019 at 14:28
can you also share the console output, maybe to see why the files cannot be located ?

Ekk4rd
– Ekk4rd

2019-11-15 14:33:42 +00:00
Commented Nov 15, 2019 at 14:33
GET 127.0.0.1/tradeplumbing-m2/pub/static/version1573828661/… net::ERR_ABORTED 404 (Not Found)

Hafiz Arslan
– Hafiz Arslan

2019-11-15 14:43:43 +00:00
Commented Nov 15, 2019 at 14:43
The part of "/tradeplumbing" seems a bit wierd in the url.. is the setup of the urls in the store configuration correctly set up. If it is it could be also some kind of misconfiguration in nginx. If both is not the case, i guess iam also out of ideas :(

Ekk4rd
– Ekk4rd

2019-11-15 14:45:59 +00:00
Commented Nov 15, 2019 at 14:45
The webroot path in the nginx configuration is maybe wrong, if i look that you got the /pub part inside your url. The webroot in your nginx should point to the pub folder inside the magento root

Ekk4rd
– Ekk4rd

2019-11-15 14:48:55 +00:00
Commented Nov 15, 2019 at 14:48

| Show 1 more comment

Danila Vershinin · Accepted Answer · 2019-11-17 00:12:26Z

1

This have been done in the same wrong way by many folks:

NGINX config with pub as webroot (great)
web URL includes pub in URLs (bad)

To explain it simply why it doesn't work for you: NGINX root is pub directory, so anything that starts with / is already in pub. When you put links that include pub, they are trying to load /path/to/pub/pub/some/file (which of course does not exist).

Proper config:

NGINX config with pub as webroot
web URL without pub in URLs

How to solve:

Login to Magento admin (or adjust core_config_data) so that Base URL settings do not have pub inside them.
Clean configuration cache

answered Nov 17, 2019 at 0:12

Danila Vershinin

1,3747 silver badges16 bronze badges

My base url's is already 192.168.1.141/tradeplumbingm2 and 192.168.1.141/tradeplumbingm2

Hafiz Arslan
– Hafiz Arslan

2019-11-18 07:33:41 +00:00
Commented Nov 18, 2019 at 7:33
Apparently it isn't as in one of your comments you mentioned GET 127.0.0.1/tradeplumbing-m2/pub/static/version1573828661/… net::ERR_ABORTED 404 (Not Found)

Danila Vershinin
– Danila Vershinin

2019-11-18 12:40:27 +00:00
Commented Nov 18, 2019 at 12:40
it's console error

Hafiz Arslan
– Hafiz Arslan

2019-11-18 12:54:50 +00:00
Commented Nov 18, 2019 at 12:54
now , css jss loading but expcet home nothing load all shows 404 even amdin

Hafiz Arslan
– Hafiz Arslan

2019-11-18 12:55:33 +00:00
Commented Nov 18, 2019 at 12:55

Add a comment |

Mujahidh · Accepted Answer · 2020-12-30 05:49:08Z

1

With all the above answers,

I had to change the core_config_data table's column values of web/secure/use_in_frontend & web/secure/use_in_adminhtml to Zeero ( 0 ). This worked for me.

answered Dec 30, 2020 at 5:49

Mujahidh

2,7825 gold badges41 silver badges87 bronze badges

Add a comment |

joe cutter · Accepted Answer · 2020-03-12 19:22:16Z

0

The project directory doesnt have the correct permission. Just

sudo chown -R www-data:www-data /var/www/html/magneto2/
sudo chmod -R 755 /var/www/html/magneto2/

answered Mar 12, 2020 at 19:22

joe cutter

101

Add a comment |

Stack Exchange Network

Magento 2: Using nginx css js not loading

4 Answers 4

Your Answer

Hot Network Questions

Magento 2: Using nginx css js not loading

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions