Magento 2.4 on Nginx cannot find CSS and JS files - nginx

Been trying for 3 days now but I cannot get it to work. I succesfully installed Magento and everything but when I go to the website all CSS and JS files cannot be found.
When I look in the request it always have /versionxxxxx/ in the url so probably the rewrites are not setup properly.
I tried adding this code to my server block:
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\d*/)?(.*)$ /static/$2 last;
}
location ~* \.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2|html|json)$ {
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";
}
but unfortunately all files still return a 404 not found.
An example file:
/pub/static/version1600350960/frontend/Magento/luma/en_US/requirejs/require.js
the file does exist on my FTP in the correct directory, but the "version" name is not in the directory.
Can anyone please help me out as I am clueless on how to fix this in NGINX.

Related

Exception for Nginx Rewrite

I rewrite all requests to an index.php file in Nginx. If i try now to use my AWStats folder i can't see any icons or images because of the rewrite.
if (!-e $request_filename){
rewrite ^\/(.+)$ /index.php?code=$1 last;
}
location /stats/ {
index index.html index.php;
auth_basic "Members Only";
auth_basic_user_file /var/www/clients/client1/web6/web//stats/.htpasswd_stats;
add_header Content-Security-Policy "default-src * 'self' 'unsafe-inline' 'unsafe-eval' data:;";
}
location ^~ /awstats-icon {
alias /usr/share/awstats/icon;
}
}
So normally i would wrap it in a location like
location /{
if (!-e $request_filename){
rewrite ^\/(.+)$ /index.php?altum=$1 last;
}
Followed by
location /stats/ {
# Example
}
But this is for some reason not working, Nginx would not start anymore after this. I hope someone could see my mistake.

URL from Origin has been blocked by CORS policy when Access-Control-Allow-Origin is set

I have a site that is requesting static files from a CDN. Many of the files are able to be used on the site, but some are being blocked by a CORS policy.
It's blocking html, json, woff, and woff2 files, but letting all other files by, including js, css, jpg and others.
It's a Magento 2 site using nginx. Here is the nginx.conf file where I have added the Access-Control-Allow-Origin:
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";
include /etc/nginx/magento2-cors.conf;
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";
include /etc/nginx/magento2-cors.conf;
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";
include /etc/nginx/magento2-cors.conf;
}
And here is magento2-cors.conf:
add_header 'Access-Control-Allow-Origin' '*' 'always';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*' 'always';
add_header 'Access-Control-Allow-Headers' 'x-requested-with' 'always';
add_header 'Access-Control-Max-Age' 86400 'always';
add_header 'Content-Length' 0 'always';
return 204;
}
What I don't get is why will CORS block some of the files and not others. All files are coming in through the same CDN. They are all coming from the static directory, which is what the above nginx.conf is referencing. js and css are apart of the same block as html and woff, but they aren't being blocked while html and woff are.
I've flushed browser cache and magento cache. I've restarted nginx multiple times, nothing seems to work.
Instead of using the include, see if putting
add_header Access-Control-Allow-Origin *;
without any if statement around it does the trick.
Try it after this line
location ~* \.(ico|jpg|jpeg|png|gif|svg|svgz|webp|avif|avifs|js|css|eot|ttf|otf|woff|woff2|html|json|webmanifest)$ {
You can also try putting the fonts in a subdirectory (ie: fonts) and see if that improves your situation.
If that doesn't work, try putting the * origin header immediately after
location /static/ {
Best of luck!

How to add expire header in nginx?

We have added expire header in /etc/nginx/site-available/default, but not reflecting in gtmatrix/google speed, we also check with curl website.
Please check our code below,
server {
root /var/www/html;
location / {
index index.php index.html;
try_files $uri $uri/ #handler;
}
location /. {
return 404;
}
location #handler {
rewrite / /index.php;
}
location ~ .php/ {
rewrite ^(.*.php)/ $1 last;
}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
location ~ \.php$ {
if (!-e $request_filename) {
rewrite / /index.php last;
}
include snippets/fastcgi-php.conf;
# With php7.0-cgi alone:
#fastcgi_pass 127.0.0.1:9000;
# With php7.0-fpm:
fastcgi_read_timeout 20000;
fastcgi_pass unix:/run/php/php7.0-fpm.sock;
#fastcgi_param PHP_VALUE "memory_limit = -1";
}
location ~* .(js|jpg|jpeg|gif|png|css|tgz|gz|rar|bz2|doc|pdf|ppt|tar|wav|bmp|rtf|swf|ico|flv|txt|woff|woff2|svg)$ {
expires 30d;
add_header Pragma "public";
add_header Cache-Control "public";
}
}
Thanks in advance!
Can you try with an additional backslash?
location ~* \.(js|jpg|jpeg|gif|png|css|tgz|gz|rar|bz2|doc|pdf|ppt|tar|wav|bmp|rtf|swf|ico|flv|txt|woff|woff2|svg)$ {
expires 30d;
add_header Pragma "public";
add_header Cache-Control "public";
}
Also, you may want to split the block in order to use gzip off when it makes sense.
Best regards,

NGINX: search file in subdirectories

Part of nginx config:
location = / {
root www/html;
try_files $uri $uri/ $uri.html;
}
location ~* \.(jpg|jpeg|png)$ {
root www/resources/img;
try_files $uri $uri/;
#autoindex on;
expires 1y;
add_header Cache-Control public;
}
location ~* \.(css)$ {
root www/resources/css;
expires 1y;
add_header Cache-Control public;
}
location ~* \.(js)$ {
root www/resources/js;
expires 1y;
add_header Cache-Control public;
}
In directory www/resources/img I have 1 image file 1.jpg and 1 subfolder which contain another file 2.jpg. So, if I do request like localhost/1.jpg I get my image, but if I do request localhost/2.jpg it returns 404 not found. How to setup nginx to search file in subfolders?
Try changing below block of code, for if the file not found in root, find it in /subfolder/$uri,
location ~* \.(jpg|jpeg|png)$ {
root www/resources/img;
try_files $uri /subfolder/$uri $uri/;
#autoindex on;
expires 1y;
add_header Cache-Control public;
}
Switch your error_log on, to see which file is being accessed, and you might correct from their as well.

config nginx to access index and spec_runner pages

index.html page could access, but not spec_runner.html.I want to access two different pages, one for app, another for tests. Could you help me? thanks, :).My configure is following
location ^~ /p/login { rewrite .* /index.html last; }
location ^~ /specs { index spec_runner.html; }
location ~* ^/(users|books) {
proxy_pass http://api;
}
location / {
root /home/user/project;
proxy_cache off;
expires -1;
add_header Cache-Control no-cache;
add_header Cache-Control private;
}

Resources