Comment servir une seule page HTML pour toutes les requêtes dans Nginx ?

Utilisation de la directive try_files

La directive try_files dans Nginx offre une solution pour servir une seule page HTML pour toutes les requêtes. Cette directive indique à Nginx de vérifier la présence de fichiers ou de répertoires dans un ordre défini et d'utiliser le premier qu'il trouve.

Pour servir le même fichier HTML pour toutes les requêtes, utilisez la directive try_files comme ceci :

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

Cette configuration indique à Nginx de :

1. Rechercher le fichier base.html dans le répertoire racine de votre site web.
2. Servir base.html pour toutes les requêtes s'il est trouvé.
3. Renvoyer une erreur 404 si base.html n'est pas trouvé.

Cette méthode sert le même fichier HTML (base.html) pour toutes les requêtes sans modifier l'URL. Elle fonctionne bien pour les applications à page unique où JavaScript côté client gère le routage en fonction de l'URL.

La directive try_files simplifie le processus côté serveur. Elle ne modifie pas l'URL et n'effectue pas de redirections, permettant à votre application JavaScript d'accéder à l'URL d'origine via l'API History pour le routage côté client.

location /assets {
    try_files $uri =404;
}

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

Guide étape par étape

Pour mettre en œuvre la configuration Nginx pour servir une seule page HTML pour toutes les requêtes, suivez ces étapes :

1. Ouvrez le fichier de configuration Nginx : Utilisez un éditeur de texte pour ouvrir votre fichier de configuration Nginx. Le fichier se trouve souvent à /etc/nginx/nginx.conf ou /usr/local/nginx/conf/nginx.conf.

2. Ajoutez le bloc location avec try_files : Dans le bloc server de votre configuration, ajoutez ce bloc location :

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

   Remplacez /base.html par le chemin vers votre fichier HTML.

3. Rechargez Nginx pour appliquer les changements : Après avoir sauvegardé le fichier de configuration, rechargez Nginx avec cette commande :

   sudo nginx -s reload

   Si vous utilisez un système avec systemd, vous pouvez également utiliser :

   sudo systemctl reload nginx

Ces étapes configureront Nginx pour servir votre fichier HTML pour toutes les requêtes tout en conservant l'URL d'origine intacte. Cette configuration permet à votre application à page unique de gérer le routage côté client en utilisant l'API History du navigateur.

sudo nginx -t

Maintien d'URLs propres

La configuration Nginx utilisant la directive try_files aide à maintenir des URLs propres. Cette approche conserve les URLs d'origine demandées par les utilisateurs, ce qui est important pour plusieurs raisons :

• Elle maintient la structure des URLs intacte, facilitant la compréhension et le partage des pages ou sections de votre application par les utilisateurs.
• Les moteurs de recherche peuvent indexer vos pages plus précisément, car les URLs restent cohérentes et significatives.
• Elle permet au routage côté client dans les applications à page unique de fonctionner correctement. L'application JavaScript peut lire l'URL depuis le navigateur et afficher le bon contenu sans intervention du serveur.

Simplicité côté serveur

Cette méthode de servir une seule page HTML pour toutes les requêtes apporte une simplicité côté serveur :

• Elle réduit la complexité côté serveur en gérant toutes les routes avec une seule règle de configuration.
• Le serveur n'a pas besoin de gérer une logique de routage complexe, car celle-ci est déplacée vers l'application JavaScript s'exécutant dans le navigateur de l'utilisateur.
• Elle réduit le besoin de redirections ou de réécritures côté serveur, qui peuvent ralentir les temps de réponse.
• La mise à jour des routes devient plus facile, car les changements peuvent être effectués dans le code côté client sans modifier les configurations du serveur.

// Exemple de routage côté client utilisant 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>
  );
}

Utilisation de la directive rewrite

La directive rewrite dans Nginx vous permet de servir une seule page HTML pour toutes les requêtes. Voici comment :

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

Cette configuration fait correspondre n'importe quel chemin d'URL et le réécrit vers /base.html. Le drapeau last arrête les autres règles de réécriture.

Comparée à l'approche try_files, la méthode rewrite :

• Permet des changements d'URL plus complexes
• Peut être plus lente en raison du traitement des expressions régulières
• Peut changer l'URL dans le navigateur, ce qui peut ne pas être idéal pour les applications à page unique

La directive try_files est souvent plus simple pour servir une seule page, tandis que rewrite offre plus de contrôle sur le traitement des URLs.

location ^~ /static/ {
    alias /chemin/vers/vos/fichiers/statiques/;
}

Blocs conditionnels dans Nginx

Pour des cas plus complexes, Nginx vous permet d'utiliser des blocs conditionnels avec des instructions if. Par exemple :

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

Cette configuration sert base.html pour toutes les requêtes sauf celles se terminant par des types de fichiers statiques courants.

Utilisez des blocs conditionnels lorsque vous :

• Avez besoin de règles différentes basées sur des conditions spécifiques
• Voulez exclure certaines requêtes du service de la page unique
• Devez gérer un routage complexe que les directives try_files ou les règles rewrite simples ne peuvent pas faire

Faites attention avec les instructions if dans Nginx car elles peuvent provoquer un comportement inattendu et ralentir votre site si elles sont surutilisées. Pour la plupart des applications à page unique, la directive try_files est le meilleur choix en raison de sa simplicité et de sa rapidité.