React与Spring Boot集成并兼顾开发效率的最优方案是什么？

开发阶段配置（兼顾调试效率与无跨域体验） #

• 前后端服务独立启动：React使用开发服务器跑在默认3000端口，Spring Boot后端跑在自定义服务端口（如8080），无需提前合并打包
• 一键解决跨域问题：如果你使用Create React App初始化的项目，直接在项目根目录的package.json中新增配置项"proxy": "http://localhost:8080"即可，所有非静态资源的前端请求会自动转发到后端端口，不需要额外配置后端跨域规则，也不会出现跨域报错
• 保留完整调试能力：开发阶段直接执行npm start启动React开发服务，不需要执行build打包操作，所有代码不会被压缩混淆，默认开启sourcemap，遇到报错可以直接定位到原始JS/JSX代码，不会出现无法排查压缩后chunk.js问题

生产阶段配置（单构件打包部署） #

• 仅在发布前执行React构建：执行npm run build生成生产环境打包产物，将build目录下的所有文件复制到Spring Boot项目的src/main/resources/static路径下
• 适配前端路由配置：如果你使用了React Router等前端路由方案（Browser模式），需要新增Spring Boot控制器配置，将所有非API请求转发到index.html，避免页面刷新出现404，参考代码如下：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class FrontendRouteController {
    @GetMapping(value = {"/", "/{path:[^\\.]*}"})
    public String forwardIndex() {
        return "forward:/index.html";
    }
}

• 执行mvn package即可将前后端代码打包为单个可执行jar包，部署后所有资源都在同一个端口提供服务，符合合并部署需求

效率优化方案 #

如果不想每次打包手动执行React构建和复制操作，可以引入frontend-maven-plugin Maven插件，配置后执行Maven打包命令时，会自动完成Node环境安装、依赖安装、React生产构建、产物复制到静态资源目录的全流程，无需人工干预。

内容的提问来源于stack exchange，提问作者Peter Kronenberg