Ricerca nel sito web

Come creare una pagina di errore 404 personalizzata in NGINX

Ogni volta che NGINX rileva un errore mentre tenta di elaborare la richiesta di un client, restituisce un errore. Ogni errore include un codice di risposta HTTP e una breve descrizione. Di solito l'errore viene visualizzato all'utente tramite una semplice pagina HTML predefinita.

Fortunatamente, puoi configurare NGINX per visualizzare pagine di errore personalizzate agli utenti del tuo sito o della tua applicazione web. Ciò può essere ottenuto utilizzando la direttiva error_page di NGINX che viene utilizzata per definire l'URI che verrà mostrato per un errore specifico. Puoi anche, facoltativamente, utilizzarlo per modificare il codice di stato HTTP nelle intestazioni di risposta inviate a un client.

In questa guida mostreremo come configurare NGINX per utilizzare pagine di errore personalizzate.

Crea un'unica pagina personalizzata per tutti gli errori NGINX

Puoi configurare NGINX per utilizzare un'unica pagina di errore personalizzata per tutti gli errori restituiti a un client. Inizia creando la tua pagina di errore. Ecco un esempio, una semplice pagina HTML che visualizza il messaggio:

“Sorry, the page can't be loaded! Contact the site's administrator or support for assistance.” to a client.

Esempio di codice della pagina personalizzata HTML 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>

Salva il file con un nome appropriato, ad esempio error-page.html e chiudilo.

Successivamente, sposta il file nella directory root del documento (/var/www/html/). Se la directory non esiste, puoi crearla utilizzando il comando mkdir, come mostrato:

sudo mkdir -p  /var/www/html/
sudo cp error-page.html /var/www/html/

Quindi configura NGINX per utilizzare la pagina di errore personalizzata utilizzando la direttiva error_page. Crea un file di configurazione chiamato custom-error-page.conf in /etc/nginx/snippets/ come mostrato.

sudo mkdir /etc/nginx/snippets/
sudo vim /etc/nginx/snippets/custom-error-page.conf

Aggiungi le seguenti righe:

error_page 404 403 500 503 /error-page.html;
location = /error-page.html {
        root /var/www/html;
        internal;
}

Questa configurazione provoca un reindirizzamento interno all'URI/error-page.html ogni volta che NGINX rileva uno degli errori HTTP specificati 404, 403, 500 e 503. Il contesto della località indica a NGINX dove trovare la pagina di errore.

Salva il file e chiudilo.

Ora includi il file nel contesto http in modo che tutti i blocchi del server utilizzino la pagina di errore, nel file /etc/nginx/nginx.conf:

sudo vim /etc/nginx/nginx.conf

La directory include indica a NGINX di includere la configurazione nel file .conf specificato:

include snippets/custom-error-page.conf;

In alternativa, puoi includere il file per un blocco server specifico (comunemente noto come vhost), ad esempio /etc/nginx/conf.d/mywebsite. conf. Aggiungi la direttiva include sopra nel contesto del server {}.

Salva il tuo file di configurazione NGINX e ricarica il servizio come segue:

sudo systemctl reload nginx.service

E prova da un browser se la configurazione funziona correttamente.

Crea diverse pagine personalizzate per ciascun errore NGINX

Puoi anche impostare diverse pagine di errore personalizzate per ciascun errore HTTP in NGINX. Abbiamo scoperto una buona raccolta di pagine di errore nginx personalizzate create da Denys Vitali su Github.

Per configurare il repository sul tuo server, esegui i seguenti comandi:

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

Successivamente, aggiungi la seguente configurazione nel tuo contesto http o in ciascun blocco server/vhost:

include snippets/error_pages.conf;

Salva il file di configurazione NGINX e ricarica il servizio come segue:

sudo systemctl reload nginx.service

Inoltre, verifica da un browser se la configurazione funziona come previsto. In questo esempio, abbiamo testato la pagina di errore 404.

Questo è tutto ciò che abbiamo per te in questa guida. La direttiva error_page di NGINX ti consente di reindirizzare gli utenti a una pagina, risorsa o URL definita quando si verifica un errore. Facoltativamente consente inoltre la modifica del codice di stato HTTP nella risposta a un client. Per ulteriori informazioni, leggere la documentazione della pagina di errore di nginx.