为什么编译后的 Spring Boot + React 项目找不到 React 构建文件？

Question

几天后我完成了一个项目的原型开发，该原型需要进行用户测试，并且在 IDE 中测试时它按预期工作。后端在 Spring Boot 中，内置在 STS4 中，前端是 React，内置在 VS Code 中。

作为该过程的一部分，我正在从这两个部分创建一个“war”包，该包将部署在测试服务器上。一切都按应有的方式编译，文件被部署到 Apache（我正在测试它的地方），问题在那里出现。

更新

我决定创建一个并行的、更简单的项目来查看为什么会出现此错误，但没有成功。

项目编译成WAR部署在Apache上：

运行项目会产生以下输出：

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

错误详情：

控制器文件的内容：

项目结构：

主类是标准问题：

Servlet 初始化器，它与 Spring Boot 一起出现，但可以与主类捆绑在一起：

上下文，这是项目中的POM文件，它使用Maven前端插件在Spring Boot项目中集成和构建前端组件。

<?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>
    </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 有一个固定的参考点来服务于与 POM 文件中的内容无关的前端？

打包的主要要求是指定“war”格式，因为我的目标是基于 Web 的应用程序，指定提供 Tomcat 实例，因为它将部署在 Apache 上，以及放置范围这些链接中的插件（有变体），它将构建反应文件并将其放在一个专用文件夹中，据我所知，该文件夹应该由 Spring 检索。

Spring Boot 将从中获取前端组件的默认文件夹，例如 Thymeleaf，位于 resources 文件夹下，您可以将 HTML 文件放在 static 或 templates 文件夹中。

我尝试的其他方法是尝试修改 asset-manifest.json 文件以将编译文件的名称包含在这些构建文件的路径中，但这没有任何区别。

我之前确实在 React 项目上运行过 npm run build，并将其与它的 build 文件夹一起移植到 static 文件夹中。我确实注意到各种示例使用 target 文件夹，其中存储前端的编译版本，所以我通常保留它。

我遇到的进一步建议是，可以将在 React 构建文件中创建的 js 和 css 文件夹移植到 resources/static 文件夹中，然后 Spring Boot 将自动在其中查找，但这种方法产生了存在于其中的 js/css 文件出现 404 错误。

我想到的最后一个想法是在静态文件夹中创建一个 index.html 文件，它作为 App.js 文件的代理，该文件是基于 React 的应用程序的入口点，但这种方法并没有产生太多效果鉴于以上情况，对我来说很有意义，如果有人以前做过，我将不胜感激。

我真的没有其他角度来解决这个问题。

提前谢谢你！