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配置文件可以点击下载
微信公众号
扫描下面的二维码关注我们的微信公众号,第一时间查看最新内容。同时也可以关注我的Github,看看我都在了解什么技术,在页面底部可以找到我的Github。
