Hvernig á að búa til sérsniðna 404 villusíðu í NGINX


Í hvert sinn sem NGINX rekst á villu þegar það reynir að vinna úr beiðni viðskiptavinar, skilar það villu. Hver villa inniheldur HTTP svarkóða og stutta lýsingu. Villan er venjulega birt notanda í gegnum einfalda sjálfgefna HTML síðu.

Sem betur fer geturðu stillt NGINX til að birta sérsniðnar villusíður fyrir notendur síðunnar eða vefforritsins. Þetta er hægt að ná með því að nota error_page tilskipun NGINX sem er notuð til að skilgreina URI sem verður sýnd fyrir tiltekna villu. Þú getur líka, valfrjálst, notað það til að breyta HTTP stöðukóðanum í svarhausunum sem sendir eru til viðskiptavinar.

Í þessari handbók munum við sýna hvernig á að stilla NGINX til að nota sérsniðnar villusíður.

Búðu til eina sérsniðna síðu fyrir allar NGINX villur

Þú getur stillt NGINX til að nota eina sérsniðna villusíðu fyrir allar villur sem það skilar til viðskiptavinar. Byrjaðu á því að búa til villusíðuna þína. Hér er dæmi, einföld HTML síða sem sýnir skilaboðin:

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

Dæmi um HTML Nginx sérsniðinn síðukóða.

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

Vistaðu skrána með viðeigandi nafni til dæmis error-page.html og lokaðu henni.

Næst skaltu færa skrána í rótarskrá skjalsins (/var/www/html/). Ef skráin er ekki til geturðu búið hana til með mkdir skipuninni, eins og sýnt er:

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

Stilltu síðan NGINX til að nota sérsniðnu villusíðuna með því að nota error_page tilskipunina. Búðu til stillingarskrá sem heitir custom-error-page.conf undir /etc/nginx/snippets/ eins og sýnt er.

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

Bættu eftirfarandi línum við það:

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

Þessi stilling veldur innri tilvísun á URI/error-page.html í hvert sinn sem NGINX rekst á einhverja af tilgreindum HTTP villum 404, 403, 500 og 503. Staðsetningarsamhengið segir NGINX hvar á að finna villusíðuna þína.

Vistaðu skrána og lokaðu henni.

Settu nú skrána inn í http samhengið þannig að allar netþjónablokkir noti villusíðuna, í /etc/nginx/nginx.conf skránni:

$ sudo vim /etc/nginx/nginx.conf

Include mappan segir NGINX að innihalda stillingarnar í tilgreindri .conf skrá:

include snippets/custom-error-page.conf;

Að öðrum kosti geturðu sett skrána fyrir tiltekna netþjónsblokk (almennt þekktur sem vhost), til dæmis /etc/nginx/conf.d/mywebsite.conf. Bættu við ofangreindu innihaldatilskipuninni í {} netþjónssamhenginu.

Vistaðu NGINX stillingarskrána þína og endurhlaðið þjónustuna sem hér segir:

$ sudo systemctl reload nginx.service

Og prófaðu úr vafra hvort uppsetningin virkar vel.

Búðu til mismunandi sérsniðnar síður fyrir hverja NGINX villu

Þú getur líka sett upp mismunandi sérsniðnar villusíður fyrir hverja HTTP villu í NGINX. Við uppgötvuðum gott safn af sérsniðnum nginx villusíðum búnar til af Denys Vitali á Github.

Til að setja upp geymsluna á netþjóninum þínum skaltu keyra eftirfarandi skipanir:

$ 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

Næst skaltu bæta við eftirfarandi stillingum í annað hvort http samhengi þínu eða hverri netþjónsblokk/vhost:

include snippets/error_pages.conf;

Vistaðu NGINX stillingarskrána þína og endurhlaðið þjónustuna sem hér segir:

$ sudo systemctl reload nginx.service

Prófaðu líka í vafra hvort uppsetningin virkar eins og til er ætlast. Í þessu dæmi prófuðum við 404 villusíðuna.

Það er allt sem við höfðum fyrir þig í þessari handbók. error_page tilskipun NGINX gerir þér kleift að beina notendum á skilgreinda síðu eða tilföng eða vefslóð þegar villa kemur upp. Það gerir einnig mögulega kleift að breyta HTTP stöðukóðanum í svari til viðskiptavinar. Fyrir frekari upplýsingar, lestu skjölin fyrir nginx villusíðuna.