Introducción
Cada vez que NGINX encuentra un error al intentar procesar una solicitud de cliente, devuelve un error. Cada error incluye un código de respuesta HTTP y una breve descripción. El error generalmente se muestra al usuario a través de una página HTML predefinida simple.
Afortunadamente, puede configurar NGINX para mostrar páginas de error personalizadas para los usuarios de su sitio o aplicación web. Esto se puede lograr usando la directiva error_page de NGINX que se usa para definir el URI que se mostrará para un error específico. También puede usarlo opcionalmente para cambiar el código de estado HTTP en los encabezados de las respuestas enviadas a un cliente.
En esta guía, mostraremos cómo configurar NGINX para usar páginas de error personalizadas.
Cree una única página personalizada para todos los errores de NGINX
Puede configurar NGINX para usar una sola página de error personalizada 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 siguiente mensaje:
“Sorry, the page can't be loaded! Contact the site's administrator or support for assistance.” to a client.Ejemplo de código de página HTML de Nginx personalizado:
<!DOCTYPE html>
<html>
<head>
<style type=text/css>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
#notfound {
position: relative;
height: 100vh;
}
#notfound .notfound {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.notfound {
max-width: 520px;
width: 100%;
line-height: 1.4;
text-align: center;
}
.notfound .notfound-error {
position: relative;
height: 200px;
margin: 0px auto 20px;
z-index: -1;
}
.notfound .notfound-error h1 {
font-family: 'Montserrat', sans-serif;
font-size: 200px;
font-weight: 300;
margin: 0px;
color: #211b19;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media only screen and (max-width: 767px) {
.notfound .notfound-error h1 {
font-size: 148px;
}
}
@media only screen and (max-width: 480px) {
.notfound .notfound-error {
height: 148px;
margin: 0px auto 10px;
}
.notfound .notfound-error h1 {
font-size: 120px;
font-weight: 200px;
}
.notfound .notfound-error h2 {
font-size: 30px;
}
.notfound a {
padding: 7px 15px;
font-size: 24px;
}
.h2 {
font-size: 148px;
}
}
</style>
</head>
<body>
<div id="notfound">
<div class="notfound">
<h1>Sorry the page can't be loaded!</a></h1>
<div class="notfound-error">
<p>Contact the site's administrator or support for assistance.</p>
</div>
</div>
</div>
</body>
</html>Guarde el archivo con un nombre apropiado, como error-page.html y ciérrelo.
Luego, mueva el archivo al directorio raíz del 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-page.html /var/www/html/Luego configure NGINX para usar la página de error personalizada usando la directiva error_page . Cree un archivo de configuración llamado custom-error-page.conf en /etc/nginx/snippets/ como se muestra:
sudo mkdir /etc/nginx/snippets/sudo nano /etc/nginx/snippets/custom-error-page.conf Añádele las siguientes líneas:
error_page 404 403 500 503 /error-page.html;
location = /error-page.html {
root /var/www/html;
internal;
}Esta configuración provoca una redirección interna al URI / error-page.html cada vez que NGINX encuentra uno de los errores HTTP 404, 403, 500 y 503 especificados . El contexto de ubicación le dice a NGINX dónde encontrar la página de error.
Guarde y cierre el archivo.
Ahora incluya el archivo en el contexto http para que todos los bloques del servidor usen la página de error, en el archivo /etc/nginx/nginx.conf :
sudo vim /etc/nginx/nginx.confEl directorio includele dice a NGINX que incluya la configuración en el .confarchivo especificado:
include snippets/custom-error-page.conf;Como alternativa, puede incluir el archivo para un bloque de servidor específico (comúnmente conocido como vhost ), como /etc/nginx/conf.d/mywebsite.conf . Agregue la directiva anterior includeen el contexto del servidor {}.
Guarde su archivo de configuración NGINX y vuelva a cargar el servicio de la siguiente manera:
sudo systemctl reload nginx.servicPrueba desde un navegador si la instalación funciona correctamente.
Conclusión
La directiva error_page de NGINX le permite redirigir a los usuarios a una página, recurso o URL definidos cuando se produce un error. También permite opcionalmente 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 de nginx .
