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

Question

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

用示例更容易解释.

例:

用户导航到mydomain.com/app并且服务器提供/ home/user/app/dist下的内容(其中包含index.html和所有js/css资产)(使用linux so/home/user只是我的主目录路径).

用户导航到mydomain.com/auth,服务器提供/ home/user/auth/dist下的内容

用户导航到/和服务器提供/ home/user/auth/dist下的内容(/ navs默认为auth)

用户导航到mydomain.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=$1 last;
}

}

}

它应该在/ dist文件夹下找到一个index.html

我想使用正则表达式或位置匹配,让匹配的其余部分通过客户端js应用程序捕获,这样我就不必为每个路由添加新规则(此应用程序实际上具有嵌套状态路由).我知道位置^〜修饰符在匹配特定规则后停止,但我无法以任何其他方式使其工作.如果我不使用修饰符,或常规表达位置匹配,或=修饰符......我只是从nginx获得404,403和500个响应.

此外,如果我停止使用别名/重写并使用root关键字,它会尝试在dist文件夹下找到/ app或/ auth实际文件夹,它实际上不应该(如果/ home/user/auth/dist/auth文件夹存在).

我也让客户知道每个SPA的基本目录是什么,例如basedir ="app"(对于app一个)和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

在此之前,请确保您没有default配置,sites-enabled有时可能会导致意外行为.

编辑: 下面的最终配置

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和别名之间的差异.