部署 React 应用

前言

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

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