nginx browser caching leads to 404 on static assets

It sounds like the issue you're encountering is not directly related to browser caching, but rather to the location block configuration in your Nginx setup. The location directive you've added may be interfering with the way Laravel serves static files, particularly if you're using a tool like Laravel Mix that versionizes your assets.

Here's a revised configuration that you can try, which includes a fallback to the index.php script for any requests that don't match a static file. This is important for Laravel applications because the front controller pattern requires all requests that don't correspond to a physical file to be routed through index.php.

# browser caching of static assets
location ~* \.(jpg|jpeg|png|gif|ico|css|js|pdf|ttf)$ {
    expires 365d;
    try_files $uri $uri/ /index.php?$query_string;
}

# Pass all .php files onto a php-fpm/php-cgi server.
location ~ \.php$ {
    # existing php handling here
}

# Any location block for your Laravel root, for example:
location / {
    try_files $uri $uri/ /index.php?$query_string;
}

The try_files directive is crucial here. It tells Nginx to attempt to serve the requested file directly ($uri), and if it doesn't exist, to fallback to the next parameter (/index.php?$query_string). This ensures that if a static file is not found (like a versioned asset that has been updated), the request will still be routed through Laravel's router, which can handle the request appropriately.

Make sure to reload or restart Nginx after making these changes to apply them:

sudo systemctl reload nginx

or

sudo service nginx reload

If you're using Laravel Mix and versioning your assets, ensure that you're referencing the versioned asset names in your views with the mix() helper function. This function automatically appends the correct version query string to your asset URLs, which is necessary for cache busting when you deploy new versions of your assets.

<script src="{{ mix('js/app.js') }}"></script>

This setup should help you avoid 404 errors on your static assets while still benefiting from browser caching. If you continue to experience issues, you may need to check your server's error logs for more specific information about the 404 errors.