部署React应用

Posted by lyp on Sunday, January 6, 2019

TOC

前言

前后端分离已经是大趋势,服务器端只需要关注自己的接口逻辑实现,而不需要关注前端的页面跳转,这一部分交由前端处理。常见的就是React应用或vue应用。

当然了,可以由服务器端下发链接给前端,前端再跳转,但是这种应该是比较少的。

部署

前后端分离的架构下部署与直接使用springboot基于模板引擎开发的前端会有所不同。
使用springboot基于模板引擎开发的前端静态文件默认直接放置在项目的static文件夹和template文件夹下,前端进行页面跳转的步骤一般是发起一个GET请求到后端,由后端进行跳转到对应的页面,路由掌控在后端。

而在前后端分离的架构前端页面的路由是前端实现,再通过ajax拉取对应的页面数据进行展示。

下面就来分解下在linux上基于nginx部署React应用的步骤:

  • React打包前端应用并将打包后的文件上传到linux上,默认是dist文件夹
  • nginx配置dist的路径,贴一下关键部分配置,端口监听和域名配置就不贴了
 location / {
	    root /usr/local/dist;
	    try_files $uri  /index.html;
	    index  index.html index.htm;
        }
  • 配置后台请求路径
 location ^~/service/ {
            proxy_pass http://127.0.0.1:8080;
        }

这里配置的是路径以service开头的请求都转发到本机的8080端口去,而8080端口部署的是后台应用程序。

需要这么做的原因是比如前端进行了一个/user/login的路由,而在React中所有的路由都需要指向index.html这个文件,没有做区分的话就会发起一个GET请求到服务器应用,而服务器并没有/user/login这个GET请求接口,这时就会发生404

到目前为止就已经配置好前后端分离的相关nginx配置了。

但是我在实际应用中发现一个很奇怪的问题:

我的登陆页面发起了一个/user/login POST请求nginx直接返回了403,查看了tomcat,没有任何请求日志。后来在nginx转发的时候把头部信息带上就解决了问题。

至于问题的根本原因没有找出。

添加后的nginx转发配置如下:

 location ^~/service/ {
	    proxy_set_header           Host $host;
        proxy_set_header           X-Real-IP $remote_addr;
        proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://127.0.0.1:8080;
        }

完整的nginx配置文件可以点击下载