请教一个前后端分离项目部署的问题

[eric107008]

一个前后端分离项目，前端是 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 的。

现在主要纠结的问题有两个：

1. 这个 React 前端应该部署在哪？

   1.1 如果作为静态资源打包在 Spring Boot 中，Spring Boot 的 Controller 在返回index.html时会试图寻找这个模板，但显然时找不到的（因为并不在模板路径中），因此会报 500 错误。

   1.2 如果作为独立的一个 APP 部署在 serverless 上，意味着前后端将使用不同的域名，会涉及到跨域问题

2. 是否有其他的方式绕过这个问题，包括但不限于：

   2.1 解决 Spring Controller 找不到index.html的问题

   2.2 更简单实惠的部署方式

   2.3 在 serverless 平台上解决跨域问题

   ...

也许问题看起来挺蠢的，但依然感谢各位不吝赐教。

[cslive]

这个不是问题吧，登录完之后 spring 重定向过来就行了，你看你用 google 登录本站不也是这么做的吗

[soislom]

没使用过 serverless,我的回答可能比较片面

[soislom]

抱歉，直接回车了。。。
通过重定向的方式可以做到 /account -> /login,同理 /login -> /account 也是一样的

[eric107008]

@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 是一个好主意，我仍然希望可以找到更优雅的方式。

[soislom]

@eric10700
server 重定向到 react 中转 page ，再通过中转 page 隐式跳转到目标 route

[soislom]

我之前这样处理过一次