大佬教程收集整理的这篇文章主要介绍了如何设置NGINX以根据位置(在相同的server_name下)部署不同的单页应用程序(SPA的…即静态文件)和子路由,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我的目标是在同一个域下设置两个不同的单页应用程序(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文件夹下的内容
再次,网址保留mydomain.com/auth/login,以便auth SPA可以用作路由
用户导航到mydomain.com/app/home
并且服务器提供/ home / user / app / dist下的内容
我试过root / alias / rewrite / regex / = / ^〜规则.我试图更深入地了解Nginx设置,但与此同时,这是我目前拥有的:
@H_772_31@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 onE)和basedir =“auth”为auth one.
我认为我在重写错误,或者我需要更多的重写或其他规则来使事情变得更通用.
我该怎么做呢?可以理解某种样本配置.谢谢.
附:如果有人好奇,我正在使用Ember和Ember-cli.这会生成带有内置应用程序的dist /文件夹,并且还可以允许诸如http://www.mydomain/app/home/visitor/comments/new之类的路由,这就是为什么对每个路径进行硬编码都没有意义(并且应用程序仍处于开发阶段,需要更多路由!).
编辑
我也试过这个,我在/ app和/ auth路径中得到404:
@H_772_31@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; } }
编辑:
最终配置如下
@H_772_31@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; } }
它还值得查看this question和nginx docs,它们解释了root和别名之间的差异.
以上是大佬教程为你收集整理的如何设置NGINX以根据位置(在相同的server_name下)部署不同的单页应用程序(SPA的…即静态文件)和子路由全部内容,希望文章能够帮你解决如何设置NGINX以根据位置(在相同的server_name下)部署不同的单页应用程序(SPA的…即静态文件)和子路由所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。