Cómo configurar Nginx para utilizar páginas de error personalizadas en Ubuntu 22.04

Introducción

Nginx es un servidor web de alto rendimiento capaz de ofrecer contenido con flexibilidad y potencia. Al diseñar sus páginas web, suele ser útil personalizar cada parte del contenido que verán sus usuarios. Esto incluye páginas de error para cuando solicitan contenido que no está disponible. En esta guía, configurará Nginx para usar páginas de error personalizadas en Ubuntu 22.04.

Prerrequisitos

Para comenzar con esta guía, necesitarás:

• Un usuario no root con sudoprivilegios. Puedes configurar un usuario de este tipo siguiendo la guía de configuración inicial del servidor para Ubuntu 22.04 .
• Nginx instalado en su sistema, siguiendo los pasos 1 y 2 de esta guía sobre cómo instalar Nginx en Ubuntu 22.04 .

Cuando haya completado los pasos anteriores, continúe con esta guía.

Creando tus páginas de error personalizadas

Las páginas de error personalizadas en este tutorial son para fines demostrativos, pero el contenido exacto de sus páginas de error personalizadas puede ser diferente a su gusto.

Coloca tus páginas de error personalizadas en el /usr/share/nginx/htmldirectorio donde Nginx establece su raíz de documento predeterminada. Crearás una página para errores 404 llamada custom_404.htmly otra para errores generales de nivel 500 llamada custom_50x.html. Puedes usar las siguientes líneas si solo estás haciendo pruebas. De lo contrario, coloca tu propio contenido de error personalizado en estas ubicaciones.

Primero, crea el archivo HTML para tu página 404 personalizada usando nanotu editor de texto preferido:

sudo nano /usr/share/nginx/html/custom_404.html

Inserta tu error personalizado en el archivo creado:

h1 style='color:red'Error 404: Not found :-(/h1pI have no idea where that file is, sorry. Are you sure you typed in the correct URL?/p

Guarde y salga del archivo. Si está utilizando nano, presione CTRL+Opara guardar y luego presione CTRL+Xpara salir.

A continuación, cree el archivo HTML para su página de error general personalizada de nivel 500:

sudo nano /usr/share/nginx/html/custom_50x.html

Inserta tu error personalizado en el archivo creado:

h1Oops! Something went wrong.../h1pWe seem to be having some technical difficulties. Hang tight./p

Guarde y salga del archivo una vez que haya insertado el contenido de error personalizado.

Ahora tienes dos páginas de error personalizadas que puedes servir cuando las solicitudes de los clientes generen errores diferentes.

Configuración de Nginx para utilizar sus páginas de error

Ahora, debe indicarle a Nginx que debe utilizar estas páginas siempre que se produzcan las condiciones de error correspondientes. Abra el archivo de bloque de servidor en el /etc/nginx/sites-enableddirectorio que desea configurar. defaultAquí se utilizará el archivo de bloque de servidor predeterminado, pero debe ajustar sus propios bloques de servidor si está utilizando un archivo que no sea el predeterminado:

sudo nano /etc/nginx/sites-enabled/default

A continuación, puedes señalar a Nginx tus páginas de error personalizadas.

Dirigir los errores 404 a la página 404 personalizada

Utilice la error_pagedirectiva para que, cuando se produzca un error 404 (cuando no se encuentre un archivo solicitado), se muestre la página personalizada que ha creado. Cree un bloque de ubicación para el archivo, donde pueda asegurarse de que la raíz coincida con la ubicación de su sistema de archivos y que el archivo solo sea accesible a través de redirecciones internas de Nginx (no solicitadas directamente por los clientes):

/etc/nginx/sites-enabled/predeterminado

server {    listen 80 default_server;    . . .    error_page 404 /custom_404.html;    location = /custom_404.html {        root /usr/share/nginx/html;        internal;    }}

Por lo general, no es necesario configurar el rootbloque en la nueva ubicación, ya que coincide con la raíz del bloque del servidor. Sin embargo, aquí se está siendo explícito para que las páginas de error se muestren incluso si se mueve el contenido web habitual y la raíz del documento asociado a una ubicación diferente.

Dirigir errores de nivel 500 a la página personalizada 50x

A continuación, agrega las directivas para asegurarte de que cuando Nginx encuentre errores de nivel 500 (problemas relacionados con el servidor), sirva la otra página personalizada que creaste. Esto seguirá exactamente la misma fórmula que usaste en la última sección. Esta vez, establecerás varios errores de nivel 500 para que todos usen la custom_50x.htmlpágina.

En la parte inferior, también agregará un pase FastCGI ficticio para que pueda probar su página de error de nivel 500. Este es ficticio porque se espera que arroje un error, ya que el backend en realidad no existe. Solicitar una página aquí le permitirá probar que los errores de nivel 500 se publiquen en su página personalizada.

Edite su archivo de la siguiente manera:

/etc/nginx/sites-enabled/predeterminado

server {    listen 80 default_server;    . . .    error_page 404 /custom_404.html;    location = /custom_404.html {        root /usr/share/nginx/html;        internal;    }    error_page 500 502 503 504 /custom_50x.html;    location = /custom_50x.html {        root /usr/share/nginx/html;        internal;    }    location /testing {        fastcgi_pass unix:/does/not/exist;    }}

Guarde y cierre el archivo cuando haya terminado.

Reiniciando Nginx y probando sus páginas

Pruebe la sintaxis de su archivo de configuración escribiendo:

sudo nginx -t

Si se informan errores, corríjalos antes de continuar. Cuando no se devuelvan errores de sintaxis, reinicie Nginx escribiendo lo siguiente:

sudo systemctl restart nginx

Ahora, cuando accedas al dominio o dirección IP de tu servidor y solicites un archivo inexistente, deberías ver la página 404 que configuraste:

http://server_domain_or_IP/thiswillerror

Cuando acceda a la ubicación que configuró para el pase FastCGI, recibirá un error 502 Bad Gateway con su página personalizada de nivel 500:

http://server_domain_or_IP/testing

Ahora puedes regresar y eliminar la ubicación del pase FastCGI falso de tu configuración de Nginx.

Conclusión

Ahora deberías estar mostrando páginas de error personalizadas para tu sitio. Esta es una manera fácil de personalizar la experiencia de tus usuarios incluso cuando están experimentando problemas. Una sugerencia para estas páginas es incluir enlaces a lugares donde pueden ir para obtener ayuda o más información. Si lo haces, asegúrate de que los destinos de los enlaces sean accesibles incluso cuando se produzcan los errores asociados.