V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
eric107008
V2EX  ›  问与答

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

  •  
  •   eric107008 · 2023-04-26 01:29:27 +08:00 · 1052 次点击
    这是一个创建于 563 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一个前后端分离项目,前端是 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 平台上解决跨域问题

      ...

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

    6 条回复    2023-04-26 14:47:35 +08:00
    cslive
        1
    cslive  
       2023-04-26 09:22:05 +08:00
    这个不是问题吧,登录完之后 spring 重定向过来就行了,你看你用 google 登录本站不也是这么做的吗
    soislom
        2
    soislom  
       2023-04-26 09:26:07 +08:00
    没使用过 serverless,我的回答可能比较片面
    soislom
        3
    soislom  
       2023-04-26 09:33:22 +08:00
    抱歉,直接回车了。。。
    通过重定向的方式可以做到 /account -> /login,同理 /login -> /account 也是一样的
    eric107008
        4
    eric107008  
    OP
       2023-04-26 10:53:42 +08:00
    @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
        5
    soislom  
       2023-04-26 14:47:10 +08:00
    @eric10700
    server 重定向到 react 中转 page ,再通过中转 page 隐式跳转到目标 route
    soislom
        6
    soislom  
       2023-04-26 14:47:35 +08:00
    我之前这样处理过一次
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1060 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:10 · PVG 03:10 · LAX 11:10 · JFK 14:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.