☰

Agregar un bloque de ubicación a los archivos de caché hace que esos archivos devuelvan 404

tag-icon • tag-icon nginx cache
Agregar un bloque de ubicación a los archivos de caché hace que esos archivos devuelvan 404

Quiero almacenar en caché algunos archivos estáticos usando Nginx. Pero de alguna manera no puedo hacerlo funcionar.

Este es mi nginx.conf:

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    worker_connections 768;
    #multi_accept on;
}


http {

    #GZIP
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 256;
    gzip_types application/javascript application/json application/ld+json application/xml font/eot font/otf font/ttf text/css text/javascript text/plain text/xml;

    # SERVERS
    server {
            listen      80;

        server_name example.com;
        if ($http_host ~* ^www\.(.*)$ )
        {
            return 301 https://$1$request_uri;
        }

        return 301 https://$http_host$request_uri;
    }
    server {
        listen 443 ssl;

        if ($http_host ~* ^www\.(.*)$ )
        {
            return 301 $scheme://$1$request_uri;
        }


        #SSL
        ssl_certificate /root/.acme.sh/example.com/fullchain.cer;
        ssl_certificate_key /root/.acme.sh/example.com/example.com.key;

        server_name example.com;

        # Pass all traffic to my webapplication
        location / {
            proxy_set_header Host $host;
            proxy_pass http://localhost:8080;
        }

        #Browser caching
        location ~* \.(js|css)$ {
            expires 180d;
            add_header Pragma "public";
            add_header Cache-Control "public";
        }
        location ~* \.(jpg|jpeg|png|webp|woff|woff2|ttf)$ {
            expires 365d;
            add_header Pragma "public";
            add_header Cache-Control "public";
        }

    }
}

El problema radica en la parte "Almacenamiento en caché del navegador". Al habilitar este bloque de código, mi sitio se carga, pero todos los archivos css, archivos javascript e imágenes devuelven un 404. Es como si esos archivos ignoraran mi archivo location /.

Pude resolver este problema copiando/pegando

proxy_set_header Host $host;
proxy_pass http://localhost:8080;

en todos mis locationbloques, pero eso no es realmente elegante y, de hecho, hizo que mi sitio pareciera mucho más lento...

También intenté mover los dos locationbloques para el almacenamiento en caché del navegador en el bloque location \para que este último actuara como "padre". Pero eso no afectó el comportamiento de las imágenes, etc. que devolvieron 404.

¿Cómo configuraría el almacenamiento en caché de archivos estáticos en Nginx?

Editar: Agregué lo siguiente a mi httpbloque:

  map $uri $cache_control {
                ~/Website/assets/media/images    "public, no-transform";
        }
        map $uri $expire {
            ~/Website/assets/media/images   365d;
        }

Agregué lo siguiente a mi serverbloque:

 expires $expire;
                add_header Cache-Control $cache_control;

No se almacena nada en caché.

Respuesta1

Si no puede servir sus activos estáticos directamente desde el sistema de archivos a través de nginx como sugiere @TeroKilkanen, puede usar una técnica similar a la que se muestra enesterespuesta:

map $uri $expire {
    ~\.(?:j|cs)s$                      180d;
    ~\.(?:jpe?g|png|webp|woff2?|ttf)$  365d;
    default                            off;
}
map $uri $cache_control {
    ~\.(?:js|css|jpe?g|png|webp|woff2?|ttf)$  public;
}
server {
    ...
    expires $expire;
    add_header Pragma $cache_control;
    add_header Cache-Control $cache_control;
    ...
}

Si el URI de su solicitud no coincide con la expresión regular, $cache_controlla variable tendrá un valor vacío y nginx no agregará Pragmaningún Cache-Controlencabezado a su respuesta.

Respuesta2

En realidad, esto no responde a su pregunta, pero muestra una forma preferida de servir activos estáticos con nginx.

Dado que parece que está ejecutando la aplicación web en el mismo host, le recomiendo que entregue los archivos estáticos directamente usando nginx.

root /path/to/webroot;

location ~* \.(js|jss)$ {
    expires 180d;
    add_header Pragma "public";
    add_header Cache-Control "public;

    try_files $uri =404;
}

location ~* \.(jpg|jpeg|png|webp|woff|woff2|ttf)$ {
    expires 365d;
    add_header Pragma "public";
    add_header Cache-Control "public";

    try_files $uri =404;
}

Éste todavía tiene definiciones duplicadas para el almacenamiento en caché. Puede eliminar parte de la duplicación especificando directivas en un archivo separado y usando includepara incluir el archivo en su configuración.

Debe ingresar lo siguiente para proxy_header.confpresentar:

add_header Pragma "public";
add_header Cache-Control "public";

Y en tu configuración:

location ~* ... {
    include /path/to/webroot;
    expires 365d;
}

información relacionada