El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Sirviendo Contenido Estático

Siguiente ►
►

En este tema, aprenderemos cómo configurar NGINX para servir contenido estático, como archivos HTML, imágenes, CSS y JavaScript. Este es uno de los usos más comunes de NGINX y es fundamental para cualquier servidor web.

Conceptos Clave

  1. Contenido Estático: Archivos que no cambian con frecuencia y se sirven tal cual desde el servidor.
  2. Directiva location: Utilizada para definir cómo NGINX debe manejar las solicitudes a diferentes rutas.
  3. Raíz del Documento (root): El directorio en el servidor donde se almacenan los archivos estáticos.

Configuración Básica

Paso 1: Estructura de Directorios

Primero, asegúrate de tener una estructura de directorios adecuada para tus archivos estáticos. Por ejemplo:

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

Paso 2: Configuración del Bloque server

Edita el archivo de configuración de NGINX, generalmente ubicado en /etc/nginx/nginx.conf o en un archivo específico del sitio en /etc/nginx/sites-available/.

server {
    listen 80;
    server_name example.com;

    location / {
        root /var/www/html;
        index index.html;
    }

    location /images/ {
        root /var/www/html;
    }

    location /css/ {
        root /var/www/html;
    }
}

Explicación del Código

  • listen 80;: NGINX escuchará en el puerto 80 (HTTP).
  • server_name example.com;: Define el nombre del servidor.
  • location / { ... }: Configura la raíz del documento para la ruta /. La directiva root especifica el directorio donde se encuentran los archivos estáticos.
  • index index.html;: Define el archivo predeterminado que se servirá cuando se acceda a la raíz del sitio.
  • location /images/ { ... } y location /css/ { ... }: Configura rutas específicas para servir imágenes y archivos CSS.

Paso 3: Recargar NGINX

Después de realizar cambios en la configuración, recarga NGINX para aplicar los cambios:

sudo systemctl reload nginx

Ejemplo Práctico

Supongamos que tienes un archivo index.html en /var/www/html/ con el siguiente contenido:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to NGINX</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <h1>Welcome to NGINX</h1>
    <img src="/images/logo.png" alt="Logo">
</body>
</html>

Y un archivo CSS en /var/www/html/css/styles.css:

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

Con esta configuración, al acceder a http://example.com, NGINX servirá el archivo index.html, y los archivos CSS e imágenes se cargarán correctamente.

Ejercicio Práctico

Ejercicio 1: Configurar un Nuevo Sitio

  1. Crea una nueva estructura de directorios para un sitio web en /var/www/mywebsite/.
  2. Añade un archivo index.html con contenido básico.
  3. Configura NGINX para servir este nuevo sitio en http://mywebsite.local.

Solución

  1. Crear la estructura de directorios:
sudo mkdir -p /var/www/mywebsite
echo "<h1>Welcome to My Website</h1>" | sudo tee /var/www/mywebsite/index.html
  1. Configurar NGINX:
server {
    listen 80;
    server_name mywebsite.local;

    location / {
        root /var/www/mywebsite;
        index index.html;
    }
}
  1. Recargar NGINX:
sudo systemctl reload nginx
  1. Añadir mywebsite.local a tu archivo /etc/hosts para probar localmente:
echo "127.0.0.1 mywebsite.local" | sudo tee -a /etc/hosts

Conclusión

En esta sección, hemos aprendido cómo configurar NGINX para servir contenido estático. Este es un paso fundamental para cualquier servidor web y sienta las bases para configuraciones más avanzadas. En el próximo tema, exploraremos cómo habilitar listados de directorios en NGINX.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados