部署 React 应用

本贴最后更新于 837 天前,其中的信息可能已经时过境迁

前言

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

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

部署

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

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

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

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 配置文件可以点击下载

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

  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    164 引用 • 266 回帖 • 554 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    12 引用 • 23 回帖 • 5 关注

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...