Com crear una pàgina d'error 404 personalitzada a NGINX
Cada vegada que NGINX troba un error mentre intenta processar la sol·licitud d'un client, retorna un error. Cada error inclou un codi de resposta HTTP i una breu descripció. L'error normalment es mostra a un usuari mitjançant una pàgina HTML predeterminada senzilla.
Afortunadament, podeu configurar NGINX per mostrar pàgines d'error personalitzades als usuaris del vostre lloc o de l'aplicació web. Això es pot aconseguir mitjançant la directiva error_page de NGINX que s'utilitza per definir l'URI que es mostrarà per a un error especificat. També podeu utilitzar-lo opcionalment per modificar el codi d'estat HTTP a les capçaleres de resposta enviades a un client.
En aquesta guia, mostrarem com configurar NGINX per utilitzar pàgines d'error personalitzades.
Creeu una pàgina personalitzada única per a tots els errors de NGINX
Podeu configurar NGINX perquè utilitzi una única pàgina d'error personalitzada per a tots els errors que retorna a un client. Comenceu creant la vostra pàgina d'error. Aquí teniu un exemple, una pàgina HTML senzilla que mostra el missatge:
“Sorry, the page can't be loaded! Contact the site's administrator or support for assistance.” to a client.
Exemple de codi de pàgina personalitzat HTML de Nginx.
<!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>
Deseu el fitxer amb un nom adequat, per exemple error-page.html i tanqueu-lo.
A continuació, moveu el fitxer al directori arrel del document (/var/www/html/). Si el directori no existeix, podeu crear-lo mitjançant l'ordre mkdir, tal com es mostra:
$ sudo mkdir -p /var/www/html/ $ sudo cp error-page.html /var/www/html/
A continuació, configureu NGINX per utilitzar la pàgina d'error personalitzada mitjançant la directiva error_page. Creeu un fitxer de configuració anomenat custom-error-page.conf a /etc/nginx/snippets/ tal com es mostra.
$ sudo mkdir /etc/nginx/snippets/ $ sudo vim /etc/nginx/snippets/custom-error-page.conf
Afegiu-hi les línies següents:
error_page 404 403 500 503 /error-page.html;
location = /error-page.html {
root /var/www/html;
internal;
}
Aquesta configuració provoca una redirecció interna a l'URI/error-page.html cada vegada que NGINX troba algun dels errors HTTP especificats 404, 403, 500 i 503. El context d'ubicació indica a NGINX on trobar la pàgina d'error.
Deseu el fitxer i tanqueu-lo.
Ara incloeu el fitxer al context http perquè tots els blocs de servidor utilitzin la pàgina d'error, al fitxer /etc/nginx/nginx.conf:
$ sudo vim /etc/nginx/nginx.conf
El directori d'inclusió indica a NGINX que inclogui la configuració al fitxer .conf especificat:
include snippets/custom-error-page.conf;
Alternativament, podeu incloure el fitxer d'un bloc de servidor específic (comunament conegut com a vhost), per exemple, /etc/nginx/conf.d/mywebsite.conf. Afegiu la directiva d'inclusió anterior al context del servidor {}.
Deseu el vostre fitxer de configuració NGINX i torneu a carregar el servei de la següent manera:
$ sudo systemctl reload nginx.service
I proveu des d'un navegador si la configuració funciona bé.
Creeu diferents pàgines personalitzades per a cada error NGINX
També podeu configurar diferents pàgines d'error personalitzades per a cada error HTTP a NGINX. Hem descobert una bona col·lecció de pàgines d'error nginx personalitzades creades per Denys Vitali a Github.
Per configurar el repositori al vostre servidor, executeu les ordres següents:
$ sudo git clone https://github.com/denysvitali/nginx-error-pages /srv/http/default $ sudo mkdir /etc/nginx/snippets/ $ sudo ln -s /srv/http/default/snippets/error_pages.conf /etc/nginx/snippets/error_pages.conf $ sudo ln -s /srv/http/default/snippets/error_pages_content.conf /etc/nginx/snippets/error_pages_content.conf
A continuació, afegiu la configuració següent al vostre context http o a cada bloc de servidor/vhost:
include snippets/error_pages.conf;
Deseu el vostre fitxer de configuració NGINX i torneu a carregar el servei de la següent manera:
$ sudo systemctl reload nginx.service
A més, proveu des d'un navegador si la configuració funciona com s'ha previst. En aquest exemple, hem provat la pàgina d'error 404.
Això és tot el que teníem per a tu en aquesta guia. La directiva error_page de NGINX us permet redirigir els usuaris a una pàgina o recurs o URL definits quan es produeix un error. També permet, opcionalment, la modificació del codi d'estat HTTP en la resposta a un client. Per obtenir més informació, llegiu la documentació de la pàgina d'error de nginx.