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

Servint contingut estàtic

Següent ►
►

En aquest tema, aprendrem com configurar NGINX per servir contingut estàtic com ara fitxers HTML, CSS, JavaScript, imatges i altres tipus de fitxers. Servir contingut estàtic és una de les funcions més bàsiques i comunes de NGINX com a servidor web.

  1. Configuració bàsica per servir contingut estàtic

1.1. Estructura del directori

Abans de començar, és important tenir una estructura de directoris clara per al nostre contingut estàtic. Per exemple, podem tenir una estructura com aquesta:

/var/www/html/
    ├── index.html
    ├── styles.css
    └── images/
        └── logo.png

1.2. Configuració del bloc de servidor

Per servir contingut estàtic, necessitem configurar un bloc de servidor en el fitxer de configuració de NGINX (nginx.conf o un fitxer de configuració específic del lloc dins de /etc/nginx/sites-available/).

server {
    listen 80;
    server_name exemple.com;

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

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

Explicació del codi:

  • listen 80;: Indica que el servidor escoltarà a la porta 80 (HTTP).
  • server_name exemple.com;: Defineix el nom del servidor. Canvia-ho pel teu domini o adreça IP.
  • root /var/www/html;: Defineix el directori arrel on es troba el contingut estàtic.
  • index index.html;: Defineix el fitxer d'índex per defecte.
  • location / { ... }: Defineix una ubicació per a la ruta arrel (/). La directiva try_files intenta servir el fitxer sol·licitat. Si no es troba, retorna un error 404.

1.3. Reiniciar NGINX

Després de fer canvis en la configuració, és necessari reiniciar NGINX per aplicar-los:

sudo systemctl restart nginx

  1. Exemples pràctics

2.1. Servint un fitxer HTML

Crea un fitxer index.html dins del directori /var/www/html/ amb el següent contingut:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Pàgina d'Exemple</title>
</head>
<body>
    <h1>Benvingut a NGINX!</h1>
    <p>Aquesta és una pàgina d'exemple servida per NGINX.</p>
</body>
</html>

Accedeix a http://exemple.com des del teu navegador. Hauries de veure la pàgina HTML que acabes de crear.

2.2. Servint fitxers CSS i imatges

Afegeix un fitxer styles.css dins del directori /var/www/html/ amb el següent contingut:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

Actualitza el fitxer index.html per incloure el fitxer CSS:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Pàgina d'Exemple</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Benvingut a NGINX!</h1>
    <p>Aquesta és una pàgina d'exemple servida per NGINX.</p>
    <img src="images/logo.png" alt="Logo">
</body>
</html>

Afegeix una imatge logo.png dins del directori /var/www/html/images/.

Accedeix a http://exemple.com des del teu navegador. Hauries de veure la pàgina HTML amb l'estil aplicat i la imatge mostrada.

  1. Exercicis pràctics

Exercici 1: Servir un fitxer JavaScript

  1. Crea un fitxer script.js dins del directori /var/www/html/ amb el següent contingut:

    document.addEventListener('DOMContentLoaded', function() {
    alert('Benvingut a NGINX!');
});

  2. Actualitza el fitxer index.html per incloure el fitxer JavaScript:

    <!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Pàgina d'Exemple</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Benvingut a NGINX!</h1>
    <p>Aquesta és una pàgina d'exemple servida per NGINX.</p>
    <img src="images/logo.png" alt="Logo">
    <script src="script.js"></script>
</body>
</html>

  3. Accedeix a http://exemple.com des del teu navegador. Hauries de veure una alerta amb el missatge "Benvingut a NGINX!".

Exercici 2: Crear una pàgina d'error personalitzada

  1. Crea un fitxer 404.html dins del directori /var/www/html/ amb el següent contingut:

    <!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Pàgina no trobada</title>
</head>
<body>
    <h1>Error 404</h1>
    <p>La pàgina que cerques no existeix.</p>
</body>
</html>

  2. Actualitza la configuració del bloc de servidor per utilitzar la pàgina d'error personalitzada:

    server {
    listen 80;
    server_name exemple.com;

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

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

    error_page 404 /404.html;
    location = /404.html {
        internal;
    }
}

  3. Reinicia NGINX:

    sudo systemctl restart nginx

  4. Accedeix a una URL inexistent, com ara http://exemple.com/noexisteix. Hauries de veure la pàgina d'error personalitzada.

Conclusió

En aquest tema, hem après com configurar NGINX per servir contingut estàtic, incloent fitxers HTML, CSS, JavaScript i imatges. També hem vist com crear una pàgina d'error personalitzada. Aquestes habilitats són fonamentals per utilitzar NGINX com a servidor web. En el proper tema, explorarem com configurar llistats de directoris.

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