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

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

À chaque fois Nginx rencontre une erreur alors qu'elle tente de traiter la demande d'un client, il renvoie une erreur. Chaque erreur comprend un Http code de réponse et une brève description. L'erreur s'affiche généralement à un utilisateur via une simple défaut Html page.

Heureusement, vous pouvez configurer Nginx Pour afficher les pages d'erreur personnalisées aux utilisateurs de votre site ou de votre application Web. Cela peut être réalisé en utilisant l'erreur_page de Nginx directif qui est utilisé pour définir le Uri qui sera affiché pour une erreur spécifiée. Vous pouvez également l'utiliser éventuellement 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éez 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 page HTML simple qui affiche le message:

«Désolé, la page ne peut pas être chargée! Contactez l'administrateur du site ou le support pour obtenir de l'aide.«À un client. 

Exemple de code de page personnalisé HTML Nginx.

    * -webkit-box-size: border-box; Dimensionnement en boîte: Border-Box;  corps rembourrage: 0; marge: 0;  #NotFound position: relative; Hauteur: 100VH;  #pas trouvé .Notfound position: absolue; Gauche: 50%; en haut: 50%; -Webkit-transform: traduire (-50%, -50%); -ms-transform: traduire (-50%, -50%); Transformer: traduire (-50%, -50%);  .NotFound max-largeth: 520px; Largeur: 100%; hauteur de ligne: 1.4; Texte-aligne: Centre;  .pas trouvé .notfound-error position: relatif; hauteur: 200px; marge: 0px auto 20px; Z-Index: -1;  .pas trouvé .Notfound-Error H1 Font-Family: 'Montserrat', Sans-Serif; taille de police: 200px; Police-poids: 300; marge: 0px; Couleur: # 211B19; Position: absolue; Gauche: 50%; en haut: 50%; -Webkit-transform: traduire (-50%, -50%); -ms-transform: traduire (-50%, -50%); Transformer: traduire (-50%, -50%);  @media uniquement écran et (max-largeur: 767px)  .pas trouvé .Notfound-Error H1 Font-Size: 148px;  @media uniquement écran et (max-largeur: 480px)  .pas trouvé .notfound-error hauteur: 148px; marge: 0px automatique 10px;  .pas trouvé .Notfound-Error H1 Font-Size: 120px; Police-poids: 200px;  .pas trouvé .Notfound-Error H2 Font-Size: 30px;  .Notfound a padding: 7px 15px; taille de police: 24px;  .H2 Font-Size: 148px;       

Désolé la page ne peut pas être chargée!

Contactez l'administrateur du site ou le support pour obtenir de l'aide.

Enregistrez le fichier avec un nom approprié par exemple page d'erreur.html Et fermez-le.

Ensuite, déplacez le fichier vers votre répertoire racine de 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 / 

Puis configurer Nginx Pour utiliser la page d'erreur personnalisée à l'aide du error_page directif. Créer un fichier de configuration appelé page-page sur mesure.confli sous / etc / nginx / extraits / comme montré.

$ sudo mkdir / etc / nginx / extraits / $ sudo vim / etc / nginx / extraits / personnalité-error-page.confli 

Ajoutez-y les lignes suivantes:

error_page 404 403 500 503 / Page d'erreur.html; emplacement = / erre-page.html root / var / www / html; interne;  

Cette configuration provoque une redirection interne vers le Uri/ /page d'erreur.html à chaque fois Nginx rencontre l'une des erreurs HTTP spécifiées 404, 403, 500 et 503. Le emplacement Le contexte raconte Nginx où trouver votre page d'erreur.

Enregistrez le fichier et fermez-le.

Incluez maintenant le fichier dans le http contexte de sorte que tous les blocs de serveur utilisent la page d'erreur, dans le / etc / nginx / nginx.confli déposer:

$ sudo vim / etc / nginx / nginx.confli 

Le inclure Le répertoire raconte Nginx pour inclure la configuration dans le .confli déposer:

Inclure des extraits / pages d'erreur personnalisés.conf; 

Alternativement, vous pouvez inclure le fichier pour un bloc de serveur spécifique (communément appelé vhost), Par exemple, / etc / nginx / confre.d / mywebsite.confli. Ajouter ce qui précède inclure Directive dans le serveur contexte.

Sauvez votre Nginx Fichier de configuration et recharger le service comme suit:

$ sudo systemctl recharger nginx.service 

Et tester à partir d'un navigateur si la configuration fonctionne bien.

Page nginx personnalisée 404

Créez 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 / par défaut $ sudo mkdir / etc / nginx / snippets / $ sudo ln -s / srv / http / default / snippets / error_pages.conf / etc / nginx / extraits / error_pages.Conf $ sudo ln -s / srv / http / default / extractets / error_pages_content.conf / etc / nginx / extraits / error_pages_content.confli 

Ensuite, ajoutez la configuration suivante dans votre http Contexte ou chaque bloc de serveur / VHOST:

Inclure des extraits / error_pages.conf; 

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

$ sudo systemctl recharger 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.

Page d'erreur Nginx Custom 404

C'est tout ce que nous avions pour vous dans ce guide. Nginx error_page La directive vous permet de rediriger les utilisateurs vers une page définie ou une ressource ou une URL 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.