web-dev-qa-db-ja.com

サブルートのある場所（同じserver_nameの下）に応じて異なるシングルページアプリ（SPAの...つまり静的ファイル）をデプロイするようにNGINXをセットアップする方法

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

例を挙げて説明する方が簡単です。

例：

ユーザーはmydomain.com/appに移動し、サーバーは/ home/user/app/dist（index.htmlとすべてのjs/cssアセットを含む）の下のコンテンツを提供します（Linuxを使用しているため、/ home/userは私のホームディレクトリにすぎません道）。

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

/へのユーザーnavsとサーバーは/ home/user/auth/distの下のコンテンツを提供します（デフォルトでは/ navs to 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の応答が返されます。

また、alias/rewriteの使用をやめてrootキーワードを使用すると、distフォルダーの下にある/ appまたは/ authの実際のフォルダーが検索されますが、実際には検索されるべきではありません（/ home/user/auth/dist /の場合など）。 authフォルダーが存在しました）。

また、各SPAのベースディレクトリが何であるかをクライアントに認識させます。たとえば、basedir = "app"（アプリの場合）およびbasedir = "auth"（認証の場合）です。

私は書き直しを間違って行っていると思います、または私は物事をより一般的にするためにもっと書き直し、または追加のルールが必要です。

どうすればこれを行うことができますか？ある種のサンプル構成をいただければ幸いです。ありがとう。

P.s.誰かが興味を持っている場合は、Ember-cliでEmberを使用しています。これにより、ビルドされたアプリでdist /フォルダーが生成され、 http：//www.mydomain）などのルートも許可されます。/app/home/visitor/comments/new これが、各パスをハードコーディングすることが意味をなさない理由です（そして、アプリはまだ開発中であり、今後さらに多くのルートがあります！）。

編集

私もこれを試しましたが、/ 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;
}

}
nginxserversingle-page-application
13
qx3

何よりもまず、sites-enabledにdefault構成がないことを確認してください。これにより、予期しない動作が発生する場合があります。

編集：以下の最終構成

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 docs もチェックする価値があります。

15
Kris Winiarski