À chaque fois NGINX rencontre une erreur alors qu’il tente de traiter la demande d’un client, il renvoie une erreur. Chaque erreur comprend un HTTP code de réponse et une courte description. L’erreur est généralement affichée à l’utilisateur via une simple valeur par défaut HTML page.
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 error_page de NGINX directif qui sert à définir la 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 d’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 avec un nom approprié par exemple erreur-page.html et fermez-le.
Ensuite, déplacez le fichier dans 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 page_erreur directif. Créez un fichier de configuration appelé page d’erreur personnalisée.conf en dessous de /etc/nginx/snippets/ comme montré.
$ 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 le URI/erreur-page.html à chaque fois NGINX rencontre l’une des erreurs HTTP spécifiées 404, 403, 500 et 503. Le lieu le contexte raconte NGINX où trouver votre page d’erreur.
Enregistrez le fichier et fermez-le.
Incluez maintenant le fichier dans le http contexte pour que tous les blocs du serveur utilisent la page d’erreur, dans le /etc/nginx/nginx.conf fichier:
$ sudo vim /etc/nginx/nginx.conf
le inclure répertoire raconte NGINX pour inclure la configuration dans le fichier spécifié .conf fichier:
include snippets/custom-error-page.conf;
Alternativement, vous pouvez inclure le fichier d’un bloc de serveur spécifique (communément appelé vhost), par exemple, /etc/nginx/conf.d/monsiteweb.conf. Ajoutez ce qui précède inclure directive dans le serveur {} le contexte.
Sauvez votre NGINX fichier de configuration 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éé par Denys Vitali au GithubGenericName.
Pour configurer le dépôt 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 http contexte ou chaque bloc de serveur/vhost :
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. NGINX page_erreur La directive 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 le page d’erreur nginx Documentation.
Si vous appréciez ce que nous faisons ici sur TecMint, vous devriez considérer :
TecMint est le site communautaire à la croissance la plus rapide et le plus fiable pour tout type d’articles, de guides et de livres Linux sur le Web. Des millions de personnes visitent TecMint ! pour rechercher ou parcourir les milliers d’articles publiés accessibles GRATUITEMENT à tous.
Si vous aimez ce que vous lisez, pensez à nous acheter un café (ou 2) en signe d’appréciation.
Nous sommes reconnaissants pour votre soutien sans fin.
