Yadda ake Ƙirƙirar Shafi na Kuskuren Custom 404 a cikin NGINX


Duk lokacin da NGINX ya gamu da kuskure yayin da yake ƙoƙarin aiwatar da buƙatar abokin ciniki, yana dawo da kuskure. Kowane kuskure ya ƙunshi lambar amsa HTTP da taƙaitaccen bayanin. Kuskuren yawanci ana nunawa ga mai amfani ta hanyar shafin HTML mai sauƙi.

Abin farin ciki, zaku iya saita NGINX don nuna shafukan kuskure na al'ada zuwa masu amfani da rukunin yanar gizonku ko aikace-aikacen yanar gizo. Ana iya samun wannan ta amfani da umarnin NGINX's error_page wanda ake amfani da shi don ayyana URI da za a nuna don takamaiman kuskure. Hakanan zaka iya amfani da shi na zaɓi don canza lambar matsayin HTTP a cikin kanun martani da aka aika ga abokin ciniki.

A cikin wannan jagorar, za mu nuna yadda ake saita NGINX don amfani da shafukan kuskure na al'ada.

Ƙirƙiri Shafi na Musamman guda ɗaya don Duk Kurakurai na NGINX

Kuna iya saita NGINX don amfani da shafi ɗaya na kuskuren al'ada don duk kurakuran da ya dawo ga abokin ciniki. Fara da ƙirƙirar shafin kuskurenku. Ga misali, shafin HTML mai sauƙi wanda ke nuna saƙon:

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

Samfurin HTML Nginx Custom page 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>

Ajiye fayil ɗin tare da suna mai dacewa misali kuskure-page.html kuma rufe shi.

Na gaba, matsar da fayil ɗin zuwa tushen tushen daftarin aiki (/var/www/html/). Idan directory ɗin ba ya wanzu, zaku iya ƙirƙirar ta ta amfani da umarnin mkdir, kamar yadda aka nuna:

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

Sannan saita NGINX don amfani da shafin kuskure na al'ada ta amfani da umarnin kuskure_page. Ƙirƙiri fayil ɗin sanyi mai suna custom-error-page.conf ƙarƙashin /etc/nginx/snippets/ kamar yadda aka nuna.

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

Ƙara layin masu zuwa gare shi:

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

Wannan saitin yana haifar da turawa ta ciki zuwa URI/error-page.html duk lokacin da NGINX ya ci karo da kowane takamaiman kurakuran HTTP 404, 403, 500, da 503. Mahallin wurin yana gaya wa NGINX inda za a sami shafin kuskurenku.

Ajiye fayil ɗin kuma rufe shi.

Yanzu haɗa fayil ɗin a cikin mahallin http domin duk katangar uwar garken su yi amfani da shafin kuskure, a cikin fayil /etc/nginx/nginx.conf:

$ sudo vim /etc/nginx/nginx.conf

Kundin kundin adireshi yana gaya wa NGINX don haɗa da daidaitawa a cikin ƙayyadadden fayil ɗin .conf:

include snippets/custom-error-page.conf;

A madadin, zaku iya haɗa fayil ɗin don takamaiman shingen uwar garken (wanda akafi sani da vhost), misali, /etc/nginx/conf.d/mywebsite.conf. Ƙara abin da ke sama ya haɗa da umarni a cikin mahallin uwar garken {}.

Ajiye fayil ɗin sanyi na NGINX kuma sake loda sabis ɗin kamar haka:

$ sudo systemctl reload nginx.service

Kuma gwada daga mai bincike idan saitin yana aiki lafiya.

Ƙirƙiri Shafukan Al'adu daban-daban don kowane Kuskuren NGINX

Hakanan zaka iya saita shafukan kuskure na al'ada daban-daban don kowane kuskuren HTTP a cikin NGINX. Mun gano kyakkyawan tarin shafukan kuskuren nginx na al'ada wanda Denys Vitali ya kirkira akan Github.

Don saita wurin ajiya akan sabar ku, gudanar da umarni masu zuwa:

$ 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

Na gaba, ƙara saitin mai zuwa a cikin mahallin http ɗin ku ko kowane block/vhost uwar garken:

include snippets/error_pages.conf;

Ajiye fayil ɗin sanyi na NGINX kuma sake loda sabis ɗin kamar haka:

$ sudo systemctl reload nginx.service

Hakanan, gwada daga mai bincike idan tsarin yana aiki kamar yadda aka yi niyya. A cikin wannan misalin, mun gwada shafin kuskure 404.

Wannan shine abin da muka samu a gare ku a cikin wannan jagorar. Umarnin kuskure_shafi na NGINX yana ba ku damar tura masu amfani zuwa wani shafi da aka ayyana ko hanya ko URL lokacin da kuskure ya faru. Hakanan yana ba da izini da zaɓi don gyara lambar matsayin HTTP a cikin martani ga abokin ciniki. Don ƙarin bayani, karanta takardun kuskuren nginx.