Kako ustvariti stran z napako 404 po meri v NGINX


Vsakič, ko NGINX naleti na napako, ko poskuša obdelati odjemalčevo zahtevo, vrne napako. Vsaka napaka vključuje odzivno kodo HTTP in kratek opis. Napaka je običajno prikazana uporabniku prek preproste privzete strani HTML.

Na srečo lahko NGINX konfigurirate tako, da uporabnikom vašega spletnega mesta ali spletne aplikacije prikaže strani z napakami po meri. To je mogoče doseči z uporabo direktive error_page NGINX, ki se uporablja za definiranje URI-ja, ki bo prikazan za določeno napako. Po želji ga lahko uporabite tudi za spreminjanje statusne kode HTTP v glavah odgovora, poslanih odjemalcu.

V tem priročniku bomo pokazali, kako konfigurirati NGINX za uporabo strani z napakami po meri.

Ustvarite eno stran po meri za vse napake NGINX

NGINX lahko konfigurirate tako, da uporablja eno stran z napako po meri za vse napake, ki jih vrne odjemalcu. Začnite tako, da ustvarite stran z napako. Tukaj je primer preproste strani HTML, ki prikazuje sporočilo:

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

Vzorec kode strani po meri 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>

Shranite datoteko z ustreznim imenom, na primer error-page.html, in jo zaprite.

Nato premaknite datoteko v korenski imenik dokumenta (/var/www/html/). Če imenik ne obstaja, ga lahko ustvarite z ukazom mkdir, kot je prikazano:

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

Nato konfigurirajte NGINX za uporabo strani z napako po meri z uporabo direktive error_page. Ustvarite konfiguracijsko datoteko z imenom custom-error-page.conf pod /etc/nginx/snippets/, kot je prikazano.

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

Dodajte mu naslednje vrstice:

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

Ta konfiguracija povzroči notranjo preusmeritev na URI/error-page.html vsakič, ko NGINX naleti na katero koli od podanih napak HTTP 404, 403, 500 in 503. Kontekst lokacije pove NGINX-u, kje naj najde vašo stran z napako.

Shranite datoteko in jo zaprite.

Zdaj vključite datoteko v kontekst http, tako da vsi bloki strežnika uporabljajo stran z napako, v datoteki /etc/nginx/nginx.conf:

$ sudo vim /etc/nginx/nginx.conf

Imenik include pove NGINX, naj vključi konfiguracijo v podano datoteko .conf:

include snippets/custom-error-page.conf;

Druga možnost je, da vključite datoteko za določen blok strežnika (splošno znan kot vhost), na primer /etc/nginx/conf.d/mywebsite.conf. Dodajte zgornjo direktivo o vključevanju v kontekst strežnika {}.

Shranite konfiguracijsko datoteko NGINX in znova naložite storitev, kot sledi:

$ sudo systemctl reload nginx.service

In v brskalniku preizkusite, ali nastavitev deluje dobro.

Ustvarite različne strani po meri za vsako napako NGINX

Za vsako napako HTTP v NGINX lahko nastavite tudi različne strani z napakami po meri. Na Githubu smo odkrili dobro zbirko strani z napakami nginx po meri, ki jih je ustvaril Denys Vitali.

Če želite nastaviti repozitorij na strežniku, zaženite naslednje ukaze:

$ 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

Nato dodajte naslednjo konfiguracijo v kontekst http ali v vsak blok strežnika/vhost:

include snippets/error_pages.conf;

Shranite konfiguracijsko datoteko NGINX in znova naložite storitev, kot sledi:

$ sudo systemctl reload nginx.service

Prav tako v brskalniku preizkusite, ali konfiguracija deluje, kot je predvideno. V tem primeru smo preizkusili stran z napako 404.

To je vse, kar smo imeli za vas v tem priročniku. Direktiva error_page NGINX vam omogoča, da uporabnike preusmerite na določeno stran ali vir ali URL, ko pride do napake. Po želji omogoča tudi spreminjanje statusne kode HTTP v odgovoru odjemalcu. Za več informacij preberite dokumentacijo strani o napakah nginx.