React+Spring Boot部署求助：前后端整合打包异常问题

我之前也碰到过几乎一模一样的情况！结合我踩过的坑，给你梳理几个最可能的原因和对应的解决步骤：

Spring Boot默认会从src/main/resources/static或者src/main/resources/public目录加载静态资源，这一步最容易出错：

• 手动操作流程：在React项目根目录执行npm run build，把生成的build文件夹里的所有内容（包括index.html、static子文件夹等）完整复制到Spring Boot的src/main/resources/static目录下。
• 自动化优化：如果想避免手动复制的麻烦，可以在Spring Boot的pom.xml中添加Maven插件，让打包时自动同步React构建产物：

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <version>3.3.0</version>
    <executions>
        <execution>
            <id>copy-react-build</id>
            <phase>process-resources</phase>
            <goals>
                <goal>copy-resources</goal>
            </goals>
            <configuration>
                <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                <resources>
                    <resource>
                        <directory>${project.basedir}/../react-app/build</directory>
                        <filtering>false</filtering>
                    </resource>
                </resources>
            </configuration>
        </execution>
    </executions>
</plugin>

注意：把${project.basedir}/../react-app/build替换成你实际的React项目build目录路径

如果你的Spring Boot应用不是部署在域名根路径（比如是http://your-ec2-ip:8080/my-app），React打包后的静态资源会因为路径错误加载失败：

• 最简单的解决方式是在React项目的package.json中添加"homepage": "."，这样所有资源都会使用相对路径，适配任何部署路径。
• 如果是固定部署路径（比如/my-app），可以设置"homepage": "/my-app"。

开发模式下React的proxy配置（比如package.json里的"proxy": "http://localhost:8080"）能解决跨域，但打包后和Spring Boot部署在一起，必须调整请求路径：

• 把React代码中所有API请求从http://localhost:8080/api/xxx改成/api/xxx，这样部署后会自动指向当前域名下的后端接口。
• 同时确保Spring Boot的控制器路径正确，比如：

@RestController
@RequestMapping("/api")
public class ApiController {
    // 接口实现
}

如果你的项目自定义了WebMvcConfigurer，可能会覆盖默认的静态资源规则，导致React页面无法加载：

• 检查是否有类似的配置，确保静态资源映射正确：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/static/");
    }
}

这个配置会让Spring Boot优先处理静态资源请求，找不到的再交给API控制器处理。

先在本地确保整合没问题，再上传到EC2：

• 执行mvn clean package打包Spring Boot应用，然后运行java -jar target/your-app.jar，访问http://localhost:8080确认React页面加载正常、API请求能成功。
• 本地测试通过后，把jar包上传到EC2，启动服务并检查安全组是否开放了对应端口（比如8080），最后访问EC2公网IP+端口验证。

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