Hoe Nginx configureren om aangepaste foutpagina’s te gebruiken op Ubuntu 22.04 – techsyncer (2024)

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:

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:

  1. 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:

  1. 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:

  1. 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:

  1. 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:

  1. 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

Hoe Nginx configureren om aangepaste foutpagina’s te gebruiken op Ubuntu 22.04 – techsyncer (1)

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

Hoe Nginx configureren om aangepaste foutpagina’s te gebruiken op Ubuntu 22.04 – techsyncer (2)

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.

Hoe Nginx configureren om aangepaste foutpagina’s te gebruiken op Ubuntu 22.04 – techsyncer (2024)
Top Articles
Latest Posts
Article information

Author: Saturnina Altenwerth DVM

Last Updated:

Views: 5793

Rating: 4.3 / 5 (44 voted)

Reviews: 91% of readers found this page helpful

Author information

Name: Saturnina Altenwerth DVM

Birthday: 1992-08-21

Address: Apt. 237 662 Haag Mills, East Verenaport, MO 57071-5493

Phone: +331850833384

Job: District Real-Estate Architect

Hobby: Skateboarding, Taxidermy, Air sports, Painting, Knife making, Letterboxing, Inline skating

Introduction: My name is Saturnina Altenwerth DVM, I am a witty, perfect, combative, beautiful, determined, fancy, determined person who loves writing and wants to share my knowledge and understanding with you.