Introductie
Nginx is een krachtige webserver die in staat is om inhoud flexibel en krachtig te serveren. Bij het ontwerpen van uw webpagina’s is het vaak nuttig om elke stuk inhoud aan te passen dat uw gebruikers zullen zien. Dit omvat foutpagina’s voor wanneer ze inhoud aanvragen die niet beschikbaar is. In deze handleiding zult u Nginx configureren om aangepaste foutpagina’s te gebruiken op Ubuntu 22.04.
Vereisten
Om aan de slag te gaan met deze handleiding heeft u nodig:
- A non-root user with
sudo
privileges. You can set up a user of this type by following along with the initial server setup guide for Ubuntu 22.04. - Nginx geïnstalleerd op uw systeem, volg Stappen 1 en 2 van deze handleiding over hoe u Nginx installeert op Ubuntu 22.04.
Als u de bovenstaande stappen heeft voltooid, ga verder met deze handleiding.
Uw aangepaste foutpagina’s maken
De aangepaste foutpagina’s in deze handleiding zijn ter illustratie, maar de exacte inhoud van uw aangepaste foutpagina’s kan verschillen naar uw wens.
Plaats uw aangepaste foutpagina’s in de directory /usr/share/nginx/html
waar Nginx zijn standaard documentroot instelt. Maak een pagina voor 404-fouten genaamd custom_404.html
en een voor algemene fouten op het niveau van 500 genaamd custom_50x.html
. U kunt de volgende regels gebruiken als u alleen aan het testen bent. Plaats anders uw eigen aangepaste foutinhoud op deze locaties.
Eerst, maak het HTML-bestand voor uw aangepaste 404-pagina met behulp van nano
of uw favoriete teksteditor:
- sudo nano /usr/share/nginx/html/custom_404.html
Voeg uw aangepaste fout toe aan het gemaakte bestand:
<h1 style='color:red'>Error 404: Not found :-(</h1><p>I have no idea where that file is, sorry. Are you sure you typed in the correct URL?</p>
Sla het bestand op en verlaat het. Als u nano
gebruikt, drukt u op CTRL+O
om op te slaan en vervolgens op CTRL+X
om af te sluiten.
Vervolgens, maak het HTML-bestand voor uw aangepaste algemene 500-niveau foutpagina:
- sudo nano /usr/share/nginx/html/custom_50x.html
Voeg uw aangepaste fout toe aan het gemaakte bestand:
<h1>Oops! Something went wrong...</h1><p>We seem to be having some technical difficulties. Hang tight.</p>
Sla het bestand op en verlaat het zodra u uw aangepaste foutinhoud hebt ingevoegd.
Nu heeft u twee aangepaste foutpagina’s die u kunt serveren wanneer clientaanvragen resulteren in verschillende fouten.
Nginx configureren om uw foutpagina’s te gebruiken
Nu moet je Nginx vertellen dat het deze pagina’s moet gebruiken wanneer de overeenkomstige foutomstandigheden zich voordoen. Open het serverblokbestand in de map /etc/nginx/sites-enabled
dat je wilt configureren. Het standaard serverblokbestand genaamd default
wordt hier gebruikt, maar je moet je eigen serverblokken aanpassen als je een niet-standaard bestand gebruikt:
- sudo nano /etc/nginx/sites-enabled/default
Vervolgens kun je Nginx wijzen naar je aangepaste foutpagina’s.
404 Fouten Doorverwijzen naar de Aangepaste 404 Pagina
Gebruik de error_page
richtlijn zodat wanneer een 404 fout optreedt (wanneer een aangevraagd bestand niet wordt gevonden), de aangepaste pagina die je hebt gemaakt wordt geserveerd. Maak een locatieblok voor het bestand, waarbij je ervoor zorgt dat de root overeenkomt met de locatie van je bestandssysteem en dat het bestand alleen toegankelijk is via interne Nginx-omleidingen (niet rechtstreeks opvraagbaar door clients):
/etc/nginx/sites-enabled/default
server { listen 80 default_server; . . . error_page 404 /custom_404.html; location = /custom_404.html { root /usr/share/nginx/html; internal; }}
Meestal hoef je de root
niet in het nieuwe locatieblok in te stellen omdat het overeenkomt met de root in het serverblok. Echter, hier ben je expliciet zodat je foutpagina’s worden geserveerd zelfs als je je reguliere webinhoud en de bijbehorende document root naar een andere locatie verplaatst.
Omleiden van 500-niveau fouten naar de aangepaste 50x-pagina
Vervolgens voegt u de richtlijnen toe om ervoor te zorgen dat wanneer Nginx 500-niveau fouten tegenkomt (servergerelateerde problemen), het de andere aangepaste pagina serveert die u heeft gemaakt. Dit zal exact hetzelfde formule volgen als in de vorige sectie. Deze keer stelt u meerdere 500-niveau fouten in om allemaal de custom_50x.html
pagina te gebruiken.
Onderaan voegt u ook een dummy FastCGI doorvoer toe zodat u uw 500-niveau foutpagina kunt testen. Dit is een dummy omdat verwacht wordt dat er een fout optreedt, omdat de backend feitelijk niet bestaat. Het aanvragen van een pagina hier zal u in staat stellen te testen dat 500-niveau fouten uw aangepaste pagina serveren.
Bewerk uw bestand als volgt:
/etc/nginx/sites-enabled/default
server { listen 80 default_server; . . . error_page 404 /custom_404.html; location = /custom_404.html { root /usr/share/nginx/html; internal; } error_page 500 502 503 504 /custom_50x.html; location = /custom_50x.html { root /usr/share/nginx/html; internal; } location /testing { fastcgi_pass unix:/does/not/exist; }}
Sla het bestand op en sluit het af wanneer u klaar bent.
Het herstarten van Nginx en het testen van uw pagina’s
Test de syntax van uw configuratiebestand door het volgende in te typen:
- sudo nginx -t
Als er fouten zijn gemeld, corrigeer ze dan voordat u doorgaat. Wanneer er geen syntaxfouten worden gerapporteerd, herstart Nginx door het volgende in te typen:
- sudo systemctl restart nginx
Wanneer u nu naar het domein of het IP-adres van uw server gaat en een niet-bestaand bestand aanvraagt, zou u de 404-pagina moeten zien die u heeft ingesteld:
http://server_domain_or_IP/thiswillerror
Wanneer je naar de locatie gaat die je hebt ingesteld voor de FastCGI-pass, ontvang je een 502 Bad Gateway-fout met je aangepaste pagina van niveau 500:
http://server_domain_or_IP/testing
Je kunt nu teruggaan en de nep FastCGI-pass-locatie uit je Nginx-configuratie verwijderen.
Conclusie
Je zou nu aangepaste foutpagina’s voor je site moeten serveren. Dit is een eenvoudige manier om de ervaring van je gebruikers te personaliseren, zelfs wanneer ze problemen ondervinden. Een suggestie voor deze pagina’s is om links op te nemen naar locaties waar ze hulp kunnen krijgen of meer informatie kunnen vinden. Als je dit doet, zorg er dan voor dat de doellinks toegankelijk zijn, zelfs wanneer de bijbehorende fouten optreden.