调整nginx正确服务react-router应用
2017-01-09 11:06
253 查看
如今react应用普遍使用react-router作为路由管理,在开发端webpack自带的express服务器下运行和测试表现均正常,部署到线上的nginx服务器后,还需要对该应用在nginx的配置里作相应调整,否则浏览器将不能正常使用该应用,表现为页面不显示或页面跳转错误等异常。原因在于这些react应用在运行时会更改浏览器uri而又不真的希望服务器对这些uri去作响应,如果此时刷新浏览器,服务器当然是收到浏览器发来的uri就去寻找资源,这个uri在服务器上是没有对应资源,结果服务器因找不到资源就发送403错误标志给浏览器。所以,我们要做的调整是:浏览器在使用这个react应用期间,无论uri更改与否,服务器都发回index.html这个页面就行。实际操作就是在nginx配置文件里添加如下内容:
这种调整有个前提条件:该应用在react-route里使用的history类型为browerHistory。history总共有3种类型,如图:
官方推荐一般使用browerHistory就好。
以上认识是使用react-router被陷坑后补习webpack打包原理和nginx重定向指令所得,不然,依旧是只知其然不知其所以然。webpack打包react应用时,如果不用任何插件来分割代码的话,结果就是一个文件而已,运行时uri的定位问题自然也是在该文件里内部处理,不同于往常服务器上静态资源的“真实文件”定位。
server { ... location / { try_files $uri /index.html; } }
这种调整有个前提条件:该应用在react-route里使用的history类型为browerHistory。history总共有3种类型,如图:
官方推荐一般使用browerHistory就好。
以上认识是使用react-router被陷坑后补习webpack打包原理和nginx重定向指令所得,不然,依旧是只知其然不知其所以然。webpack打包react应用时,如果不用任何插件来分割代码的话,结果就是一个文件而已,运行时uri的定位问题自然也是在该文件里内部处理,不同于往常服务器上静态资源的“真实文件”定位。
try_files $uri /index.html是nginx重定向指令,意思是在站点查找有无浏览器发来的uri,如果没有那就发送index.html这个文件给浏览器。既然我们部署到服务器的只是打包了的文件,uri定位不到,发回index.html就是了,它知道uri就在打包文件里。
相关文章推荐
- nginx正确服务react-router应用
- nginx_轻量级http服务应用
- 正确认识分布式异构环境下的异步服务和应用场景设计
- Web服务(Apache、Nginx、Tomcat、Jetty)与应用(LAMP、CMS-WordPress&Ghost、Jenkins、Gitlab)
- Nginx Web服务应用
- Nginx服务简介及基础应用
- netcraft 统计08年6月应用服务排行榜 nginx排到第5喽
- nginx服务企业应用
- Spring Boot 正确、安全地停止SpringBoot应用服务
- LNMP架构应用实战——Nginx服务配置文件介绍
- 深入浅出React之第七章:使用React-Router实现多页面应用
- 搭建nginx网站服务及应用
- NGINX网站服务-LNMP平台及应用
- 正确、安全地停止SpringBoot应用服务
- 正确、安全地停止SpringBoot应用服务
- 【Docker江湖】之创建Web应用服务镜像——Apache/Nginx
- gzip的工作原理及在Nginx和Apache服务中的应用
- 基于react-router的单页应用
- Nginx网站服务+LNMP架构及应用部署
- 【服务器】Nginx 作为应用服务器映射服务