Wéi erstellt Dir Custom 404 Feeler Säit an NGINX
All Kéier wann NGINX e Feeler begéint wéi et probéiert d'Ufro vun engem Client ze veraarbecht, gëtt e Feeler zréck. All Feeler enthält en HTTP Äntwert Code an eng kuerz Beschreiwung. De Feeler gëtt normalerweis e Benotzer iwwer eng einfach Standard HTML Säit ugewisen.
Glécklecherweis kënnt Dir NGINX konfiguréieren fir personaliséiert Fehlersäiten un d'Benotzer vun Ärem Site oder Webapplikatioun ze weisen. Dëst kann erreecht ginn mat der NGINX's error_page Direktiv déi benotzt gëtt fir d'URI ze definéieren déi fir e spezifizéierte Feeler gewise gëtt. Dir kënnt et och optional benotze fir den HTTP-Statuscode an den Äntwertheaders ze änneren, déi un e Client geschéckt ginn.
An dësem Guide wäerte mir weisen wéi Dir NGINX konfiguréiert fir personaliséiert Feeler Säiten ze benotzen.
Erstellt eng eenzeg Benotzerdefinéiert Säit fir all NGINX Feeler
Dir kënnt NGINX konfiguréieren fir eng eenzeg personaliséiert Fehlersäit fir all Feeler ze benotzen déi et an e Client zréckkënnt. Start andeems Dir Är Feeler Säit erstellt. Hei ass e Beispill, eng einfach HTML Säit déi de Message weist:
“Sorry, the page can't be loaded! Contact the site's administrator or support for assistance.” to a client.
Beispill HTML Nginx Benotzerdefinéiert Säit Code.
<!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>
Späichert d'Datei mat engem passenden Numm zum Beispill error-page.html a maach se zou.
Als nächst, réckelt d'Datei an Ären Dokumentroot Verzeichnis (/var/www/html/). Wann de Verzeichnis net existéiert, kënnt Dir et mam Kommando mkdir erstellen, wéi gewisen:
$ sudo mkdir -p /var/www/html/ $ sudo cp error-page.html /var/www/html/
Dann konfiguréieren NGINX fir déi personaliséiert Fehlersäit mat der error_page Direktiv ze benotzen. Erstellt eng Konfiguratiounsdatei mam Numm custom-error-page.conf ënner /etc/nginx/snippets/ wéi gewisen.
$ sudo mkdir /etc/nginx/snippets/ $ sudo vim /etc/nginx/snippets/custom-error-page.conf
Füügt déi folgend Zeilen derbäi:
error_page 404 403 500 503 /error-page.html;
location = /error-page.html {
root /var/www/html;
internal;
}
Dës Konfiguratioun verursaacht eng intern Viruleedung op d'URI/error-page.html all Kéier wann NGINX ee vun de spezifizéierte HTTP-Fehler 404, 403, 500 an 503 begéint.
Späichert d'Datei a maach se zou.
Gitt elo d'Datei an den http Kontext sou datt all Serverblocken d'Feeler Säit benotzen, an der /etc/nginx/nginx.conf Datei:
$ sudo vim /etc/nginx/nginx.conf
D'Inkludéieren Verzeechnes erzielt NGINX d'Konfiguratioun an der spezifizéierter .conf Datei ze enthalen:
include snippets/custom-error-page.conf;
Alternativ kënnt Dir d'Datei fir e spezifesche Serverblock (allgemeng bekannt als vhost) enthalen, zum Beispill /etc/nginx/conf.d/mywebsite.conf. Füügt déi uewe genannte Inkludéiert Direktiv am Server {} Kontext.
Späichert Är NGINX Konfiguratiounsdatei a lued de Service wéi folgend:
$ sudo systemctl reload nginx.service
A test aus engem Browser ob de Setup gutt funktionnéiert.
Erstellt verschidde Benotzerdefinéiert Säiten fir all NGINX Feeler
Dir kënnt och verschidde personaliséiert Feeler Säiten fir all HTTP-Fehler an NGINX opsetzen. Mir hunn eng gutt Sammlung vu personaliséierten nginx Feeler Säiten entdeckt, erstallt vum Denys Vitali op Github.
Fir de Repository op Ärem Server opzestellen, lafen déi folgend Kommandoen:
$ 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
Als nächst füügt déi folgend Konfiguratioun entweder an Ärem http Kontext oder all Serverblock/vhost derbäi:
include snippets/error_pages.conf;
Späichert Är NGINX Konfiguratiounsdatei a lued de Service wéi folgend:
$ sudo systemctl reload nginx.service
Test och vun engem Browser ob d'Konfiguratioun funktionnéiert wéi virgesinn. An dësem Beispill hu mir d'404 Feeler Säit getest.
Dat ass alles wat mir an dësem Guide fir Iech haten. NGINX's error_page Direktiv erlaabt Iech Benotzer op eng definéiert Säit oder Ressource oder URL ze redirect wann e Feeler geschitt. Et erlaabt och optional d'Ännerung vum HTTP-Statuscode an der Äntwert op e Client. Fir méi Informatioun, liest d'nginx Feeler Säit Dokumentatioun.