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

Question

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

举个例子更容易说明。

示例：

用户导航到我的域。com/app 服务器在 /home/user/app/dist 下提供内容（其中有一个 index.html 和所有 js/css 资产）（使用 linux 所以 /home/user 只是我的主目录路径） .

用户导航到我的域。com/auth 服务器在 /home/user/auth/dist

下提供内容

用户导航到 / 服务器在 /home/user/auth/dist 下提供内容（默认情况下 / navs to auth）

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

用户导航到 mydomain.com/auth/signup 服务器再次提供 /home/user/auth/dist 文件夹下的内容再次，url 保持 mydomain.com/auth/login 以便 auth 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= 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" 对于 auth。

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

我该怎么做？某种示例配置将不胜感激。谢谢

P.s。如果有人好奇，我正在使用 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

首先，请确保您在 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? last;
  }
}

还值得一试 this question and the nginx docs，它更多地解释了 root 和别名之间的区别。

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

How to setup NGINX to deploy different Single Page Apps (SPA's... i.e static files) depending on location (under same server_name) with subroutes

nginx

single-page-application

server

编辑