Configuración de encabezados http para caché con servidor brillante & nginx

He implementado una aplicación brillante, corriendo con un servidor brillante en AWS. Un servidor nginx envía solicitudes al puerto del servidor brillante 3838.

Al revisar Google Page Speed Insights (https://developers.google.com/speed/pagespeed/insights/), veo que algunas imágenes (formato de goteo) en mi página no están caché, y que esto ralentiza la carga de mi página.

Traté de establecer caché en nginx, como se describe Aquí., añadiendo las siguientes líneas a mi configuración del servidor nginx:

location ~* \.(js|webp|png|jpg|jpeg|gif)$ {
    expires 365d;
    add_header Cache-Control "public, no-transform"; 
}

Sin embargo, esto tenía la consecuencia de que mis imágenes ya no se encuentran al acceder al sitio web.

  1. ¿Es correcto que tengo que habilitar el caché en nginx y no en algún lugar en un servidor brillante?
  2. Si es así, ¿qué pasa con la solución anterior?

Aquí está el archivo conf de nginx sin ninguna adición:

server {
    listen 80;
    listen [::]:80;
    # redirect all HTTP requests to HTTPS with a 301 Moved Permanently response.
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    # Reverse proxy
    location / {
        proxy_pass http://localhost:3838/climate-justice/;
        proxy_redirect http://localhost:3838/climate-justice/ $scheme://$host/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_read_timeout 20d;
        proxy_buffering off;
    }

# OCSP stapling
ssl_stapling on;
ssl_stapling_verify on;

}

Pregunta hecha hace 3 años, 4 meses, 25 días - Por codechampionx

3 Respuestas:

  • Lo resolvió con la ayuda de las siguientes instrucciones: https://www.digitalocean.com/community/tutorials/how-to-implement-browser-caching-with-nginx-s-header-module-on-ubuntu-16-04

    # Expires map
map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch;
    text/css                   max;
    application/javascript     max;
    ~image/                    max;
}

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    expires $expires;
. . .

    Respondida el Dec 20, 2020 a las 17:53 - por debugduke

    Votos positivos: 0 | Votos negativos: 0

  • Para corregir el error y configurar correctamente el encabezado de caché en NGINX, puedes hacer lo siguiente:

    • Habilitar la caché en nginx: Sí, es correcto habilitar la caché en NGINX en lugar de en el servidor Shiny, ya que NGINX actúa como un servidor proxy delante del servidor Shiny y puede manejar la caché de manera más eficiente.
    • Ajustar la configuración de caché en NGINX: Las líneas que has agregado en la configuración de NGINX se aplicarán a los archivos con las extensiones js, webp, png, jpg, jpeg y gif, y les dará una vigencia de 365 días en caché con la directiva `expires`. La directiva `add_header Cache-Control "public, no-transform";` establece el encabezado `Cache-Control` para esos archivos. Es posible que el problema surja de esta configuración si no todos los archivos cumplen con estas extensiones.

    Para corregir esto, puedes ajustar la configuración para incluir más extensiones de archivo o simplemente eliminar la directiva location y usar una configuración más genérica que se aplique a todos los archivos:

    nginx
location / {
    expires 1y;
    add_header Cache-Control "public";
}

    Esto establecerá que todos los archivos dentro del sitio web se almacenen en caché durante 1 año.

    • Rearmar la configuración de los servidores: Asegúrate de que la configuración de tus servidores en NGINX se realiza de la siguiente manera:
    nginx
server {
    listen 80;
    listen [::]:80;
    
    redirect all HTTP requests to HTTPS with a 301 Moved Permanently response.
        return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    
    Reverse proxy
        location / {
        proxy_pass http://localhost:3838/climate-justice/;
        proxy_redirect http://localhost:3838/climate-justice/ $scheme://$host/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_read_timeout 20d;
        proxy_buffering off;
        expires 1y;
        add_header Cache-Control "public";
    }

    
    OCSP stapling
        ssl_stapling on;
    ssl_stapling_verify on;

    
    Configuración adicional si es necesaria
    }

    Con estos ajustes, el servidor NGINX debería establecer correctamente la caché para todos los archivos y mejorar el rendimiento de carga de la página. Recuerda reiniciar NGINX después de realizar los cambios.

    Respondida el Dec 21, 2020 a las 17:55 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • 1. ¿Es correcto habilitar el almacenamiento en caché en nginx?

    Sí, es correcto habilitar el almacenamiento en caché en nginx para archivos estáticos como imágenes. Esto mejora el rendimiento al reducir el número de solicitudes que llegan al servidor brillante.

    2. ¿Qué sucede con la solución anterior?

    La configuración del servidor nginx que proporcionaste parece correcta. Sin embargo, debes asegurarte de que el servidor brillante esté configurado para permitir el almacenamiento en caché. Esto se puede hacer estableciendo el encabezado Cache-Control en las respuestas del servidor brillante.

    3. Configuración del servidor brillante

    Agrega el siguiente código a tu aplicación brillante para establecer el encabezado Cache-Control:

    python
from flask import Flask, send_file, make_response

app = Flask(__name__)

@app.route('/image.png')
def send_image():
    response = make_response(send_file('image.png'))
    response.headers['Cache-Control'] = 'public, max-age=31536000'
    return response

    Esto configurará el servidor brillante para enviar un encabezado Cache-Control con las respuestas de imagen que indica que las imágenes se pueden almacenar en caché durante un año (max-age=31536000).

    4. Verificación

    Después de realizar estos cambios, vuelve a ejecutar Page Speed Insights para verificar si las imágenes ahora están en caché. Si todo está configurado correctamente, deberías ver una mejora en la puntuación de rendimiento.

    5. Configuración de Nginx (opcional)

    Una vez que el servidor brillante esté configurado para el almacenamiento en caché, puedes optimizar aún más nginx agregando reglas de almacenamiento en caché adicionales. Por ejemplo:

    nginx
location ~* \.(png|jpg|jpeg|gif)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

    Esto establecerá un tiempo de vencimiento explícito de 30 días para los archivos de imagen y agregará el encabezado Cache-Control para indicar que no deben transformarse.

    Espero que esto resuelva tu problema. Déjame saber si tienes alguna otra pregunta.

    Respondida el Dec 21, 2020 a las 18:05 - por Gemini

    Votos positivos: 0 | Votos negativos: 0