Issue Magento 2 nginx sample file and css / js not loading

samson · Nov 28, 2021

Hi,

I have an issue with the css & js not loading in magento 2.
I want to know the correct method to add the magento nginx.conf.sample.
I've tried adding it to the additional directives, but plesk states there are duplicate directives.
Also tried
/var/www/vhosts/system/staging.stormtight.co.uk/conf/magento.conf
to include

upstream fastcgi_backend {

server unix:/run/php-fpm/php-fpm.sock;

}

server {

listen 80;

server_name www.stormtight.co.uk;

set $MAGE_ROOT /var/www/vhosts/stormtight.co.uk/staging;

include /var/www/vhosts/stormtight.co.uk/staging/nginx.conf.sample;

}

also tried adding the above to
/var/www/vhosts/system/staging.stormtight.co.uk/conf/vhost_nginx.conf

On another domain the following is added to the additional directives and the css & js load fine

set $MAGE_ROOT "/var/www/vhosts/stormtight.co.uk/staging/";

index index.php;

error_page 404 403 = /errors/404.php;

access_log "/var/www/vhosts/system/staging.stormtight.co.uk/logs/proxy_access_ssl_log";

error_log "/var/www/vhosts/system/staging.stormtight.co.uk/logs/proxy_error_log";

location ~ ^/setup {

root $MAGE_ROOT;

location ~ ^/setup/index.php(/.*)?$ {

fastcgi_pass "unix:///var/www/vhosts/system/staging.stormtight.co.uk/php-fpm.sock";

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;

}

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_pass "unix:///var/www/vhosts/system/staging.stormtight.co.uk/php-fpm.sock";

fastcgi_index index.php;

fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

fastcgi_param PATH_INFO $fastcgi_path_info;

}

# Deny everything but index.php

location ~ ^/update/(?!pub/). {

deny all;

}

location ~ ^/update/pub/ {

add_header X-Frame-Options "SAMEORIGIN";

}

if (!-e $request_filename){ rewrite ^(/.*)(/.+)$ /index.php$is_args$args last; }

}

location @fallback {

return 404;

}

#location / { try_files $uri $uri/ /index.php$is_args$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/ {

# 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/version { rewrite ^/static/(version[^/]+/)?(.*)$ /static/$2 last; }

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;

log_not_found off;

access_log off;

add_header ETag "";

add_header Access-Control-Allow-Origin "www.staging.stormtight.co.uk, cdn.staging.stormtight.co.uk";

if (!-f $request_filename) { rewrite ^/static/?(.*)$ /static.php?resource=$1 last; }

}

location ~ ^/(.*\.(zip|gz|gzip|bz2|csv|xml))$ {

add_header Cache-Control "no-store";

add_header X-Frame-Options "SAMEORIGIN";

expires off;

log_not_found off;

access_log off;

add_header ETag "";

add_header Access-Control-Allow-Origin "www.staging.stormtight.co.uk, cdn.staging.stormtight.co.uk";

if (!-f $request_filename) { rewrite ^/static/?(.*)$ /static.php?resource=$1 last; }

}

if (!-f $request_filename) { rewrite ^/static/?(.*)$ /static.php?resource=$1 last; }

add_header X-Frame-Options "SAMEORIGIN";

}

location /media/ {

try_files $uri $uri/ /get.php$is_args$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;

log_not_found off;

access_log off;

add_header ETag "";

add_header Access-Control-Allow-Origin "www.staging.stormtight.co.uk, cdn.staging.stormtight.co.uk";

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;

log_not_found off;

access_log off;

add_header ETag "";

add_header Access-Control-Allow-Origin "www.staging.stormtight.co.uk, cdn.staging.stormtight.co.uk";

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 ~ (index|get|static|report|404|503|health_check)\.php(/.*)?$ {

try_files $uri =404;

add_header X-Config-By 'ProTech' always;

add_header X-Processing-Time $request_time always;

add_header X-Request-ID $request_id always;

add_header X-UA-Compatible 'IE=Edge,chrome=1';

add_header Link "<$scheme://$http_host$request_uri>; rel=\"canonical\"" always;

fastcgi_param PATH_INFO $fastcgi_path_info;

fastcgi_pass "unix:///var/www/vhosts/system//php-fpm.sock";

fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

fastcgi_index index.php;

fastcgi_buffers 1024 4k;

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 1800s;

fastcgi_connect_timeout 1800s;
}

Please help, I'm completely at wits end with this.

Kind regards,

Simon

WebHostingAce · Nov 30, 2021

Please don't edit the configuration files. There is no need for it.

Apache & nginx Settings >

Un-tick the Proxy mode under nginx settings

In 'Additional nginx directives',

Code:

set $MAGE_ROOT "/var/www/vhosts/domain.tld/httpdocs/pub";
set $MAGE_MODE default; # or production or developer
index index.php;
autoindex off;
charset UTF-8;
error_page 404 403 = /errors/404.php;
#add_header "X-UA-Compatible" "IE=Edge";

# PHP entry point for setup application
location /setup {
    root $MAGE_ROOT;
    location ~ ^/setup/index.php {

        ### This fixes the problem:
        fastcgi_split_path_info ^(.+?\.php)(/.*)$;
        ################################

        #  fastcgi_pass   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";
    }
}

# PHP entry point for update application
location ~* ^/update($|/) {
    root $MAGE_ROOT;

    location ~ ^/update/index.php {
        fastcgi_split_path_info ^(/update/index.php)(/.+)$;
        #    fastcgi_pass   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;
    }

    # Remove signature of the static files that is used to overcome the browser cache
    location ~ ^/static/version {
        rewrite ^/static/(version\d*/)?(.*)$ /static/$2 last;
    }

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

# PHP entry point for main application
location ~ (index|get|static|report|404|503)\.php$ {
    try_files $uri =404;
    # fastcgi_pass   backend;
    fastcgi_buffers 1024 4k;

    fastcgi_param  PHP_FLAG  "session.auto_start=off \n suhosin.session.cryptua=off";
    fastcgi_param  PHP_VALUE "memory_limit=768M \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;
}

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$|\.htaccess$|\.git) {
    deny all;
}

In the above code, Please change the domain.tld to your domain name.

In Hosting Settings make sure you have set the Document root * to httpdocs/pub

WebHostingAce · Nov 30, 2021

As per Magento 2 recommended caching method is Varnish, I'd still recommend to use NGINX > Varnish > Apache setup

You can find my Varnish configuration post in Input - Magento 2 | Plesk | Varnish Setup in a Docker

samson · Dec 2, 2021

Thanks for providing your directives, however, I can't change the document root to include pub, as I've already installed and upgraded magento to 2.4.3
Don't really want to uninstall the app.
Prefer to do like magento advise, but plesk seems to ignore the file at /var/www/vhosts/system/staging.stormtight.co.uk/conf/magento.conf

WebHostingAce · Dec 2, 2021

I've already installed and upgraded magento to 2.4.3
Don't really want to uninstall the app.

You don't have to uninstall or re-install Magento 2. Magento 2 works in pub folder.

As I mentioned in the previous post. You do not have to create/edit any Plesk configurable files for this.

Plesk and Magento 2 works REALLY WELL.

Thanks to Plesk we have do not have any complications with Running Magento 2

samson · Dec 2, 2021

In Hosting Settings make sure you have set the Document root * to httpdocs/pub ---- This area is greyed out, stating once the application is installed it can't be updated.

My css & js are loading without the pub directory and hence why they are not showing correctly.

Magento state the following "When used in your server block that defines your site, the nginx.conf.sample configuration overrides your server’s docroot settings to serve files from Magento’s pub/ directory."

WebHostingAce · Dec 2, 2021

samson said:
In Hosting Settings make sure you have set the Document root * to httpdocs/pub ---- This area is greyed out, stating once the application is installed it can't be updated.

I'm not sure about this. This has never happened to me.

samson said:
My css & js are loading without the pub directory and hence why they are not showing correctly.

Magento 2 works without the pub folder.

samson said:
Magento state the following "When used in your server block that defines your site, the nginx.conf.sample configuration overrides your server’s docroot settings to serve files from Magento’s pub/ directory."

Magento 2 has provided this nginx.conf.sample for as an example.

bulent · Dec 3, 2021

@WebHostingAce thanks for your advice. I have tried the above, worked well for me.
Is there any way to benefit from nginx caching mechanism in plesk?
I am using proxmox container and I cant use docker in it. May be I will install varnish in another container.

WebHostingAce · Dec 3, 2021

bulent said:
Is there any way to benefit from nginx caching mechanism in plesk?

I wouldn't recommend this unless you do the proper configuration for default Plesk NGINX cache. There are some pages should not cache. eg - checkout page., customer login page etc..

samson · Dec 16, 2021

I finally got it working.

cp /usr/local/psa/admin/conf/templates/default/domain/nginxDomainVirtualHost.php /usr/local/psa/admin/conf/templates/custom/domain/

add new nginxDomainVirtualHost.php attached

/usr/local/psa/admin/sbin/httpdmng --reconfigure-all

vi /etc/nginx/conf.d/magento.conf

upstream fastcgi_backend {

server unix:/run/php/php7.4-fpm.sock;

}

add nginx additional directives attached

This works for new

Plesk Obsidian
Version 18.0.40

where the change hosting root to pub is greyed out. works without adding the /pub

WebHostingAce · Dec 16, 2021

where the change hosting root to pub is greyed out. works without adding the /pub

How did you install Magento? Using Composer Install?

samson · Dec 16, 2021

Composer for magento 2.4.2 using composer 1, then composer 2 for magento 2.4.3

samson · Jan 17, 2022

I just tried to upgrade magento to 2.4.3 using the same as above on another domain and this time the duplicate "/" was stated in additional directives.
I commented out location section as shown below.
#location / {
# try_files $uri $uri/ /index.php**?$args**;
#}

telmchen · Apr 22, 2022

This is not correct that you need to make a vhost template you could just add (if your document root is already set to 'domain_name/pub'), to the 'Additional nginx directives' in Domain Setup

It will turn on 'Brotli' compression too.

I am still testing the setting, so far it works OK and we have a lot 3rd Party Extensions too!

---------------

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 /var/www/vhosts/xxxxx/httpdocs;
location ~ ^/setup/index.php {
fastcgi_param PHP_FLAG "session.auto_start=off \n suhosin.session.cryptua=off";
fastcgi_param PHP_VALUE "memory_limit=10G \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 /var/www/vhosts/xxxxx/httpdocs;

location ~ ^/update/index.php {
fastcgi_split_path_info ^(/update/index.php)(/.+)$;
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 /var/www/vhosts/xxxxx/httpdocs {
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 /var/www/vhosts/xxxxx/httpdocs/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/version\d*/ {
rewrite ^/static/version\d*/(.*)$ /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/(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/ {

## The following section allows to offload image resizing from Magento instance to the Nginx.
## Catalog image URL format should be set accordingly.
## See Web | Adobe Commerce 2.4 User Guide
# location ~* ^/media/catalog/.* {
#
# # Replace placeholders and uncomment the line below to serve product images from public S3
# # See examples of S3 authentication at GitHub - anomalizer/ngx_aws_auth: nginx module to proxy to authenticated AWS services
# # 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 main application
location ~ ^/(index|get|static|errors/report|errors/404|errors/503|health_check)\.php$ {
try_files $uri =404;
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=10G \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;
include fastcgi_params;
}
brotli on;
brotli_comp_level 6;
brotli_types text/xml image/svg+xml application/x-font-ttf image/vnd.microsoft.icon application/x-font-opentype application/json font/eot application/vnd.ms-fontobject application/javascript font/otf application/xml application/xhtml+xml text/javascript application/x-javascript text/plain application/x-font-truetype application/xml+rss image/x-icon font/opentype text/css image/x-win-bitmap;

gzip on;
gzip_vary 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;
proxy_buffering on;
proxy_buffer_size 128k;
proxy_buffers 4 256k;
proxy_busy_buffers_size 256k;

# Banned locations (only reached if the earlier PHP entry point regexes don't match)
location ~* (\.php$|\.phtml$|\.htaccess$|\.git) {
deny all;
}

Issue Magento 2 nginx sample file and css / js not loading

samson

New Pleskian

WebHostingAce

Silver Pleskian

WebHostingAce

Silver Pleskian

samson

New Pleskian

WebHostingAce

Silver Pleskian

samson

New Pleskian

WebHostingAce

Silver Pleskian

bulent

Regular Pleskian

WebHostingAce

Silver Pleskian

samson

New Pleskian

Attachments

WebHostingAce

Silver Pleskian

samson

New Pleskian

samson

New Pleskian

telmchen

New Pleskian

Similar threads