web-dev-qa-db-ja.com

Nginxで同じサーバーから複数のAngularアプリを提供する

angularの同じserverブロックから複数のNginxアプリを提供しています。したがって、ユーザーがホームページを経由せずに宣言した特定のカスタムAngularルートを直接参照できるようにするため（そして404ページを回避するため）、これらのルートをnginxから各angularアプリのindex.html、locationごとにtry_filesを追加しました：

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;
    }
}

この解決策は、Angular=ルートに移動するときに404エラーを回避しますが、問題は、/project2/または/project3/を参照すると、/project1/にリダイレクトされるということです。適切なプロジェクトの/project-i/index.htmlに転送する各場所を用意します。

angularnginxroutes
12
Hakim

一般に、1つのドメインに複数の独立したアプリを配置することは、セキュリティ上の問題です。

ただし、ここで直面しているのは、try_filesの動作の特殊性だと思います- http://nginx.org/r/try_files によると、

ファイルが見つからなかった場合、最後のパラメーターで指定されたURIへの内部リダイレクトが行われます。

事実上、これは、/index.html仕様の後に追加のパラメーター（つまり、基本的には何でも）があった場合、コードが期待どおりに機能したことを意味します。ただし、そのような最終的なパラメータがないため、それぞれの場合に発生するのは、/リクエストが行われたかのように、すべてがGET /index.html HTTP/1.1locationにリダイレクトされることです作成されます（ただし、nginxの内部ですべて行われます）。

したがって、解決策として、内部リダイレクトのパスを同じlocation内に維持するように修正するか（/projectX/index.htmlなど）、パスをそのままにして、最後のパラメーターにエラーコード（例：=404、ファイルが常に存在している限りトリガーされない）。

  • 例：try_files $uri /projectX/index.html;、

  • または、try_files $uri /index.html =404;。

のように：

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

または：

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

要約すると、/projectX/index.htmlは最後のパラメーターとしてのみ機能し、/index.htmlは非最終パラメーターとしてのみ機能することに注意してください。

1
cnst

これが誰かを助けることを願っています

ステップ1-すべてのプロジェクトをビルドします

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

ステップ2-nginxを設定します。try_filesセクションに追加された変更に注意してください

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;
    }
}

ステップ-nginx設定を再読み込み

Sudo service nginx reload
5
Sandeep K Nair

基本的に異なるアプリである multilingual Angular application AOT builds のソリューションを試してください-同じアプリを複数回実行して、異なるディレクトリの異なるバンドルの異なる言語でビルドします。

1
nyxz

--base.href =/projectx /を使用してアプリをビルドしてみてください。例：

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

最初の場所を次のように変更します。

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

現在のブロックはすべての「/」に一致し、リクエストに一致するのはこれが最初です。

0
wedward

プロジェクト2に追加してみてください。

<base href="/project2">
0
hayden