I’ve got an issue with CSS not being loaded on Magento CE 2.4.3 on both frontend or backend (but the HTML is being rendered correctly). I am in dev mode. The site is compiled and cache is disabled. In order to simplify things I’ve also disabled the CSS version directory mapping using:
INSERT INTO core_config_data (path, value) VALUES ('dev/static/sign', 0)
ON DUPLICATE KEY UPDATE value = 0;
And cleared cache. (This is the equivalent of Stores > Config > Developer > Static File Settings: Sign Static Files = No, but I can’t use the admin UI at present).
I’m getting 404s on the CSS & JS files – as seen in the nginx logs:
80.229.148.211 - - [24/Mar/2022:22:15:21 +0000] "GET /frontend/a1/hawthorn/en_GB/css/print.css HTTP/1.1" 499 0 "https://m243.mydomain.com/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" "-"
80.229.148.211 - - [24/Mar/2022:22:15:48 +0000] "GET / HTTP/1.1" 200 10342 "-" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" "-"
80.229.148.211 - - [24/Mar/2022:22:16:07 +0000] "GET /frontend/a1/hawthorn/en_GB/mage/calendar.css HTTP/1.1" 404 9424 "https://m243.mydomain.com/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" "-"
80.229.148.211 - - [24/Mar/2022:22:16:16 +0000] "GET /frontend/a1/hawthorn/en_GB/mage/requirejs/mixins.js HTTP/1.1" 404 9449 "https://m243.mydomain.com/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" "-"
80.229.148.211 - - [24/Mar/2022:22:16:18 +0000] "GET /frontend/a1/hawthorn/en_GB/requirejs-config.js HTTP/1.1" 404 9434 "https://m243.mydomain.com/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" "-"
80.229.148.211 - - [24/Mar/2022:22:16:21 +0000] "GET /frontend/a1/hawthorn/en_GB/css/styles-l.css HTTP/1.1" 404 9421 "https://m243.mydomain.com/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" "-"
80.229.148.211 - - [24/Mar/2022:22:16:22 +0000] "GET /frontend/a1/hawthorn/en_GB/requirejs/require.js HTTP/1.1" 404 9425 "https://m243.mydomain.com/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" "-"
80.229.148.211 - - [24/Mar/2022:22:16:25 +0000] "GET /frontend/a1/hawthorn/en_GB/css/styles-m.css HTTP/1.1" 404 9420 "https://m243.mydomain.com/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" "-"
80.229.148.211 - - [24/Mar/2022:22:16:25 +0000] "GET /pub/media/content/banner_inks.gif HTTP/1.1" 200 12146 "https://m243.mydomain.com/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" "-"
80.229.148.211 - - [24/Mar/2022:22:16:25 +0000] "GET /pub/media/content/banner_roller.jpg HTTP/1.1" 200 31981 "https://m243.mydomain.com/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" "-"
80.229.148.211 - - [24/Mar/2022:22:16:54 +0000] "GET /frontend/a1/hawthorn/en_GB/mage/requirejs/mixins.js HTTP/1.1" 404 9450 "https://m243.mydomain.com/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" "-"
80.229.148.211 - - [24/Mar/2022:22:16:57 +0000] "GET /frontend/a1/hawthorn/en_GB/images/logo_white_black_on_clear_crop.svg HTTP/1.1" 404 9422 "https://m243.mydomain.com/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" "-"
80.229.148.211 - - [24/Mar/2022:22:16:59 +0000] "GET /frontend/a1/hawthorn/en_GB/css/print.css HTTP/1.1" 404 9421 "https://m243.mydomain.com/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" "-"
80.229.148.211 - - [24/Mar/2022:22:17:19 +0000] "GET /frontend/a1/hawthorn/en_GB/requirejs-config.js HTTP/1.1" 404 9434 "https://m243.mydomain.com/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" "-"
80.229.148.211 - - [24/Mar/2022:22:17:38 +0000] "GET /favicon/stores/1/favicon.png HTTP/1.1" 404 9389 "https://m243.mydomain.com/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:98.0) Gecko/20100101 Firefox/98.0" "-"
Even though I know I shouldn’t need to in dev mode I force deployed the static content (since it wasn’t showing up in pub/static) with:
bin/magento setup:static-content:deploy en_GB --exclude-theme Magento/luma --exclude-theme Magento/blank -f
And I can see the files then written in their respective directories e.g. (from the magento home dir)
$ ls -al pub/static/frontend/a1/hawthorn/en_GB/css/
total 612
drwxrwxr-x 2 magento nginx 127 Mar 24 21:26 .
drwxrwxr-x 96 magento nginx 4096 Mar 24 21:26 ..
-rw-rw-r-- 1 magento nginx 18371 Mar 24 21:26 email.css
-rw-rw-r-- 1 magento nginx 4965 Mar 24 21:25 email-fonts.css
-rw-rw-r-- 1 magento nginx 14797 Mar 24 21:26 email-inline.css
-rw-rw-r-- 1 magento nginx 5465 Mar 24 21:25 print.css
-rw-rw-r-- 1 magento nginx 124412 Mar 24 21:25 styles-l.css
-rw-rw-r-- 1 magento nginx 437701 Mar 24 21:26 styles-m.css
I’ve ensured all permissions are readable by the web server group (nginx) and ownership set running this from the magento root dir:
sudo chown -R magento:nginx ./
This is my nginx.conf:
# For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
client_max_body_size 200M;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
include /etc/nginx/conf.d/*.conf;
# For multiple (Magento2) php-fpm sites
upstream fastcgi_backend {
server unix:/run/php-fpm/php-fpm.sock;
}
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
root /usr/share/nginx/html;
client_max_body_size 200M;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
client_max_body_size 200M;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
include sites-enabled/*.conf;
server_names_hash_bucket_size 64;
}
This is my vhost:
server {
server_name mydomain.com www.mydomain.com m243.mydomain.com;
#index index.html;
#root /var/www/test;
set $MAGE_ROOT /var/www/hpm;
include /var/www/hpm/nginx.conf.sample;
#location ^/le_connector/connector.php {
# allow all;
# satisfy any;
#}
# Load configuration files for the default server block.
#include /etc/nginx/default.d/*.conf;
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/m243.mydomain.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/m243.mydomain.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
if ($host = www.mydomain.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = mydomain.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = m243.mydomain.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
server_name mydomain.com www.mydomain.com m243.mydomain.com;
return 404; # managed by Certbot
}
This is my nginx.conf.sample
root $MAGE_ROOT/pub;
index index.php;
autoindex off;
charset UTF-8;
error_page 404 403 = /errors/404.php;
#add_header "X-UA-Compatible" "IE=Edge";
# Deny access to sensitive files
location /.user.ini {
deny all;
}
# PHP entry point for setup application
location ~* ^/setup($|/) {
root $MAGE_ROOT;
location ~ ^/setup/index.php {
fastcgi_pass fastcgi_backend;
fastcgi_param PHP_FLAG "session.auto_start=off n suhosin.session.cryptua=off";
fastcgi_param PHP_VALUE "memory_limit=756M n max_execution_time=600";
fastcgi_read_timeout 600s;
fastcgi_connect_timeout 600s;
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";
}
}
# PHP entry point for update application
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$is_args$args;
}
location /pub/ {
location ~ ^/pub/media/(downloadable|customer|import|custom_options|theme_customization/.*.xml) {
deny all;
}
alias $MAGE_ROOT/pub/;
add_header X-Frame-Options "SAMEORIGIN";
}
location /static/ {
# Uncomment the following line in production mode
# expires max;
# Remove signature of the static files that is used to overcome the browser cache
location ~ ^/static/versiond*/ {
rewrite ^/static/versiond*/(.*)$ /static/$1 last;
}
location ~* .(ico|jpg|jpeg|png|gif|svg|svgz|webp|avif|avifs|js|css|eot|ttf|otf|woff|woff2|html|json|webmanifest)$ {
add_header Cache-Control "public";
add_header X-Frame-Options "SAMEORIGIN";
expires +1y;
if (!-f $request_filename) {
rewrite ^/static/(versiond*/)?(.*)$ /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/(versiond*/)?(.*)$ /static.php?resource=$2 last;
}
}
if (!-f $request_filename) {
rewrite ^/static/(versiond*/)?(.*)$ /static.php?resource=$2 last;
}
add_header X-Frame-Options "SAMEORIGIN";
}
location /media/ {
## The following section allows to offload image resizing from Magento instance to the Nginx.
## Catalog image URL format should be set accordingly.
## See https://docs.magento.com/user-guide/configuration/general/web.html#url-options
# location ~* ^/media/catalog/.* {
#
# # Replace placeholders and uncomment the line below to serve product images from public S3
# # See examples of S3 authentication at https://github.com/anomalizer/ngx_aws_auth
# # resolver 8.8.8.8;
# # proxy_pass https://<bucket-name>.<region-name>.amazonaws.com;
#
# set $width "-";
# set $height "-";
# if ($arg_width != '') {
# set $width $arg_width;
# }
# if ($arg_height != '') {
# set $height $arg_height;
# }
# image_filter resize $width $height;
# image_filter_jpeg_quality 90;
# }
try_files $uri $uri/ /get.php$is_args$args;
location ~ ^/media/theme_customization/.*.xml {
deny all;
}
location ~* .(ico|jpg|jpeg|png|gif|svg|svgz|webp|avif|avifs|js|css|eot|ttf|otf|woff|woff2)$ {
add_header Cache-Control "public";
add_header X-Frame-Options "SAMEORIGIN";
expires +1y;
try_files $uri $uri/ /get.php$is_args$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$is_args$args;
}
add_header X-Frame-Options "SAMEORIGIN";
}
location /media/customer/ {
deny all;
}
location /media/downloadable/ {
deny all;
}
location /media/import/ {
deny all;
}
location /media/custom_options/ {
deny all;
}
location /errors/ {
location ~* .xml$ {
deny all;
}
}
# PHP entry point for le_connector application
location /le_connector {
root $MAGE_ROOT;
location ~ ^/le_connector/connector.php {
### This fixes the problem:
fastcgi_split_path_info ^(.+?.php)(/.*)$;
################################
fastcgi_pass fastcgi_backend;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
location ~ ^/le_connector/(?!pub/). {
deny all;
}
location ~ ^/le_connector/pub/ {
add_header X-Frame-Options "SAMEORIGIN";#
}
}
# PHP entry point for main application
location ~ ^/(index|info|connector|get|static|errors/report|errors/404|errors/503|health_check).php$ {
try_files $uri =404;
fastcgi_pass fastcgi_backend;
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
fastcgi_param PHP_FLAG "session.auto_start=off n suhosin.session.cryptua=off";
fastcgi_param PHP_VALUE "memory_limit=756M n max_execution_time=18000";
fastcgi_read_timeout 600s;
fastcgi_connect_timeout 600s;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
#pass multi-site variables
fastcgi_param MAGE_RUN_TYPE $MAGE_RUN_TYPE;
fastcgi_param MAGE_RUN_CODE $MAGE_RUN_CODE;
include fastcgi_params;
}
gzip on;
gzip_disable "msie6";
gzip_comp_level 6;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_proxied any;
gzip_types
text/plain
text/css
text/js
text/xml
text/javascript
application/javascript
application/x-javascript
application/json
application/xml
application/xml+rss
image/svg+xml;
gzip_vary on;
# Banned locations (only reached if the earlier PHP entry point regexes don't match)
location ~* (.php$|.phtml$|.htaccess$|.git) {
deny all;
}
Any ideas would be really appreciated – thanks for reading!
2
Answers
So it turned out in my flailing around to fix other issues I'd set these values mistakenly:
Clearing these with
sorted out the problem :)