Comment redirect toutes les requêtes angulars vers index.html dans Nginx

J’ai créé un simple fichier de configuration Nginx sur un serveur angular comme ceci:

server { listen 80; listen [::]:80; root /path/to/apps/myapp/current/dist; access_log /path/to/apps/myapp/current/log/nginx.access.log; error_log /path/to/apps/myapp/current/log/nginx.error.log info; index index.html; location ^~ /assets/ { gzip_static on; expires max; add_header Cache-Control public; } location / { try_files $uri $uri/ =404; } }

Et tout fonctionne bien comme prévu. parce que j’utilise Angular UI Router , je voudrais transférer toutes les pages vers index.html pour qu’Angular prenne le relais (une requête sur example.com/users/new sera donc redirigée par Nginx vers index.html , pour Angular Interface utilisateur pour le gérer) pour recharger les pages, les liens, etc.

Comment puis-je atteindre cet objective?

Je joue avec des options comme:

 server { #implemented by default, change if you need different ip or port #listen *:80 | *:8000; server_name test.com; return 301 $scheme://www.test.com$request_uri; }

Comme spécifié dans cette réponse. Mais je ne pouvais rien de similaire au travail basé sur toutes les demandes.

Les suggestions seront très appréciées.

Vous devez append le routeur à la fin de votre directive try_files , comme ceci:

 location / { try_files $uri $uri/ /index.html; }

Voir ce document pour plus d’informations.

Vous avez presque compris. try_files est le bon à utiliser, comme le montre Richard, il vous suffisait d’append votre index.html dans la liste. Cependant, il n’est pas nécessaire de supprimer le = 404 de la fin, en fait, il vaut mieux ne pas le faire.

 location / { try_files $uri $uri/ /index.html =404; }

Une fois la modification ci-dessus implémentée, rechargez la configuration avec sudo nginx -s reload

$ uri essaiera la requête sous forme de fichier, si cela échoue, il passe à la suivante.
$ uri / essaiera la demande car un dossier /index.html sera alors essayé, qui enverra toutes les requêtes à votre index.html où votre application angular pourra acheminer des choses (assurez-vous également d’utiliser html5mode pour éviter l’utilisation de # dans l’URL.
= 404 sera votre dernier retour en arrière, en gros dire: j’ai essayé ceci comme fichier, dossier et via index.html. Si index.html échoue / n’existe pas pour une raison quelconque, nous commettrons une erreur 404.

Pourquoi = 404?

Si tout se passe bien, le dernier ne sera jamais utilisé et le routage ne fera qu’essayer les fichiers, les dossiers et les applications angulars. Et ce serait ça. Mais je considère comme une bonne pratique d’avoir le = 404 à la fin pour couvrir toutes les bases.

Note importante sur index.html catchall

Que vous utilisiez ou non le = 404 dans try_files, en dirigeant tout sur index.html, vous perdez la possibilité de diffuser des erreurs 404 à partir de votre serveur Web, sauf si index.html n’existe pas (c’est-à-dire où =404 entre) . Cela signifie que vous devrez gérer les URL «introuvable» et les pages manquantes dans Angular JS, et que la page d’erreur que vous utilisez renverra une réponse HTTP 200 plutôt que 404. (Ceci est dû au fait que Au moment où vous dirigez vers le fichier index.html, vous avez servi une page à l’utilisateur, donc 200).

Pour plus de sécurité sur ce qui précède, google try_files angular js et vous trouverez la plupart des exemples incorporés = 404.

Les références: