¿Cómo servir una sola página HTML para todas las peticiones en Nginx?

Usando la directiva try_files

La directiva try_files en Nginx proporciona una solución para servir una sola página HTML para todas las solicitudes. Esta directiva le dice a Nginx que busque archivos o directorios en un orden determinado y use el primero que encuentre.

Para servir el mismo archivo HTML para todas las solicitudes, usa la directiva try_files así:

location / {
    try_files /base.html =404;
}

Esta configuración le dice a Nginx que:

1. Busque el archivo base.html en el directorio raíz de tu sitio web.
2. Sirva base.html para todas las solicitudes si se encuentra.
3. Devuelva un error 404 si no se encuentra base.html.

Este método sirve el mismo archivo HTML (base.html) para todas las solicitudes sin cambiar la URL. Funciona bien para aplicaciones de una sola página donde JavaScript del lado del cliente maneja el enrutamiento basado en la URL.

La directiva try_files mantiene el proceso simple en el lado del servidor. No cambia la URL ni realiza redirecciones, permitiendo que tu aplicación JavaScript acceda a la URL original a través de la API de Historia para el enrutamiento del lado del cliente.

location /assets {
    try_files $uri =404;
}

location / {
    try_files /base.html =404;
}

Guía paso a paso

Para implementar la configuración de Nginx para servir una sola página HTML para todas las solicitudes, sigue estos pasos:

1. Abre el archivo de configuración de Nginx: Usa un editor de texto para abrir tu archivo de configuración de Nginx. El archivo suele estar en /etc/nginx/nginx.conf o /usr/local/nginx/conf/nginx.conf.

2. Añade el bloque de ubicación con try_files: Dentro del bloque server de tu configuración, añade este bloque location:

   location / {
      try_files /base.html =404;
   }

   Reemplaza /base.html con la ruta a tu archivo HTML.

3. Recarga Nginx para aplicar los cambios: Después de guardar el archivo de configuración, recarga Nginx con este comando:

   sudo nginx -s reload

   Si usas un sistema con systemd, también puedes usar:

   sudo systemctl reload nginx

Estos pasos configurarán Nginx para servir tu archivo HTML para todas las solicitudes manteniendo intacta la URL original. Esta configuración permite que tu aplicación de una sola página maneje el enrutamiento en el lado del cliente utilizando la API de Historia del navegador.

sudo nginx -t

Mantenimiento de URLs limpias

La configuración de Nginx usando la directiva try_files ayuda a mantener URLs limpias. Este enfoque mantiene las URLs originales solicitadas por los usuarios, lo cual es importante por varias razones:

• Mantiene la estructura de URL intacta, facilitando a los usuarios entender y compartir páginas o secciones de tu aplicación.
• Los motores de búsqueda pueden indexar tus páginas con mayor precisión, ya que las URLs se mantienen consistentes y significativas.
• Permite que el enrutamiento del lado del cliente en aplicaciones de una sola página funcione correctamente. La aplicación JavaScript puede leer la URL del navegador y mostrar el contenido correcto sin intervención del servidor.

Simplicidad del lado del servidor

Este método de servir una sola página HTML para todas las solicitudes aporta simplicidad del lado del servidor:

• Reduce la complejidad del lado del servidor al manejar todas las rutas con una sola regla de configuración.
• El servidor no necesita gestionar una lógica de enrutamiento compleja, ya que esto se traslada a la aplicación JavaScript que se ejecuta en el navegador del usuario.
• Reduce la necesidad de redirecciones o reescrituras del lado del servidor, que pueden ralentizar los tiempos de respuesta.
• Actualizar las rutas se vuelve más fácil, ya que los cambios se pueden hacer en el código del lado del cliente sin cambiar las configuraciones del servidor.

// Ejemplo de enrutamiento del lado del cliente usando React Router
import { BrowserRouter, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </BrowserRouter>
  );
}

Usando la directiva rewrite

La directiva rewrite en Nginx te permite servir una sola página HTML para todas las solicitudes. Así es cómo:

location / {
    rewrite ^(.*)$ /base.html last;
}

Esta configuración coincide con cualquier ruta de URL y la reescribe a /base.html. La bandera last detiene otras reglas de reescritura.

Comparado con el enfoque de try_files, el método rewrite:

• Permite cambios de URL más complejos
• Puede ser más lento debido al procesamiento de expresiones regulares
• Puede cambiar la URL en el navegador, lo que podría no ser ideal para aplicaciones de una sola página

La directiva try_files es a menudo más simple para servir una sola página, mientras que rewrite da más control sobre el procesamiento de URL.

location ^~ /static/ {
    alias /ruta/a/tus/archivos/estaticos/;
}

Bloques condicionales en Nginx

Para casos más complejos, Nginx te permite usar bloques condicionales con declaraciones if. Por ejemplo:

location / {
    if ($request_uri !~ \.(js|css|png|jpg|gif)$) {
        rewrite ^ /base.html break;
    }
}

Esta configuración sirve base.html para todas las solicitudes excepto aquellas que terminan con tipos de archivo estáticos comunes.

Usa bloques condicionales cuando:

• Necesitas reglas diferentes basadas en condiciones específicas
• Quieres excluir ciertas solicitudes de ser servidas con la página única
• Necesitas manejar un enrutamiento complejo que try_files o simples reglas rewrite no pueden hacer

Ten cuidado con las declaraciones if en Nginx ya que pueden causar comportamientos inesperados y ralentizar tu sitio si se usan en exceso. Para la mayoría de las aplicaciones de una sola página, la directiva try_files es la mejor opción debido a su simplicidad y velocidad.