如何设置NGINX部署不同的单页面应用程序(SPA的…即静态文件)取决于位置(在同一server_name下)子路线

我的目标是在同一个域下设置两个不同的单页面应用程序(SPA),在这里我们显示对应于所请求位置/path的SPA。 我也想默认的两个SPA的/位置之一。 而且,如果有人在浏览器中inputurl,我希望SPA追加的html5历史位置path实际上路由到正确的位置。

用一个例子来解释比较容易。

例:

用户导航到mydomain.com/app,服务器提供/ home / user / app / dist下的内容(有index.html和所有js / css资源)(使用linux so / home / user就是我的主目录path)。

用户导航到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,以便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文件夹下find一个index.html

我想要使​​用正则expression式或位置匹配,以便客户端js应用程序的其余匹配通过,以便我不必为每个路由添加新规则(此应用程序实际上具有嵌套状态路由)。 我知道位置^〜修饰符匹配特定的规则后停止,但我无法得到任何其他方式的工作。 如果我不使用修饰符,或者正则expression式位置匹配,或=修饰符…我只能从nginx获得404,403和500响应。

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

我也让客户知道每个SPA的基本目录是什么,例如basedir =“app”(对于app一)和basedir =“auth”。

我认为我在做重写错误,或者我需要更多的重写,或更多的规则,使事情更通用。

我怎么去做这个? 某种样品configuration将不胜感激。 谢谢。

Ps如果有人好奇,我使用Ember和Ember-cli。 这产生了一个内置的应用程序的dist /文件夹,也可以允许路线,如http://www.mydomain/app/home/visitor/comments/new这就是为什么硬编码每个path没有意义(和应用程序还在开发中,更多的路线来了!)。

编辑

我也试过这个,我只是在/ app和/ authpath中得到了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; } } 

在此之前,请确保您在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文档更能解释一下root和别名之间的区别。