编译后的Spring Boot+React项目无法找到React构建文件求助

我完成了一个原型项目开发，几天后要做用户测试，IDE里运行完全正常。后端是STS4构建的Spring Boot，前端是VS Code构建的React。

作为部署流程的一部分，我把两部分打包成WAR包准备部署到测试服务器。编译没问题，WAR包也部署到Apache服务器（我先在这里测试），但问题来了。

2023年3月8日更新 #

感谢@DhavalGhajar的帮助，问题有了进展。编译完成后，把后缀为**.original**的文件重命名，去掉这个后缀只保留war后缀。接着用7zip打开项目包，找到React项目的index.html文件，移除static路径前的斜杠，修改CSS和JS的引用路径：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>React App</title>
    <link href="static/css/main.9a0fe4f1.css" rel="stylesheet">
</head>

<body>
    <div id="root"></div>
    <script type="text/javascript" src="static/js/main.f55352b1.js"></script>
</body>

</html>

我还修改了控制器代码，让它返回一个笑话：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class DadJokesController {
    @GetMapping("/api/dadjokes")
    public String dadJokes() {
        return "Justice is a dish best served cold, if it were served warm it would be just water.";
    }
}

现在程序能显示首页，但找不到API端点：

问题还是和路由有关，程序实际请求的路径是：

但直接调用API是有效的：

React项目的package.json里有个生产构建不需要的代理配置，我已经移除了。目前进展如上，再次感谢@DhavalGajjar的帮助。

2023年3月7日更新 #

我参考的示例代码也出现了同样的问题。

并行排查项目的问题 #

我创建了一个更简单的并行项目来排查错误，但还是没解决。项目编译成WAR包部署到Apache：

运行项目后出现如下输出：

多次刷新后出现另一个错误：

错误详情：

控制器文件内容 #

package com.example.demo.controller;

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

@CrossOrigin
@Controller
public class ClientForwardController {
    
    @GetMapping(value = "/**/{path:[^\\.]*}")
    public String forward() { 
        return "forward:/";
    }
}

项目结构 #

主类代码 #

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Backend6Application {

    public static void main(String[] args) {
        SpringApplication.run(Backend6Application.class, args);
    }

}

Servlet初始化器（Spring Boot默认生成，也可与主类合并） #

package com.example.demo;

import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

public class ServletInitializer extends SpringBootServletInitializer {

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(Backend6Application.class);
    }

}

application.properties文件内容 #

spring.mvc.pathmatch.matching-strategy=ANT_PATH_MATCHER

POM文件内容 #

使用Maven frontend plugin集成并构建Spring Boot项目中的前端组件。已添加Tomcat依赖并设置为provided，因为要部署到Apache，但本地IDE的Tomcat上运行正常。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.7</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.wazooinc</groupId>
    <artifactId>spring-boot-with-react</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>backend-6</name>
    <description>Demo project for Spring Boot with React</description>
    <properties>
        <java.version>11</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>

            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.12.1</version>

                <executions>
                    <!-- installing node and npm -->
                    <execution>
                        <id>Install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <nodeVersion>v19.6.1</nodeVersion>
                            <npmVersion>9.4.0</npmVersion>
                        </configuration>
                    </execution>

                    <!-- running npm install -->
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>

                    <!-- build our production version -->
                    <execution>
                        <id>npm build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
                <configuration>
                    <nodeVersion>v19.6.1</nodeVersion>
                    <workingDirectory>${project.basedir}/src/main/frontend</workingDirectory>
                </configuration>
            </plugin>

            <!-- copy our react build artifacts to spring boot -->
            <plugin>
                <!-- <groupId>org.apache.maven.plugins</groupId> -->
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>Copy JavaScript app into SpringBoot</id>
                        <phase>process-resources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${basedir}/target/classes</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>${basedir}/src/main/frontend/build</directory>
                                    <filtering>false</filtering>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

已尝试的解决方案 #

• 查阅大量博客、问答和视频，未能定位问题
• 调整输出目录，似乎Spring Boot有固定的前端资源服务路径，与POM配置无关
• 修改asset-manifest.json文件，在构建文件路径中添加编译后的文件名，无效
• 执行npm run build后将build文件夹复制到static文件夹，采用示例中的target文件夹存储编译后的前端文件
• 将React构建生成的js和css文件夹复制到resources/static文件夹，导致js/css文件404错误
• 考虑过在static文件夹创建index.html作为React应用入口App.js的代理，但觉得不合理，希望了解这种方法的原理

实在没有其他思路解决这个问题，求帮助！

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