如何设置NGINX部署不同的单页应用程序（SPA的...即静态文件）根据位置（在同一server_name）与子路由

Question

我的目标是在同一个域下设置两个不同的单页应用程序（SPA），其中显示与请求的位置/路径相对应的SPA。我还希望默认为两个SPA的on/location之一。和如果有人在浏览器中输入url，我希望SPA附加的html5历史位置路径能够实际路由到正确的位置。

用一个例子来解释更容易。

示例：

用户navs到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下的内容（默认情况下为/navs-to-auth）

用户导航到mydomain。com/auth/login，服务器再次提供/home/user/auth/dist文件夹下的内容，但url保持为mydomain。com/auth/login，以便auth SPA可以用作路由

用户导航mydomain.com/auth/signup，服务器再次提供 /home/user/auth/dist文件夹下的内容，网址保持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收到404403500条回复。

此外，如果我停止使用别名/重写并使用根关键字，它会试图在dist文件夹下找到 /app或 /auth实际的文件夹，这是不应该的（就像 /home/user/auth/dist/auth文件夹存在一样）。

我还让客户机知道每个SPA的基本目录是什么，例如basedir=“app”（对于app one）和basedir=“auth”（对于auth one）。

我认为我重写错误，或者我需要更多的重写，或者额外的规则来使事情更通用。

我该怎么做呢？请提供一些示例配置。谢谢

另外，如果有人好奇的话，我正在使用Ember和Ember cli。这将生成带有内置应用程序的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;
}

}

Answer 1

在执行任何操作之前，请确保未启用站点中的默认配置，这有时可能会导致意外行为。

编辑：下面是最终配置

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文档也值得一看，它们解释了根和别名之间的更多区别。