前言

前后端分离已经是大趋势，服务器端只需要关注自己的接口逻辑实现，而不需要关注前端的页面跳转，这一部分交由前端处理。常见的就是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配置文件可以点击下载

更多内容欢迎来访我的博客