🌀Añadir modulo pagespeed a nginx proxy manager

Vamos a añadir este conocido modulo, para conseguir aumentar la velocidad de nuestro sitio web.

Dificultad tutorial: Media Conocimientos a tener: Medios

¿qué es pagespeed?

El page speed o velocidad de la página es el tiempo que utiliza una página para cargar, es decir, cuánto demora para mostrarle al usuario todo su contenido.

El page speed es una muestra de la velocidad de todo el sitio web, ya que cada una de las páginas puede tener una velocidad un poco diferente de carga. Sin embargo, por ser la misma estructura, la variación de la velocidad entre cada una de las páginas de un sitio web es mínima.

Para lograr esto utilizaremos, el ya conocido en esta guia de tutoriales nginx proxy manager, al que añadiremos el modulo de google pagespeed.

Parámetros de la plantilla nginx proxy manager.

Añadiremos en primer lugar un nuevo path, para alojar lo que será el modulo de pagespeed.

Container Path:=> /etc/nginx/modules Host Path:=> /mnt/user/appdata/Nginx-Proxy-Manager-Official/modules/

Instalación desde terminal.

Ahora accederemos al terminar del Docker NGINX, lanzamos el siguiente comando.

cd && apt update && apt install vim -y && su

verificación.

continuamos en la misma terminal, ahora para crear el archivo de verificación de la versión del modulo y si esta presente.

• Crea el archivo entrypoint_speed.sh

cd /data && vim entrypoint_speed.sh

copia y pega el siguiente código.

#!/bin/bash
apt-get update
apt-get install -y libmaxminddb0 libmaxminddb-dev --no-install-recommends apt-utils

echo "=>Check for Speed module file and version flag..."
set -- /etc/nginx/modules/ngx_topete_*
if [[ -f /etc/nginx/modules/ngx_pagespeed.so && -f "$1" ]]; then
        moduleversion=$(echo $1|cut -d "-" -f2|grep -oP '^\d*\.\d*\.\d*')
        ngxversion=$(/etc/nginx/bin/openresty -v 2>&1|cut -d "/" -f2|grep -oP '^\d*\.\d*\.\d*')
        if [ "$moduleversion" != "$ngxversion" ]; then
                echo "!=>Topete modules ($moduleversion) and nginx ($ngxversion) version mismatch !"
                echo "!=>Starting compilation !"
                /data/speed.sh
        else
                echo "=>Topete modules found and version match nginx !"
        fi
else
        echo "!=>No Topete module found !"
        echo "!=>Starting compilation !"
        /data/speed.sh
fi

apt clean
rm -rf /var/lib/apt/lists/*

set -- /etc/nginx/modules/ngx_topete_*
moduleversion=$(echo $1|cut -d "-" -f2|grep -oP '^\d*\.\d*\.\d*')
ngxversion=$(/etc/nginx/bin/openresty -v 2>&1|cut -d "/" -f2|grep -oP '^\d*\.\d*\.\d*')
echo "### Topete Modules $moduleversion - Nginx $ngxversion ###"
echo "### Starting NPM orignal entrypoint ###"
/init

Ejecuta el siguiente código para hacer ejecutable el archivo.

chmod +x entrypoint_speed.sh

compilación.

Continuamos en la misma terminal, ahora para crear el archivo de instalación.

• Crea el archivo speed.sh y luego pega el código de instalación modulo pagespeed.

cd /data && vim speed.sh

si observas la siguiente variable, [psol=1.14.36.1] en el archivo, es la versión que puedes consultar desde la url que figura a continuación de ella

# FROM jc21/nginx-proxy-manager:2.9.4

# Instalacion modulo pagespeed en nginx ...............
  
apt update && apt install -y uuid-dev libssl-dev zlib1g-dev git libpcre3 libpcre3-dev sudo curl wget php-imagick
# ................ variable ............................
ngxversion=openresty-$(/etc/nginx/bin/openresty -v 2>&1|cut -d "/" -f2)
psol=1.14.36.1 # ver ultima versión en https://dist.apache.org/repos/dist/release/incubator/pagespeed/
# ....................................................
# ..... cache............
mkdir -p /etc/nginx/ngx_pagespeed_cache
chown -R www-data:www-data /etc/nginx/ngx_pagespeed_cache
# ...... crar archivos basicos ..............
rm -f /etc/nginx/modules/ngx-pagespeed.conf
touch /etc/nginx/modules/ngx-pagespeed.conf
echo "load_module /etc/nginx/modules/ngx_pagespeed.so;" >> /etc/nginx/modules/ngx-pagespeed.conf
mkdir -p /data/nginx/custom
#Download openresty & pagespeed
cd /tmp && curl "https://openresty.org/download/$ngxversion.tar.gz" | tar zx
cd /tmp/$ngxversion && git clone https://github.com/apache/incubator-pagespeed-ngx.git
cd /tmp/$ngxversion/incubator-pagespeed-ngx && curl https://dist.apache.org/repos/dist/release/incubator/pagespeed/$psol/x64/psol-$psol-apache-incubating-x64.tar.gz |tar zx

#Config and make
cd /tmp/$ngxversion && \
    ./configure \
        --prefix=/etc/nginx \
        --sbin-path=/usr/sbin/nginx \
        --modules-path=/etc/nginx/modules \
        --conf-path=/etc/nginx/nginx.conf \
        --error-log-path=/var/log/nginx/error.log \
        --http-log-path=/var/log/nginx/access.log \
        --pid-path=/var/run/nginx.pid \
        --lock-path=/var/run/nginx.lock \
        --http-client-body-temp-path=/var/cache/nginx/client_temp \
        --http-proxy-temp-path=/var/cache/nginx/proxy_temp \
        --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp \
        --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp \
        --http-scgi-temp-path=/var/cache/nginx/scgi_temp \
        --user=nginx \
        --group=nginx \
        --with-compat \
        --with-threads \
        --with-http_addition_module \
        --with-http_auth_request_module \
        --with-http_dav_module \
        --with-http_flv_module \
        --with-http_gunzip_module \
        --with-http_gzip_static_module \
        --with-http_mp4_module \
        --with-http_random_index_module \
        --with-http_realip_module \
        --with-http_secure_link_module \
        --with-http_slice_module \
        --with-http_ssl_module \
        --with-http_stub_status_module \
        --with-http_sub_module \
        --with-http_v2_module \
        --with-mail \
        --with-mail_ssl_module \
        --with-stream \
        --with-stream_realip_module \
        --with-stream_ssl_module \
        --with-stream_ssl_preread_module \
        --with-compat --add-dynamic-module=incubator-pagespeed-ngx && \
    make -j2 && \
    make install
rm -f /etc/nginx/modules/ngx_topete_*
touch /etc/nginx/modules/ngx_topete_$ngxversion

Guardamos y cerramos. Damos permisos de ejecución .

Ejecuta el siguiente código para hacer ejecutable el archivo.

chmod +x speed.sh

Añadir entrada para ejecución al iniciar.

Añadiremos el siguiente código en la plantilla, tal y como muestra la foto.

--entrypoint=/data/entrypoint_speed.sh

Soporte de conversión WebP.

Webp o «weppy» que es como muchos lo pronuncian, es un formato gráfico en forma de contenedor que surge en el año 2010 de la mano de Google y que soporta tanto la compresión con pérdida como sin ella.

Comprueba que se ha instalado correctamente la compatibilidad WebP con el siguiente comando.

php -m | grep imagick

El resultado será imagick si la instalación ha sido correcta.

Verifica la configuración .

Reinicia NGINX y verifica que no aparecen errores.

nginx -t

Configuración de los filtros para pagespeed.

Los filtros son un ejemplo, que pueden valer o no para tu instalación, tendrás que comprobar su correcto funcionamiento, aconsejo seguir esta guia oficial, donde puedes encontrar todos. https://www.pagespeedguide.com/documentation/optimizations

Continuamos en la terminar del Docker, ahora vamos a crear la carpeta y el archivo de configuración de filtros.

vim /data/nginx/custom/pagespeed.conf

Pegamos el siguiente código de filtros.

###enable pagespeed on the server block###
 pagespeed on;
# pagespeed Domain https://www.example.com; PON TU DOMINIO
# pagespeed Domain https://example.com; PON TU DOMINIO

###Add this line if your website runs on HTTPS###
 pagespeed FetchHttps enable;

###Set up admin location###
# admin console
 pagespeed Statistics on;
 pagespeed StatisticsLogging on;
 pagespeed StatisticsLoggingIntervalMs 60000;
 pagespeed StatisticsLoggingMaxFileSizeKb 1024;
 pagespeed MessageBufferSize 100000;
 pagespeed LogDir /var/log/pagespeed;
 pagespeed AdminPath /pagespeed_admin;

###Specify the file cache folder that you created earlier###
 pagespeed FileCachePath /etc/nginx/ngx_pagespeed_cache;

###Set the cache settings, you can play around with these numbers###
 pagespeed FileCacheSizeKb            102400;
 pagespeed FileCacheCleanIntervalMs   3600000;
 pagespeed FileCacheInodeLimit        500000;
 pagespeed LRUCacheKbPerProcess     1024;
 pagespeed LRUCacheByteLimit        16384;

###OPTIONAL: use Memcached to further increase performance of pagespeed###
 pagespeed MemcachedThreads 1;
 pagespeed MemcachedServers "localhost:11211";

###Ensure requests for pagespeed optimized resources go to the pagespeed handler###
# and no extraneous headers get set.
 location ~ ".pagespeed.([a-z].)?[a-z]{2}.[^.]{10}.[^.]+" {
   add_header "" "";
 }
 location ~ "^/pagespeed_static/" { }
 location ~ "^/ngx_pagespeed_beacon$" { }

###Set the most common safe filters###
 pagespeed RewriteLevel CoreFilters; # ATENCION ESTE FILTRO TIENES QUE ADAPTARLO A TUS NECESIDADES https://www.pagespeedguide.com/documentation/optimizations


###SECURE THE ADMIN LOCATION FROM BAD BOTS AND MALICOUS ACTORS###
 location ~ ^/pagespeed_admin {
    allow 127.0.0.1;
    allow 192.168.1.25; # introduce tu ip local
    deny all;
 }

Puedes pegar esto otro y no el anterior e ir añadiendo opciones para evitar errores, asi podras personalizar tu archivo de filtros.

pagespeed on;
  
pagespeed FileCachePath /var/lib/nginx/cache/pagespeed/;
pagespeed FileCacheSizeKb 102400;
pagespeed FileCacheCleanIntervalMs 3600000;
pagespeed FileCacheInodeLimit 50000;
pagespeed EnableCachePurge on;
pagespeed PurgeMethod PURGE;

Solo pegar uno de los códigos de filtros.

Reinicia NGINX y vuelve a comprobar nginx -t

Probar correcta instalación pagespeed

abrimos la interfaz de NGINX y vamos a la siguiente ruta

Setting=>Edit=>Custom Page y pegamos el siguiente código.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Comprobar pagespeed</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <style>
            .jumbotron { margin-top: 50px; }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="jumbotron">
                <h1>Congratulations!</h1>
                <p>You've successfully started the Nginx Proxy Manager.</p>
                <p>If you're seeing this site then you're trying to access a host that isn't set up yet.</p>
                <p>Log in to the Admin panel to get started.</p>
            </div>
            <p class="text-center"><small>Powered by <a href="https://github.com/jc21/nginx-proxy-manager" target="_blank">Nginx Proxy Manager</a></small></p>
        </div>
    </body>
</html>t

Guardamos y vamos a la siguiente ruta desde la interfaz

/data/nginx/default_host/site.conf, añadimos la siguiente lineá como se ve el la foto.

include /data/nginx/custom/pagespeed.conf;

Guardamos y abrimos el terminar, ejecutamos la siguiente lineá.

curl -I localhost

Si aparece X-Page-Speed todo va ok, ya puedes personalizar tus filtros.

Si ya tienes instalado el modulo geoip2 de mis tutoriales sigue las indicaciones en Next: Geoip2