Cómo crear una página de error 404 personalizada en Nginx

Cómo crear una página de error 404 personalizada en Nginx

Cada vez Nginx Encuentra un error, ya que intenta procesar la solicitud de un cliente, devuelve un error. Cada error incluye un Http código de respuesta y una breve descripción. El error generalmente se muestra a un usuario a través de un simple valor predeterminado Html página.

Afortunadamente, puedes configurar Nginx Para mostrar páginas de error personalizadas para los usuarios de su sitio o aplicación web. Esto se puede lograr utilizando el error_page de Nginx directiva que se usa para definir el Uri que se mostrará para un error especificado. También puede usarlo opcionalmente para modificar el código de estado HTTP en los encabezados de respuesta enviados a un cliente.

En esta guía, mostraremos cómo configurar Nginx Para usar páginas de error personalizadas.

Cree una sola página personalizada para todos los errores NGINX

Puedes configurar Nginx Para usar una sola página de error personalizado para todos los errores que devuelve a un cliente. Comience por crear su página de error. Aquí hay un ejemplo, una página HTML simple que muestra el mensaje:

"Lo siento, la página no se puede cargar! Póngase en contacto con el administrador del sitio o el soporte para asistencia."A un cliente. 

Ejemplo de código de página personalizado HTML NGINX.

    * -webkit-box-tamaño: border-box; dimensionamiento de la caja: border-box;  cuerpo relleno: 0; margen: 0;  #notfound posición: relativo; Altura: 100 VH;  #extraviado .nofound posición: absoluto; Izquierda: 50%; arriba: 50%; -Webkit-transform: traducir (-50%, -50%); -ms-transform: traducir (-50%, -50%); transformar: traducir (-50%, -50%);  .Notfound max-width: 520px; Ancho: 100%; Línea de altura: 1.4; Text-Align: Center;  .extraviado .nofound-error posición: relativo; Altura: 200px; Margen: 0px Auto 20px; Índice Z: -1;  .extraviado .nofound-error H1 Font-Family: 'Montserrat', sans-serif; tamaño de fuente: 200px; Font-peso: 300; margen: 0px; Color: #211B19; Posición: Absoluto; Izquierda: 50%; arriba: 50%; -Webkit-transform: traducir (-50%, -50%); -ms-transform: traducir (-50%, -50%); transformar: traducir (-50%, -50%);  @media solo pantalla y (max-width: 767px)  .extraviado .nofound-error h1 font-size: 148px;  @media solo pantalla y (width máximo: 480px)  .extraviado .nofound-error altura: 148px; Margen: 0px Auto 10px;  .extraviado .nofound-error h1 font-size: 120px; Font-Weight: 200px;  .extraviado .nofound-error h2 font-size: 30px;  .no se hace un relleno: 7px 15px; tamaño de fuente: 24px;  .H2 Font-Size: 148px;       

Lo siento, la página no se puede cargar!

Póngase en contacto con el administrador del sitio o el soporte para asistencia.

Guarde el archivo con un nombre apropiado, por ejemplo, página de error.html y cerrarlo.

A continuación, mueva el archivo a su directorio raíz de documento (/var/www/html/). Si el directorio no existe, puede crearlo usando el comando mkdir, como se muestra:

$ sudo mkdir -p/var/www/html/$ sudo cp error -página.html/var/www/html/ 

Luego configurar Nginx Para usar la página de error personalizado utilizando el error_page directiva. Crear un archivo de configuración llamado Página personalizada.confusión bajo /etc/nginx/fragmentos/ como se muestra.

$ sudo mkdir/etc/nginx/fragmentos/$ sudo vim/etc/nginx/fragmentos/custom-error-página.confusión 

Agregue las siguientes líneas:

ERROR_PAGE 404 403 500 503 /Error-página.html; Ubicación = /Page de error.html root/var/www/html; interno;  

Esta configuración causa una redirección interna al Uri/página de error.html cada vez Nginx Encuentra cualquiera de los errores HTTP especificados 404, 403, 500 y 503. El ubicación contexto dice Nginx Dónde encontrar su página de error.

Guarde el archivo y cierre.

Ahora incluya el archivo en el http contexto para que todos los bloques de servidor usen la página de error, en el /etc/nginx/nginx.confusión archivo:

$ sudo vim/etc/nginx/nginx.confusión 

El incluir Directorio dice Nginx para incluir la configuración en el especificado .confusión archivo:

incluir fragmentos/personalización personalizada.conf; 

Alternativamente, puedes incluir el archivo para un bloque de servidor específico (comúnmente conocido como vhost), Por ejemplo, /etc/nginx/conf.d/mywebsite.confusión. Agregue lo anterior incluir directiva en el servidor contexto.

Guarda tu Nginx archivo de configuración y recargar el servicio de la siguiente manera:

$ sudo systemctl recargar nginx.servicio 

Y prueba desde un navegador si la configuración funciona bien.

Página Nginx Custom 404

Crear diferentes páginas personalizadas para cada error NGINX

También puede configurar diferentes páginas de error personalizadas para cada error HTTP en Nginx. Descubrimos una buena colección de páginas de errores Nginx personalizadas creadas por Denys Vitali en Github.

Para configurar el repositorio en su servidor, ejecute los siguientes comandos:

$ sudo git clon https: // github.com/denysvitali/nginx-error-pages/srv/http/default $ sudo mkdir/etc/nginx/fragmentos/$ sudo ln -s/srv/http/default/fragmentos/error_pages.conf/etc/nginx/fragmentos/error_pages.conf $ sudo ln -s/srv/http/default/fnippets/error_pages_content.conf/etc/nginx/fragmentos/error_pages_content.confusión 

A continuación, agregue la siguiente configuración en su http contexto o cada bloque de servidor/vhost:

incluir fragmentos/error_pages.conf; 

Guarde su archivo de configuración de Nginx y vuelva a cargar el servicio de la siguiente manera:

$ sudo systemctl recargar nginx.servicio 

Además, prueba desde un navegador si la configuración funciona según lo previsto. En este ejemplo, probamos la página de error 404.

Página de error Nginx Custom 404

Eso es todo lo que tuvimos para ti en esta guía. Nginx's error_page La directiva le permite redirigir a los usuarios a una página o recurso definido o URL cuando ocurre un error. También opcionalmente permite la modificación del código de estado HTTP en la respuesta a un cliente. Para obtener más información, lea la documentación de la página de error Nginx.