Kako kreirati prilagođenu stranicu sa greškom 404 u NGINX-u
Svaki put kada NGINX naiđe na grešku dok pokušava obraditi zahtjev klijenta, vraća grešku. Svaka greška uključuje HTTP kod odgovora i kratak opis. Greška se obično prikazuje korisniku putem jednostavne zadane HTML stranice.
Na sreću, možete konfigurirati NGINX da prikazuje prilagođene stranice s greškama korisnicima vaše web stranice ili web aplikacije. Ovo se može postići korištenjem NGINX-ove error_page direktive koja se koristi za definiranje URI-a koji će biti prikazan za određenu grešku. Također, opciono ga možete koristiti za izmjenu HTTP statusnog koda u zaglavljima odgovora poslanim klijentu.
U ovom vodiču ćemo pokazati kako da konfigurišete NGINX da koristi prilagođene stranice grešaka.
Kreirajte jednu prilagođenu stranicu za sve NGINX greške
Možete konfigurirati NGINX da koristi jednu prilagođenu stranicu greške za sve greške koje vraća klijentu. Započnite kreiranjem stranice s greškom. Evo primjera, jednostavne HTML stranice koja prikazuje poruku:
“Sorry, the page can't be loaded! Contact the site's administrator or support for assistance.” to a client.
Uzorak HTML Nginx koda prilagođene stranice.
<!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>
Sačuvajte datoteku pod odgovarajućim imenom, na primjer error-page.html i zatvorite je.
Zatim premjestite datoteku u korijenski direktorij dokumenta (/var/www/html/). Ako direktorij ne postoji, možete ga kreirati pomoću naredbe mkdir, kao što je prikazano:
sudo mkdir -p /var/www/html/
sudo cp error-page.html /var/www/html/
Zatim konfigurirajte NGINX da koristi prilagođenu stranicu greške koristeći error_page direktivu. Kreirajte konfiguracijsku datoteku pod nazivom custom-error-page.conf pod /etc/nginx/snippets/ kao što je prikazano.
sudo mkdir /etc/nginx/snippets/
sudo vim /etc/nginx/snippets/custom-error-page.conf
Dodajte mu sljedeće redove:
error_page 404 403 500 503 /error-page.html;
location = /error-page.html {
root /var/www/html;
internal;
}
Ova konfiguracija uzrokuje interno preusmjeravanje na URI/error-page.html svaki put kada NGINX naiđe na bilo koju od navedenih HTTP grešaka 404, 403, 500 i 503. Kontekst lokacije govori NGINX-u gdje pronaći svoju stranicu s greškom.
Sačuvajte datoteku i zatvorite je.
Sada uključite datoteku u http kontekst tako da svi blokovi servera koriste stranicu greške, u datoteku /etc/nginx/nginx.conf:
sudo vim /etc/nginx/nginx.conf
include direktorij govori NGINX da uključi konfiguraciju u specificiranu datoteku .conf:
include snippets/custom-error-page.conf;
Alternativno, možete uključiti datoteku za određeni blok servera (obično poznat kao vhost), na primjer, /etc/nginx/conf.d/mywebsite. konf. Dodajte gornju direktivu include u kontekst servera {}.
Sačuvajte svoj NGINX konfiguracioni fajl i ponovo učitajte uslugu na sledeći način:
sudo systemctl reload nginx.service
I testirajte iz pretraživača da li podešavanje radi dobro.
Kreirajte različite prilagođene stranice za svaku NGINX grešku
Također možete postaviti različite prilagođene stranice grešaka za svaku HTTP grešku u NGINXu. Otkrili smo dobru kolekciju prilagođenih nginx stranica o greškama koje je kreirao Denys Vitali na Githubu.
Da biste postavili spremište na vašem serveru, pokrenite sljedeće naredbe:
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
Zatim dodajte sljedeću konfiguraciju u vaš http kontekst ili svaki blok servera/vhost:
include snippets/error_pages.conf;
Sačuvajte svoju NGINX konfiguracijsku datoteku i ponovo učitajte uslugu na sljedeći način:
sudo systemctl reload nginx.service
Takođe, testirajte iz pretraživača da li konfiguracija radi kako je predviđeno. U ovom primjeru smo testirali stranicu s greškom 404.
To je sve što smo imali za vas u ovom vodiču. NGINX-ova error_page direktiva vam omogućava da preusmjerite korisnike na definiranu stranicu ili resurs ili URL kada dođe do greške. Također opciono dozvoljava modifikaciju HTTP statusnog koda u odgovoru klijentu. Za više informacija, pročitajte dokumentaciju nginx stranice o grešci.