Hosting Magento with Nginx getting 500 error on static files

Question

I am currently upgrading an Magento 2.3.5 site to 2.4.4. Everything seems to going well and I have the site running in local on Docker (using Lando.dev) with nginx and the Magento nginx.conf.sample.

The staging site is an vanilla ec2 instance running Ubuntu 22.04 LTS.

I have attempted to setup a staging site for client to view using the same configuration nginx.conf, modifying the root and alias, but I can't seem to access the static files.

I have attempted and reattempted the deploy procedures for Magento

rm -rf generated/metadata/* generated/code/* pub/static/* var/cache/* var/page_cache/* var/view_preprocessed/*

php bin/magento deploy:mode:set production --skip-compilation
# php bin/magento deploy:mode:set developer
# php bin/magento setup:db-declaration:generate-whitelist
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy en_US en_AU

php bin/magento indexer:reset
php bin/magento cache:flush
php bin/magento cache:enable
php bin/magento maintenance:disable

echo "Site is live. Setting permissions . . ."
find . -not -path "./var/*" -not -path "./pub/media/*" -type d -exec chmod 2750 {} \;
find . -not -path "./var/*" -not -path "./pub/media/*" -type f -exec chmod 640 {} \;
find ./var -type d -exec chmod 2770 {} \;
find ./var -type f -exec chmod 660 {} \;
find ./pub/media -type d -exec chmod 2770 {} \;
find ./pub/media -type f -exec chmod 660 {} \;
find . -type f -name "*.php" -exec chmod 750 {} \;
chmod 770 ./app/etc/config.php ./app/etc/env.php
chmod u+x ./bin/magento

echo "And we are Done. . ."

I seem to keep getting 500 error for all static files

I have noticed a differential in the filename between my local and hosted staging

Local Filename is: filename /static/version1666144602/adminhtml/Magento/backend/en_AU/requirejs/require.js

Hosted Filename is: filename /version1666237173/frontend/Magento/luma-whitesgroup/en_AU/requirejs/require.js

not sure why the static folder is missing from the name?

Here is the nginx section for static on the hosted site:

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

** Another point is that the hosted site is using nginx 1.18 and my local is 1.17. I don't believe that should be a problem but I am unable to test the difference.

If you need any more info, I can provide. I appreciate any and all help provided.

Answer 1

The nginx section for static in nginx.conf file looks fine, and I total agree with you that your issue does not related to nginx version.

Looks like your pub/static and var/view_preprocessed didn't set the correct permissions so it caused 500 error on static files.

First, check if your static files exists in pub/static folder or not?

Then do the following steps to try resolve your issue:

1. Run the below command to set write permissions:

find pub/static var/view_preprocessed \( -type d -or -type f \) -exec chmod g+w {} 

2. Deploy static content:

php bin/magento setup:static-content:deploy en_US en_AU

3. After that, run the following command to set read-only permissions:

find pub/static var/view_preprocessed \( -type d -or -type f \) -exec chmod g-w {}

You can read more about set file system permissions on Magento document: https://experienceleague.adobe.com/docs/commerce-operations/configuration-guide/deployment/file-system-permissions.html

Answer 2

OK I was so frustrated with this I was throwing things at the wall to see what would stick and I got it working. Just not 100% what fixed it but will give some insights.

I believe the first thing was the core_config_data table that had the first issue, relating to the secure and non secure base_urls. this corrected the first issue of the 400 error and not seeing the static/ folder in the url.

Now I was seeing that, I was still getting a 404 but progress. Next I updated the Nginx file to the below and Boomshakalaka I had it. Thanks tu-van for the input

https://gist.github.com/robewilde/cf11ff6832cb5c2a408d3af0ca7e5fdf