El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Pàgines d'error personalitzades

Següent ►
►

En aquest tema, aprendrem com configurar pàgines d'error personalitzades a NGINX. Les pàgines d'error personalitzades són útils per proporcionar una millor experiència d'usuari quan es produeixen errors en el servidor, com ara errors 404 (No trobat) o 500 (Error intern del servidor).

Objectius

  • Entendre la importància de les pàgines d'error personalitzades.
  • Aprendre a configurar pàgines d'error personalitzades a NGINX.
  • Veure exemples pràctics de configuració.
  • Realitzar exercicis pràctics per reforçar els conceptes apresos.

Importància de les pàgines d'error personalitzades

Les pàgines d'error personalitzades permeten:

  • Proporcionar informació útil als usuaris sobre l'error.
  • Mantenir la coherència del disseny del lloc web.
  • Redirigir els usuaris a altres parts del lloc web.
  • Millorar l'experiència d'usuari i la percepció del lloc web.

Configuració de pàgines d'error personalitzades a NGINX

Pas 1: Crear les pàgines d'error personalitzades

Primer, hem de crear les pàgines HTML que volem utilitzar com a pàgines d'error. Per exemple, podem crear una pàgina 404.html i una pàgina 500.html.

Exemple de 404.html:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Pàgina no trobada</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
        h1 { font-size: 50px; }
        p { font-size: 20px; }
    </style>
</head>
<body>
    <h1>404</h1>
    <p>Ho sentim, la pàgina que cerques no existeix.</p>
    <a href="/">Torna a la pàgina principal</a>
</body>
</html>

Exemple de 500.html:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Error intern del servidor</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
        h1 { font-size: 50px; }
        p { font-size: 20px; }
    </style>
</head>
<body>
    <h1>500</h1>
    <p>Ho sentim, hi ha hagut un error intern del servidor.</p>
    <a href="/">Torna a la pàgina principal</a>
</body>
</html>

Pas 2: Configurar NGINX per utilitzar les pàgines d'error personalitzades

Un cop creades les pàgines d'error, hem de configurar NGINX per utilitzar-les. Això es fa mitjançant la directiva error_page al fitxer de configuració de NGINX.

Exemple de configuració:

server {
    listen 80;
    server_name exemple.com;

    root /var/www/exemple.com/html;
    index index.html;

    # Configuració de pàgines d'error personalitzades
    error_page 404 /404.html;
    location = /404.html {
        internal;
    }

    error_page 500 502 503 504 /500.html;
    location = /500.html {
        internal;
    }

    location / {
        try_files $uri $uri/ =404;
    }
}

Explicació de la configuració

  • error_page 404 /404.html;: Aquesta línia indica a NGINX que utilitzi la pàgina 404.html per als errors 404.
  • location = /404.html { internal; }: Aquesta línia defineix una ubicació interna per a la pàgina 404.html, de manera que només es pot accedir a ella a través de la directiva error_page.
  • error_page 500 502 503 504 /500.html;: Aquesta línia indica a NGINX que utilitzi la pàgina 500.html per als errors 500, 502, 503 i 504.
  • location = /500.html { internal; }: Aquesta línia defineix una ubicació interna per a la pàgina 500.html.

Pas 3: Reiniciar NGINX

Després de fer els canvis al fitxer de configuració, hem de reiniciar NGINX perquè els canvis tinguin efecte.

sudo systemctl restart nginx

Exercicis pràctics

Exercici 1: Crear una pàgina d'error 403 personalitzada

  1. Crea una pàgina 403.html amb un missatge d'error adequat.
  2. Configura NGINX per utilitzar aquesta pàgina per als errors 403.
  3. Reinicia NGINX i prova d'accedir a una pàgina amb accés denegat per veure la pàgina d'error personalitzada.

Solució:

<!-- 403.html -->
<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Accés denegat</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
        h1 { font-size: 50px; }
        p { font-size: 20px; }
    </style>
</head>
<body>
    <h1>403</h1>
    <p>Ho sentim, no tens permís per accedir a aquesta pàgina.</p>
    <a href="/">Torna a la pàgina principal</a>
</body>
</html>
# Configuració de NGINX
server {
    listen 80;
    server_name exemple.com;

    root /var/www/exemple.com/html;
    index index.html;

    # Configuració de pàgines d'error personalitzades
    error_page 403 /403.html;
    location = /403.html {
        internal;
    }

    location / {
        try_files $uri $uri/ =404;
    }
}

Exercici 2: Configurar una pàgina d'error 502 personalitzada

  1. Crea una pàgina 502.html amb un missatge d'error adequat.
  2. Configura NGINX per utilitzar aquesta pàgina per als errors 502.
  3. Reinicia NGINX i prova d'accedir a una pàgina que generi un error 502 per veure la pàgina d'error personalitzada.

Solució:

<!-- 502.html -->
<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Error de passarel·la</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
        h1 { font-size: 50px; }
        p { font-size: 20px; }
    </style>
</head>
<body>
    <h1>502</h1>
    <p>Ho sentim, hi ha hagut un error de passarel·la.</p>
    <a href="/">Torna a la pàgina principal</a>
</body>
</html>
# Configuració de NGINX
server {
    listen 80;
    server_name exemple.com;

    root /var/www/exemple.com/html;
    index index.html;

    # Configuració de pàgines d'error personalitzades
    error_page 502 /502.html;
    location = /502.html {
        internal;
    }

    location / {
        try_files $uri $uri/ =404;
    }
}

Resum

En aquesta secció, hem après com configurar pàgines d'error personalitzades a NGINX. Hem vist la importància de tenir pàgines d'error personalitzades per millorar l'experiència d'usuari i hem après a configurar-les mitjançant exemples pràctics. A més, hem realitzat exercicis per reforçar els conceptes apresos. En el proper tema, explorarem el registre i els formats de registre a NGINX.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats