Recherche de site Web

Comment créer une page d'erreur 404 personnalisée dans NGINX


Chaque fois que NGINX rencontre une erreur alors qu'il tente de traiter la demande d'un client, il renvoie une erreur. Chaque erreur comprend un code de réponse HTTP et une brève description. L'erreur est généralement affichée à un utilisateur via une simple page HTML par défaut.

Heureusement, vous pouvez configurer NGINX pour afficher des pages d'erreur personnalisées aux utilisateurs de votre site ou de votre application Web. Ceci peut être réalisé en utilisant la directive error_page de NGINX qui est utilisée pour définir l'URI qui sera affiché pour une erreur spécifiée. Vous pouvez également, éventuellement, l'utiliser pour modifier le code d'état HTTP dans les en-têtes de réponse envoyés à un client.

Dans ce guide, nous montrerons comment configurer NGINX pour utiliser des pages d'erreur personnalisées.

Créer une seule page personnalisée pour toutes les erreurs NGINX

Vous pouvez configurer NGINX pour utiliser une seule page d'erreur personnalisée pour toutes les erreurs qu'il renvoie à un client. Commencez par créer votre page d'erreur. Voici un exemple, une simple page HTML qui affiche le message :

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

Exemple de code de page HTML Nginx personnalisé.

<!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>

Enregistrez le fichier sous un nom approprié, par exemple error-page.html et fermez-le.

Ensuite, déplacez le fichier vers le répertoire racine de votre document (/var/www/html/). Si le répertoire n'existe pas, vous pouvez le créer à l'aide de la commande mkdir, comme indiqué :

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

Configurez ensuite NGINX pour utiliser la page d'erreur personnalisée à l'aide de la directive error_page. Créez un fichier de configuration appelé custom-error-page.conf sous /etc/nginx/snippets/ comme indiqué.

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

Ajoutez-y les lignes suivantes :

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

Cette configuration provoque une redirection interne vers l'URI/error-page.html chaque fois que NGINX rencontre l'une des erreurs HTTP spécifiées 404, 403, 500 et 503. Le contexte location indique à NGINX où trouver votre page d'erreur.

Enregistrez le fichier et fermez-le.

Incluez maintenant le fichier dans le contexte http afin que tous les blocs du serveur utilisent la page d'erreur, dans le fichier /etc/nginx/nginx.conf :

sudo vim /etc/nginx/nginx.conf

Le répertoire include indique à NGINX d'inclure la configuration dans le fichier .conf spécifié :

include snippets/custom-error-page.conf;

Alternativement, vous pouvez inclure le fichier pour un bloc de serveur spécifique (communément appelé vhost), par exemple /etc/nginx/conf.d/mywebsite. conf. Ajoutez la directive include ci-dessus dans le contexte {} du serveur.

Enregistrez votre fichier de configuration NGINX et rechargez le service comme suit :

sudo systemctl reload nginx.service

Et testez depuis un navigateur si la configuration fonctionne correctement.

Créer différentes pages personnalisées pour chaque erreur NGINX

Vous pouvez également configurer différentes pages d'erreur personnalisées pour chaque erreur HTTP dans NGINX. Nous avons découvert une bonne collection de pages d'erreur nginx personnalisées créées par Denys Vitali sur Github.

Pour configurer le référentiel sur votre serveur, exécutez les commandes suivantes :

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

Ensuite, ajoutez la configuration suivante dans votre contexte http ou dans chaque bloc serveur/hôte virtuel :

include snippets/error_pages.conf;

Enregistrez votre fichier de configuration NGINX et rechargez le service comme suit :

sudo systemctl reload nginx.service

Testez également à partir d’un navigateur si la configuration fonctionne comme prévu. Dans cet exemple, nous avons testé la page d'erreur 404.

C'est tout ce que nous avions pour vous dans ce guide. La directive error_page de NGINX vous permet de rediriger les utilisateurs vers une page, une ressource ou une URL définie lorsqu'une erreur se produit. Il permet également éventuellement de modifier le code d'état HTTP dans la réponse à un client. Pour plus d'informations, lisez la documentation de la page d'erreur nginx.