web-dev-qa-db-fra.com

Servir plusieurs Angular du même serveur avec Nginx

Je sers plusieurs applications angular à partir du même bloc server dans Nginx. Donc, afin de permettre à l'utilisateur de naviguer directement vers certains itinéraires Angular personnalisés que j'ai déclarés sans avoir à passer par la page d'accueil (et éviter la page 404), je transfère ces itinéraires de nginx à each = angular application de index.html, J'ai ajouté un try_files à chaque location:

server {
    listen 80;
    server_name website.com;

    # project1
    location / {
        alias /home/hakim/project1/dist/;
        try_files $uri /index.html;
    }

    # project2
    location /project2/ {
        alias /home/hakim/project2/dist/;
        try_files $uri /index.html;
    }

    # project3
    location /project3/ {
        alias /home/hakim/project3/dist/;
        try_files $uri /index.html;
    }
}

Cette solution évite l'erreur 404 lors du passage à un Angular, mais le problème est que lorsque je navigue vers /project2/ ou /project3/ il redirige vers le /project1/. Ce n'est évidemment pas ce que l'on attend, car je veux que chaque emplacement soit transmis au /project-i/index.html du projet adéquat.

angularnginxroutes
12
Hakim

C'est généralement une mauvaise pratique de sécurité d'avoir plusieurs applications indépendantes sur un seul domaine.

Cependant, je crois que vous êtes confronté ici à la particularité de la façon dont try_files fonctionne - selon http://nginx.org/r/try_files ,

Si aucun des fichiers n'a été trouvé, une redirection interne vers l'URI spécifié dans le dernier paramètre est effectuée.

En effet, cela signifie que s'il y avait eu un paramètre supplémentaire après votre /index.html spécification (c'est-à-dire, fondamentalement, n'importe quoi), alors votre code aurait fonctionné comme prévu; cependant, en raison de l'absence d'un tel paramètre final, ce qui se produit dans chaque cas est que tout est redirigé vers le /location, comme si un GET /index.html HTTP/1.1 la demande devait être faite (sauf que tout se fait en interne dans nginx).

Ainsi, comme solution, vous pouvez soit fixer le chemin pour que la redirection interne reste dans le même location (par exemple, /projectX/index.html), ou laissez les chemins seuls, mais faites en sorte que le dernier paramètre renvoie un code d'erreur (par exemple, =404, qui ne doit jamais être déclenché tant que votre fichier existe toujours).

  • Par exemple, try_files $uri /projectX/index.html;,

  • Ou, try_files $uri /index.html =404;.

Un péché:

location /projectX/ {
    alias /home/projectX/dist/;
    try_files $uri /projectX/index.html; # last param is internal redirect
}

Ou:

location /projectX/ {
    alias /home/projectX/dist/;
    try_files $uri /index.html =404;
}

En résumé, notez bien que /projectX/index.html ne fonctionnerait que comme dernier paramètre, et /index.html ne fonctionnerait qu'en version non finale.

1
cnst

J'espère que cela aide quelqu'un

Étape 1 - Construisez tous vos projets

ng build --prod --base-href /project1/
ng build --prod --base-href /project2/
ng build --prod --base-href /project3/

Étape 2 - Configurez votre nginx, notez la modification ajoutée dans try_files section

server {
    listen 80;
    server_name website.com;

    # project1
    location / {
        alias /home/hakim/project1/dist/;
        try_files $uri/ /project1/index.html;
    }

    # project2
    location /project2/ {
        alias /home/hakim/project2/dist/;
        try_files $uri/ /project2/index.html;
    }

    # project3
    location /project3/ {
        alias /home/hakim/project3/dist/;
        try_files $uri/ /project3/index.html;
    }
}

Étape - Recharger la configuration nginx

Sudo service nginx reload
5
Sandeep K Nair

Essayez la solution pour multilingue Angular application AOT builds qui sont fondamentalement des applications différentes - OK c'est la même application plusieurs fois, construisez avec différentes langues dans différents bundles dans différents répertoires.

1
nyxz

Essayez de créer vos applications en utilisant --base.href =/projectx/par exemple:

ng build --base.href=/project1/
ng build --base.href=/project2/
ng build --base.href=/project3/
0
Rasa Rin

Changez le premier emplacement en:

# project1
location /project1/ {
    alias /home/hakim/project1/dist/;
    try_files $uri /index.html;
}

Le bloc actuel correspond à tous les '/' et c'est la première chose qui correspond à la demande.

0
wedward

Essayez d'ajouter au projet 2:

<base href="/project2">
0
hayden