请选择 进入手机版 | 继续访问电脑版
先说一下背景,最近在开发一个自己的SPA应用的时候,使用了React系全家桶,路由使用了ReactRouterV4.0版本,使用了history模式。在本地开发过程中,没有什么问题,刷新什么的非常好使。
但是当该项目开发的进入尾声的时候,将其部署到服务器,因为都是静态资源,所以就直接用nginx做一下资源代理。而且还有一个使用nginx做反代的原因是因为前后端分离,服务端和前端应用部署不在同一个机器上,需要对API进行反代,当然nginx还有其他非常强大的功能,就不一一列举了。
于是,很快,我就把nginx的配置配好了,如下:
  1. [/code]大概的意思就是 应用在8099端口号下,静态资源位于 /home/ubuntu/r-web/build/下,会主动去找该文件夹下的index.html文件,log文件会放在/var/log/fe.log文件下,对于/api/v1/下的api路由会被转发到 http://demo.server.com/api/v1/下。更多的配置可以大家参考nginx配置的文章。
  2. 乍一眼看过来是没有问题的,我们访问对应的ip:port也是OK的,但是当我们进入应用的某一个路由时,刷新一下,便看到浏览器的“丑恶嘴脸”
  3. 基于ReactRouter实现的SPA应用的Nginx配置-1.jpg
  4. 发现这个的时候真的是 “天啊,重大的问题啊!”,但是,发现问题,解决问题,是我们的天性,冷静下来,思考,为什么本地是OK的,用nginx配置后就失败了呢?
  5. 查阅一番后,发现是因为当该url请求到来时,nginx会去配置里去找对应的匹配,因为他才不管,它也不知道,路由是归谁管的,它是一个很严谨的worker,来了请求它就会去对应的去找该请求,没有找到就返回默认的404页面(默认你没有自己配置),知道原理后我们就去fix这个bug了
  6. 首先想到的是将history模式->hash模式,因为路由pathname都是相同的,只是根据hash的不同,交由前端来判断该逻辑,所以可以完美的解决该问题。但是!!考虑到改动的成本非常的大,以及“美观性”,所以就放弃了该方案。
  7. 第二个方案就是想着把所有的关HTML有关的路由,通过修改nginx配置全部让他返回index.html,于是就利用了nginx的try_files特性,修改配置如下:
  8. [code]
复制代码
但是这个看起来怪怪的呀,如果业务上再加几个路由,岂不是又要加上一些配置了,如果忘记加了,岂不是很尴尬,于是想起了使用的ReactRouter的一个很好的属性 basename, 于是乎 我们的nginx配置就变成了
[code][/code]从此,妈妈再也不用担心我会忘记加路由还要配置nginx啦!!
在本文的最后,给出两点tips:
    当前后端服务不在一块,API的路由配置最好有一个公共的前缀,加上一些api的version组合起来,便于后期统一做转发,以及api的version控制前端router的设计,特别是SPA应用,最好也能够根据服务也好,模块也好,能够有一个路由的层级关系,无论是维护性、观察性还是扩展性都是一个不错的设计。
谢谢大家,如有错误,恳请斧正。
分享到 :
0 人收藏

7 个回复

倒序浏览
海是岛流尽的泪  中级会员 | 2018-11-9 09:39:40
不用history就没这么多事了hhh,还有多页面的nginx配置你试试
葬婲  中级会员 | 2018-11-9 09:39:40
开始设计起来的时候,没有考虑到这一点呀,很僵硬。但是hash真的好丑……不喜欢!!多页面的nginx配置倒是不难得,写成一个文件去读就行了,如果是用hash表示多文件??我也没话说了
不爱°请放手  中级会员 | 2018-11-9 09:39:40
主要还是靠正则去匹配路径,还有就是子页面跟首页路由重复,你这个还能发表情,我手机都没那按钮
抚平眉头  高级会员 | 2018-11-9 09:39:40
嗯,越大的项目,前期的设计好,后面扩展性更强吧。苹果自带的表情哦,老铁
栋倍。  高级会员 | 2018-11-9 09:39:40
hash其实还ok啦
古巷@  高级会员 | 2018-11-9 09:39:40
你这个项目里面没有涉及支付吧,尤其是微信支付,路由层级过多会导致无法支付,所以基本上对商业项目来说basename是个鸡肋
璎婲  高级会员 | 2018-11-9 09:39:40
嗯,目前来说还没有碰到支付,这个是商业项目,刚好马上要接入支付了,我会注意这点 再更新 ~ 谢谢
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|翁笔

© 2001-2018 Wengbi.com

返回顶部