Nginx部署同域名下Laravel/Lumen和react完全前后端分离

[版权声明] 本站内容采用 知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆 (CC BY-NC-SA 3.0 CN) 进行许可。
部分内容和资源来自网络,纯学习研究使用。如有侵犯您的权益,请及时联系我,我将尽快处理。
如转载请注明来自: Broly的博客,本文链接: Nginx部署同域名下Laravel/Lumen和react完全前后端分离

背景

重构一个项目,本来用的是Laravel全栈式开发,现重构成react前端和Laravel后端的完全分离的方式,使用Nginx部署在同域名下。

这个过程也是踩了些坑,不过最后配成功了。

工作环境

  • React 16.4.1
  • Laravel 5.6
  • Nginx 1.13

先看看完整的NGINX配置

可以看到,主要把二级目录下的Laravel工程配置正确就可以了。

但是,

坑来了!不要以为就这样完事了。

当你访问http://example.com/api,也就是后端的时候,第一次是没问题的,第二次会显示前端index.html的界面。研究了好久,发现是一个叫Service Worker的东西惹的祸。详细的介绍可以看这篇文章《深入了解 Service Worker ,看这篇就够了》。

是这个货影响了浏览器,第二次请求URL的时候,直接使用了本地的缓存,但是本地并没有Nginx端的API配置,所以显示index.html的内容。

当前我用的这个版本的React是默认自带并启用这个服务的,网上也有人抱怨为什么要开启:《Why was service worker merged into create react app?

看完上面两个参考链接,可以得出初步解决方案。要么在Service Worker的js出加入api的url过滤规则,要么就干脆关了。

方法一不是很难,找到registerServiceWorker.js编辑下就可以了,如:《Setting service worker to exclude certain urls only

方法二更干脆,就是把这个功能关了。编辑index.js,把

// import registerServiceWorker from './registerServiceWorker';

// registerServiceWorker();

两行都注释了。

如果本文对您有所帮助,可以请作者喝杯咖啡,感谢支持^_^

支付宝支付
微信支付

发表评论

电子邮件地址不会被公开。 必填项已用*标注