Jinsi ya Kuunda Ukurasa wa Kosa wa 404 katika NGINX


Kila wakati NGINX inapokutana na hitilafu inapojaribu kushughulikia ombi la mteja, hurejesha hitilafu. Kila hitilafu inajumuisha msimbo wa majibu wa HTTP na maelezo mafupi. Hitilafu kawaida huonyeshwa kwa mtumiaji kupitia ukurasa rahisi wa HTML.

Kwa bahati nzuri, unaweza kusanidi NGINX ili kuonyesha kurasa za hitilafu maalum kwa watumiaji wa tovuti yako au wa programu ya wavuti. Hili linaweza kutekelezwa kwa kutumia maelekezo ya ukurasa wa error_page ya NGINX ambayo hutumiwa kufafanua URI ambayo itaonyeshwa kwa hitilafu maalum. Unaweza pia, kwa hiari kuitumia kurekebisha msimbo wa hali ya HTTP katika vichwa vya majibu vilivyotumwa kwa mteja.

Katika mwongozo huu, tutaonyesha jinsi ya kusanidi NGINX kutumia kurasa za makosa maalum.

Unda Ukurasa Mmoja Maalum kwa Makosa Yote ya NGINX

Unaweza kusanidi NGINX kutumia ukurasa mmoja wa hitilafu maalum kwa makosa yote ambayo inarejesha kwa mteja. Anza kwa kuunda ukurasa wako wa hitilafu. Hapa kuna mfano, ukurasa rahisi wa HTML unaoonyesha ujumbe:

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

Sampuli ya msimbo Maalum wa ukurasa wa 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>

Hifadhi faili kwa jina linalofaa kwa mfano error-page.html na uifunge.

Ifuatayo, sogeza faili kwenye saraka ya mizizi ya hati (/var/www/html/). Ikiwa saraka haipo, unaweza kuiunda kwa kutumia amri ya mkdir, kama inavyoonyeshwa:

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

Kisha usanidi NGINX kutumia ukurasa wa hitilafu maalum kwa kutumia maelekezo ya error_page. Unda faili ya usanidi inayoitwa custom-error-page.conf chini ya /etc/nginx/snippets/ kama inavyoonyeshwa.

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

Ongeza mistari ifuatayo kwake:

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

Mipangilio hii husababisha uelekezaji upya wa ndani kwa URI/error-page.html kila wakati NGINX inapokumbana na hitilafu zozote kati ya zilizobainishwa za HTTP 404, 403, 500, na 503. Muktadha wa eneo huiambia NGINX mahali pa kupata ukurasa wako wa hitilafu.

Hifadhi faili na uifunge.

Sasa jumuisha faili katika muktadha wa http ili vizuizi vyote vya seva vitumie ukurasa wa makosa, kwenye /etc/nginx/nginx.conf faili:

$ sudo vim /etc/nginx/nginx.conf

Saraka ya pamoja inaiambia NGINX kujumuisha usanidi katika faili maalum ya .conf:

include snippets/custom-error-page.conf;

Vinginevyo, unaweza kujumuisha faili kwa kizuizi maalum cha seva (kinachojulikana kama vhost), kwa mfano, /etc/nginx/conf.d/mywebsite.conf. Ongeza yaliyo hapo juu ni pamoja na maagizo katika muktadha wa seva {}.

Hifadhi faili yako ya usanidi wa NGINX na upakie upya huduma kama ifuatavyo:

$ sudo systemctl reload nginx.service

Na jaribu kutoka kwa kivinjari ikiwa usanidi unafanya kazi vizuri.

Unda Kurasa Tofauti za Maalum kwa Kila Hitilafu ya NGINX

Unaweza pia kusanidi kurasa tofauti za makosa maalum kwa kila kosa la HTTP katika NGINX. Tuligundua mkusanyiko mzuri wa kurasa za makosa ya nginx iliyoundwa na Denys Vitali kwenye Github.

Ili kusanidi hazina kwenye seva yako, endesha amri zifuatazo:

$ 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

Ifuatayo, ongeza usanidi ufuatao katika muktadha wako wa http au kila kizuizi cha seva/vhost:

include snippets/error_pages.conf;

Hifadhi faili yako ya usanidi wa NGINX na upakie upya huduma kama ifuatavyo:

$ sudo systemctl reload nginx.service

Pia, jaribu kutoka kwa kivinjari ikiwa usanidi unafanya kazi inavyokusudiwa. Katika mfano huu, tulijaribu ukurasa wa makosa 404.

Hiyo ndiyo tu tuliyokuwa nayo kwa ajili yako katika mwongozo huu. Maelekezo ya ukurasa wa makosa ya NGINX hukuruhusu kuelekeza watumiaji kwenye ukurasa uliobainishwa au rasilimali au URL hitilafu inapotokea. Pia inaruhusu kwa hiari urekebishaji wa msimbo wa hali ya HTTP katika jibu kwa mteja. Kwa habari zaidi, soma hati za ukurasa wa makosa ya nginx.