NGINX-ൽ കസ്റ്റം 404 പിശക് പേജ് എങ്ങനെ സൃഷ്ടിക്കാം


ഓരോ തവണയും NGINX ഒരു ക്ലയന്റിന്റെ അഭ്യർത്ഥന പ്രോസസ്സ് ചെയ്യാൻ ശ്രമിക്കുമ്പോൾ ഒരു പിശക് നേരിടുമ്പോൾ, അത് ഒരു പിശക് നൽകുന്നു. ഓരോ പിശകിലും ഒരു HTTP പ്രതികരണ കോഡും ഒരു ചെറിയ വിവരണവും ഉൾപ്പെടുന്നു. പിശക് സാധാരണയായി ഒരു ലളിതമായ ഡിഫോൾട്ട് HTML പേജ് വഴി ഉപയോക്താവിന് പ്രദർശിപ്പിക്കും.

ഭാഗ്യവശാൽ, നിങ്ങളുടെ സൈറ്റിന്റെ അല്ലെങ്കിൽ വെബ് ആപ്ലിക്കേഷന്റെ ഉപയോക്താക്കൾക്ക് ഇഷ്uടാനുസൃത പിശക് പേജുകൾ പ്രദർശിപ്പിക്കുന്നതിന് നിങ്ങൾക്ക് NGINX കോൺഫിഗർ ചെയ്യാം. ഒരു നിർദ്ദിഷ്uട പിശകിനായി കാണിക്കുന്ന URI നിർവചിക്കാൻ ഉപയോഗിക്കുന്ന NGINX-ന്റെ പിശക്_പേജ് നിർദ്ദേശം ഉപയോഗിച്ച് ഇത് നേടാനാകും. ഒരു ക്ലയന്റിലേക്ക് അയച്ച പ്രതികരണ തലക്കെട്ടുകളിലെ HTTP സ്റ്റാറ്റസ് കോഡ് പരിഷ്uക്കരിക്കുന്നതിന് നിങ്ങൾക്ക് ഇത് ഓപ്uഷണലായി ഉപയോഗിക്കാം.

ഈ ഗൈഡിൽ, ഇഷ്uടാനുസൃത പിശക് പേജുകൾ ഉപയോഗിക്കുന്നതിന് NGINX എങ്ങനെ കോൺഫിഗർ ചെയ്യാമെന്ന് ഞങ്ങൾ കാണിക്കും.

എല്ലാ NGINX പിശകുകൾക്കുമായി ഒരൊറ്റ ഇഷ്uടാനുസൃത പേജ് സൃഷ്uടിക്കുക

ഒരു ക്ലയന്റിലേക്ക് മടങ്ങുന്ന എല്ലാ പിശകുകൾക്കും ഒരൊറ്റ ഇഷ്uടാനുസൃത പിശക് പേജ് ഉപയോഗിക്കുന്നതിന് നിങ്ങൾക്ക് NGINX കോൺഫിഗർ ചെയ്യാൻ കഴിയും. നിങ്ങളുടെ പിശക് പേജ് സൃഷ്ടിച്ചുകൊണ്ട് ആരംഭിക്കുക. സന്ദേശം പ്രദർശിപ്പിക്കുന്ന ഒരു ലളിതമായ HTML പേജ് ഇതാ:

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

മാതൃക HTML Nginx ഇഷ്uടാനുസൃത പേജ് കോഡ്.

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

ഉദാഹരണത്തിന് error-page.html എന്നതിന് അനുയോജ്യമായ പേരിൽ ഫയൽ സേവ് ചെയ്ത് അത് അടയ്ക്കുക.

അടുത്തതായി, നിങ്ങളുടെ പ്രമാണ റൂട്ട് ഡയറക്ടറിയിലേക്ക് ഫയൽ നീക്കുക (/var/www/html/). ഡയറക്ടറി നിലവിലില്ലെങ്കിൽ, കാണിച്ചിരിക്കുന്നതുപോലെ mkdir കമാൻഡ് ഉപയോഗിച്ച് നിങ്ങൾക്കത് സൃഷ്ടിക്കാൻ കഴിയും:

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

പിന്നീട് error_page ഡയറക്uടീവ് ഉപയോഗിച്ച് ഇഷ്uടാനുസൃത പിശക് പേജ് ഉപയോഗിക്കുന്നതിന് NGINX കോൺഫിഗർ ചെയ്യുക. കാണിച്ചിരിക്കുന്നതുപോലെ /etc/nginx/snippets/ എന്നതിന് കീഴിൽ custom-error-page.conf എന്ന പേരിൽ ഒരു കോൺഫിഗറേഷൻ ഫയൽ സൃഷ്ടിക്കുക.

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

അതിൽ ഇനിപ്പറയുന്ന വരികൾ ചേർക്കുക:

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

404, 403, 500, 503 എന്നീ നിർദ്ദിഷ്uട HTTP പിശകുകളിൽ ഏതെങ്കിലും NGINX അഭിമുഖീകരിക്കുമ്പോഴെല്ലാം ഈ കോൺഫിഗറേഷൻ URI/error-page.html-ലേക്ക് ഒരു ആന്തരിക റീഡയറക്uട് ഉണ്ടാക്കുന്നു. നിങ്ങളുടെ പിശക് പേജ് എവിടെ കണ്ടെത്തണമെന്ന് ലൊക്കേഷൻ സന്ദർഭം NGINX-നോട് പറയുന്നു.

ഫയൽ സംരക്ഷിച്ച് അത് അടയ്ക്കുക.

ഇപ്പോൾ ഫയൽ http സന്ദർഭത്തിൽ ഉൾപ്പെടുത്തുക, അങ്ങനെ എല്ലാ സെർവർ ബ്ലോക്കുകളും /etc/nginx/nginx.conf ഫയലിലെ പിശക് പേജ് ഉപയോഗിക്കുന്നു:

$ sudo vim /etc/nginx/nginx.conf

നിർദ്ദിഷ്ട .conf ഫയലിൽ കോൺഫിഗറേഷൻ ഉൾപ്പെടുത്താൻ ഉൾപ്പെടുത്തിയ ഡയറക്ടറി NGINX-നോട് പറയുന്നു:

include snippets/custom-error-page.conf;

പകരമായി, നിങ്ങൾക്ക് ഒരു നിർദ്ദിഷ്ട സെർവർ ബ്ലോക്കിനായി ഫയൽ ഉൾപ്പെടുത്താം (സാധാരണയായി vhost എന്നറിയപ്പെടുന്നു), ഉദാഹരണത്തിന്, /etc/nginx/conf.d/mywebsite.conf. സെർവർ {} സന്ദർഭത്തിൽ മുകളിലുള്ള ഉൾപ്പെടുത്തിയ നിർദ്ദേശങ്ങൾ ചേർക്കുക.

നിങ്ങളുടെ NGINX കോൺഫിഗറേഷൻ ഫയൽ സംരക്ഷിച്ച് സേവനം ഇനിപ്പറയുന്ന രീതിയിൽ റീലോഡ് ചെയ്യുക:

$ sudo systemctl reload nginx.service

സെറ്റപ്പ് നന്നായി പ്രവർത്തിക്കുന്നുണ്ടോയെന്ന് ബ്രൗസറിൽ നിന്ന് പരിശോധിക്കുക.

ഓരോ NGINX പിശകുകൾക്കും വ്യത്യസ്ത ഇഷ്uടാനുസൃത പേജുകൾ സൃഷ്uടിക്കുക

NGINX-ലെ ഓരോ HTTP പിശകിനും വ്യത്യസ്ത ഇഷ്uടാനുസൃത പിശക് പേജുകൾ നിങ്ങൾക്ക് സജ്ജീകരിക്കാനും കഴിയും. Github-ൽ Denys Vitali സൃഷ്ടിച്ച ഇഷ്uടാനുസൃത nginx പിശക് പേജുകളുടെ ഒരു നല്ല ശേഖരം ഞങ്ങൾ കണ്ടെത്തി.

നിങ്ങളുടെ സെർവറിൽ റിപ്പോസിറ്ററി സജ്ജീകരിക്കുന്നതിന്, ഇനിപ്പറയുന്ന കമാൻഡുകൾ പ്രവർത്തിപ്പിക്കുക:

$ 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

അടുത്തതായി, നിങ്ങളുടെ http സന്ദർഭത്തിലോ ഓരോ സെർവർ ബ്ലോക്കിലോ/vhost-ലോ ഇനിപ്പറയുന്ന കോൺഫിഗറേഷൻ ചേർക്കുക:

include snippets/error_pages.conf;

നിങ്ങളുടെ NGINX കോൺഫിഗറേഷൻ ഫയൽ സംരക്ഷിച്ച് സേവനം ഇനിപ്പറയുന്ന രീതിയിൽ റീലോഡ് ചെയ്യുക:

$ sudo systemctl reload nginx.service

കൂടാതെ, കോൺഫിഗറേഷൻ ഉദ്ദേശിച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നുണ്ടോയെന്ന് ബ്രൗസറിൽ നിന്ന് പരിശോധിക്കുക. ഈ ഉദാഹരണത്തിൽ, ഞങ്ങൾ 404 പിശക് പേജ് പരീക്ഷിച്ചു.

ഈ ഗൈഡിൽ ഞങ്ങൾക്ക് നിങ്ങൾക്കായി ഉണ്ടായിരുന്നത് ഇത്രമാത്രം. ഒരു പിശക് സംഭവിക്കുമ്പോൾ, ഒരു നിർവ്വചിച്ച പേജിലേക്കോ ഉറവിടത്തിലേക്കോ URL-ലേക്കോ ഉപയോക്താക്കളെ റീഡയറക്uട് ചെയ്യാൻ NGINX-ന്റെ error_page നിർദ്ദേശം നിങ്ങളെ അനുവദിക്കുന്നു. ഒരു ക്ലയന്റിനുള്ള പ്രതികരണത്തിൽ HTTP സ്റ്റാറ്റസ് കോഡ് പരിഷ്uക്കരിക്കുന്നതിനും ഇത് ഓപ്uഷണലായി അനുവദിക്കുന്നു. കൂടുതൽ വിവരങ്ങൾക്ക്, nginx പിശക് പേജ് ഡോക്യുമെന്റേഷൻ വായിക്കുക.