Giunsa Paghimo ang Custom 404 Error Page sa NGINX


Matag higayon nga makasugat og sayop ang NGINX samtang mosulay kini sa pagproseso sa hangyo sa kliyente, magbalik kini og sayop. Ang matag kasaypanan naglakip sa HTTP response code ug mubo nga paghulagway. Ang sayup kasagarang gipakita sa usa ka tiggamit pinaagi sa usa ka yano nga default nga panid sa HTML.

Maayo na lang, mahimo nimong i-configure ang NGINX aron ipakita ang naandan nga mga panid sa sayup sa mga tiggamit sa imong site o web application. Mahimo kini nga makab-ot gamit ang direktiba sa error_page sa NGINX nga gigamit aron mahibal-an ang URI nga ipakita alang sa usa ka piho nga sayup. Mahimo usab nimo, opsyonal nga gamiton kini aron usbon ang HTTP status code sa mga tubag nga mga ulohan nga gipadala ngadto sa usa ka kliyente.

Sa kini nga giya, ipakita namon kung giunsa ang pag-configure sa NGINX aron magamit ang naandan nga mga panid sa sayup.

Paghimo og Usa ka Custom nga Panid alang sa Tanan nga NGINX Errors

Mahimo nimong i-configure ang NGINX aron magamit ang usa ka us aka kostumbre nga panid sa sayup alang sa tanan nga mga sayup nga gibalik niini sa usa ka kliyente. Pagsugod pinaagi sa paghimo sa imong panid sa sayup. Ania ang usa ka pananglitan, usa ka yano nga panid sa HTML nga nagpakita sa mensahe:

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

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

I-save ang file nga adunay angay nga ngalan pananglitan error-page.html ug isira kini.

Sunod, ibalhin ang file sa imong direktoryo sa gamut nga dokumento (/var/www/html/). Kung wala ang direktoryo, mahimo nimo kini buhaton gamit ang mkdir command, ingon sa gipakita:

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

Dayon i-configure ang NGINX nga gamiton ang custom error page gamit ang error_page nga direktiba. Paghimo og configuration file nga gitawag og custom-error-page.conf ubos sa /etc/nginx/snippets/ sama sa gipakita.

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

Idugang ang mosunod nga mga linya niini:

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

Kini nga configuration hinungdan sa usa ka internal nga redirect ngadto sa URI/error-page.html sa matag higayon nga ang NGINX makasugat sa bisan unsa sa mga piho nga HTTP errors 404, 403, 500, ug 503. Ang konteksto sa lokasyon nagsulti sa NGINX kung asa makit-an ang imong panid sa sayup.

I-save ang file ug isira kini.

Karon iapil ang file sa konteksto sa http aron ang tanan nga mga bloke sa server mogamit sa panid sa sayup, sa /etc/nginx/nginx.conf file:

$ sudo vim /etc/nginx/nginx.conf

Ang include directory nagsulti sa NGINX nga iapil ang configuration sa gipiho nga .conf file:

include snippets/custom-error-page.conf;

Sa laing paagi, mahimo nimong iapil ang file alang sa usa ka piho nga block sa server (kasagaran nailhan nga vhost), pananglitan, /etc/nginx/conf.d/mywebsite.conf. Idugang ang naa sa ibabaw naglakip sa direktiba sa server {} konteksto.

I-save ang imong NGINX configuration file ug i-reload ang serbisyo sama sa mosunod:

$ sudo systemctl reload nginx.service

Ug sulayi gikan sa usa ka browser kung maayo ang pag-setup.

Paghimo ug Lahi nga Custom nga mga Panid para sa Matag NGINX Error

Mahimo usab nimo nga i-set up ang lainlaing mga panid sa sayup nga kostumbre alang sa matag sayup sa HTTP sa NGINX. Nadiskobrehan namo ang usa ka maayong koleksyon sa custom nga nginx error page nga gihimo ni Denys Vitali sa Github.

Aron ma-set up ang repository sa imong server, padagana ang mosunod nga mga sugo:

$ 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

Sunod, idugang ang mosunud nga pagsumpo sa imong konteksto sa http o matag server block/vhost:

include snippets/error_pages.conf;

I-save ang imong NGINX configuration file ug i-reload ang serbisyo sama sa mosunod:

$ sudo systemctl reload nginx.service

Usab, sulayi gikan sa usa ka browser kung ang pagsumpo nagtrabaho sumala sa katuyoan. Sa kini nga pananglitan, gisulayan namon ang panid sa sayup nga 404.

Mao ra kana ang among naa alang kanimo sa kini nga giya. Ang direktiba sa error_page sa NGINX nagtugot kanimo sa pag-redirect sa mga tiggamit sa usa ka piho nga panid o kapanguhaan o URL kung adunay usa ka sayup. Gitugotan usab niini ang pagbag-o sa code sa status sa HTTP sa tubag sa usa ka kliyente. Para sa dugang nga impormasyon, basaha ang nginx error page documentation.