[解決済み] NGINXを設定して、サブルートで場所（同じサーバー名の下）に応じて異なるシングルページアプリケーション（SPA...すなわち静的ファイル）をデプロイする方法

質問

私の目標は、同じドメインの下に2つの異なるシングルページアプリ（SPA）を設定し、要求された場所/パスに対応するSPAを表示することです。私はまた、/場所上の2つのSPAのいずれかにデフォルトにしたいです。そして...私は、SPAによって追加されたhtml5の履歴の場所のパスは、誰かがブラウザにURLを入力した場合、実際に正しい場所にルーティングする必要があります。

例を挙げて説明するとわかりやすいと思います。

例

ユーザーはmydomain.com/appにナビゲートします。 で、サーバーは /home/user/app/dist (index.htmlとすべてのjs/cssアセットがある) のコンテンツを提供します (linux を使っているので /home/user は私のホームディレクトリのパスだけです)。

ユーザーはmydomain.com/authにナビゲートします。 サーバは /home/user/auth/dist のコンテンツを提供します。

ユーザーは / にナビゲートします。 で、サーバーは /home/user/auth/dist の下のコンテンツを提供します（デフォルトでは / は auth に移動します）。

ユーザはmydomain.com/auth/loginに移動します。 サーバは、再び、/home/user/auth/dist フォルダのコンテンツを提供します。 しかし、URLはmydomain.com/auth/loginのままなので、認証SPAはルートとして使用することができます。

ユーザーはmydomain.com/auth/signupにナビゲートします。 そして、サーバーは、再び、/home/user/auth/dist フォルダのコンテンツを提供します。 この場合も、URLはmydomain.com/auth/loginのままで、認証SPAがルートとして使用できるようにします。

ユーザはmydomain.com/app/homeに移動します。 で、サーバーは /home/user/app/dist のコンテンツを提供します。

root/alias/rewrite/regex/=/^~のルールは試しました。nginxのセットアップについてもっと深く理解しようとしているのですが、とりあえず、現在私が持っているものはこれです。

server {
listen [::]:80 default_server;
listen 80;
server_name mydomain.com 127.0.0.1;    # Make it serve in mydomain.com

# ^~ rules stop matching after the exact match 
location ^~ /app {                     # if location start matches /app
  alias /home/user/app/dist;
  index index.html;
  try_files $uri $uri/ index.html =404;
}                                      # if location start matches app/lobby
location ^~ /app/home {
  alias /home/user/app/dist;
  index index.html;
  try_files $uri $uri/ index.html =404;
}

# you can see that I need to add a new one per each client js app route
location ^~ /app/home/visitor {
  alias /home/user/app/dist;
  index index.html;
  try_files $uri $uri/ index.html =404;
}

location ^~ /auth/login {
  alias /home/user/auth/dist;
  index index.html;
  try_files $uri $uri/ index.html =404;
}
location ^~ /auth {
  alias /home/user/auth/dist;
  index index.html;
  try_files $uri $uri/ index.html =404;
}

# Rewrites / to auth, appending whatever params to path
#   var (for the client to consume)for now
location / {
  rewrite ^/(.*) /auth?path=$1 last;
}

}

}

/distフォルダの下にindex.htmlが見つかるはずです。

正規表現を使用するか、クライアント js アプリがキャッチするためにマッチの残りを通過させる位置マッチを使用して、ルートごとに新しいルールを追加する必要がないようにしたいと思います（このアプリには実際にネストされた状態のルートがあります）。location ^~修飾子が特定のルールにマッチした後に停止することは知っていますが、それ以外の方法で動作させることはできませんでした。もし私が修飾子、正規表現の位置の一致、または=修飾子を使用しない場合... nginxから404、403、500のレスポンスがあるだけです。

また、エイリアス/リライトの使用をやめて、ルートキーワードで行くと、distフォルダの下にある/appや/authの実際のフォルダを探そうとしますが、実際にはそうではないはずです（/home/user/auth/dist/authフォルダが存在する場合など）。

また、各SPAのベースディレクトリが何であるかをクライアントに把握させるため、例えば次のようにします。 basedir ="app" (アプリ用) と basedir="auth" (認証用)です。

私はImが間違った書き換えを行うか、私はより多くの書き換え、または物事をより一般的にするために追加のルールが必要だと思います。

どうすればいいのでしょうか？サンプル設定のようなものがあればありがたいです。ありがとうございます。

P.s. 私はEmberとEmber-cliを使用しています。これは、ビルドされたアプリで dist/ フォルダを生成し、また、次のようなルートを許可することができます。 http://www.mydomain/app/home/visitor/comments/new そのため、各パスをハードコードする意味がないのです（アプリはまだ開発中で、今後さらにルートが増える予定です！）。

EDIT

私もこれを試してみましたが、/appと/authの両方のパスで404が表示されるだけでした。

server {
listen [::]:80 default_server;
listen 80;
server_name localhost mydomain.com 127.0.0.1;

index index.html;

location /app {
  root /home/user/app/dist;
  try_files $uri $uri/index.html index.html;
}

location /auth {
  root /home/user/auth/dist;
  try_files $uri $uri/index.html index.html;
}

}

解決方法は？

何よりも先に、あなたが default の構成は sites-enabled を使用すると、予期しない動作になることがあります。

EDITです。 最終的な構成は以下の通りです。

server {
  listen [::]:80 default_server;
  listen 80;
  server_name localhost mydomain 127.0.0.1;

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

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

  location / {
    rewrite ^/(.*) /auth?$1 last;
  }
}

また、以下の項目もチェックしておくとよいでしょう。 この質問 と nginxドキュメント で、root と alias の違いについてもう少し詳しく説明しています。