一个前后端分离项目,前端是 React, 后端是 Spring Boot;
部署的目标是一个 Serverless 的平台,类似 AWS AppRunner 或者DigitalOcean AppPlatform。请注意,这意味着我们无法自主控制平台的反向代理,只能以 APP 为单位部署和管理资源。这是甲方处于成本考量提出的要求。
这个项目的特殊之处在于,Spring Boot 在提供 API 的同时,还提供了几个基于 Thymeleaf 的页面,前端的 React 在一些情况下会跳转到这个页面来。例如用户访问前端/account
路径时,前端组件会跳转到由 Thymeleaf 编写的/login
页面上,完成登录后,再重定向到/account
。这个/account
路径显然是由前端的类似react-router-dom
处理的,意味着在react-router-dom
看来,这个/login
页面并不存在,是要显示 404 的。
现在主要纠结的问题有两个:
这个 React 前端应该部署在哪?
1.1 如果作为静态资源打包在 Spring Boot 中,Spring Boot 的 Controller 在返回index.html
时会试图寻找这个模板,但显然时找不到的(因为并不在模板路径中),因此会报 500 错误。
1.2 如果作为独立的一个 APP 部署在 serverless 上,意味着前后端将使用不同的域名,会涉及到跨域问题
是否有其他的方式绕过这个问题,包括但不限于:
2.1 解决 Spring Controller 找不到index.html
的问题
2.2 更简单实惠的部署方式
2.3 在 serverless 平台上解决跨域问题
...
也许问题看起来挺蠢的,但依然感谢各位不吝赐教。
1
cslive 2023-04-26 09:22:05 +08:00
这个不是问题吧,登录完之后 spring 重定向过来就行了,你看你用 google 登录本站不也是这么做的吗
|
2
soislom 2023-04-26 09:26:07 +08:00
没使用过 serverless,我的回答可能比较片面
|
3
soislom 2023-04-26 09:33:22 +08:00
抱歉,直接回车了。。。
通过重定向的方式可以做到 /account -> /login,同理 /login -> /account 也是一样的 |
4
eric107008 OP @cslive @soislom 非常感谢回复。我同意使用重定向的方式在 React-MVC 页面之间实现跳转,项目中也确实是这样实现的。
目前的问题主要集中在,应该如何将 React 和一个带 MVC 页面(意味着它有自己的 html 模板和静态资源)的 Spring boot 程序打包起来部署 /无缝衔接地分离部署。如果打包起来的话,React 编译出来的静态文件应该如何集成进 Spring Boot? 刚刚尝试了一些操作,目前发现勉强可行的是,将 React 的编译产物拷贝到 Spring Boot 的静态资源文件夹中,并将 React 编译产物中的 index.html 移动到 Spring Boot 的 html 模板文件夹中,这样 Spring Boot 打包时可以将 React 提供的 index.html 当作一个模板,以至于可以在 Controller 中返回这个 html 文件,并由 index.html 加载打包在 Spring Boot 中的静态资源。 但这样做存在一些问题,例如:React SPA 中的路由是由`react-router-dom`管理的。这意味着在 MVC 和 React 间跳转时,双方对路由的“认知”有所不同,会导致 React 认为 404 的地方其实 MVC 是有界面的,或是 MVC 本应重定向到 React 提供的类似 /404 这样的页面却意外返回了 WhiteLableErrorPage... 另外,我并不认为将 React 的编译产物拆开,混装进 Spring Boot 再 Build 是一个好主意,我仍然希望可以找到更优雅的方式。 |
6
soislom 2023-04-26 14:47:35 +08:00
我之前这样处理过一次
|