React + Spring Boot 部署

Question

我在使用 Spring Boot 部署 react nodejs 应用程序时遇到问题。 spring 应用程序可以与基本的 HTML/JS 一起正常工作，并且我的 react 应用程序在开发模式下运行良好，但就正确捆绑 react 和 spring 而言，我似乎遗漏了一些东西。

目前，我可以使用一些简单的 HTML 和 javascript ajax 调用（无反应）来运行/部署我的 Spring Boot 应用程序。它在我的 AWS ec2 上运行没有问题。

我还可以通过节点 JS“npm start”在开发模式下运行我的 react 应用程序，并将其指向我的本地 spring boot 应用程序。 （我将"proxy": "http://localhost:8080" 添加到manifest.json）。我正在努力将我的反应应用程序与我的 Spring 应用程序的其余部分实际捆绑到战争中并让它工作的下一步。如果没有休息电话，我什至无法加载 react hello-world 页面。

我尝试运行npm run build，然后将/build 目录中生成的所有文件复制到我的spring 项目的/src/main/resources。 具体是我抄的：

react-app/build/static/* -> spring-app/src/main/resources/static/.

react-app/build/* -> spring-app/src/main/resources/.

在构建战争 (mvn install) 并在本地运行战争之后，我在尝试加载服务器时遇到 404 错误，而没有指定任何页面。当我指定 index.html 时，我收到错误，它无法在我的静态目录中加载 JS 和 CSS 文件。当我将战争部署到 ec2 并尝试加载页面时，也会出现同样的问题。

我还缺少更多配置步骤吗？我知道我可能需要做一些基本的 URL 配置才能在开发模式之外使用其余 API，但是如果没有任何休息调用，我什至无法加载页面。我尝试将 index.html 移动到各个位置，例如 /resources/static 和 /resources/public。任何帮助将不胜感激。

Answer 1

我使用 frontend-maven-plugin 和 ma​​ven-antrun-plugin 为生产目的采用了相同的方法。

我使用 frontend-maven-plugin 生成 React 包（npm install 和 npm run build）和 ma​​ven-antrun-plugin 将工件复制到spring boot 的公用文件夹。

可以在here找到一个很棒的示例项目和教程

Answer 2

我也遇到了同样的问题 在项目的 src 文件夹中创建了一个文件夹 webapp/resources，并复制了从 npm install 生成的 build 文件夹内容并运行 build。 这解决了问题。

在我的项目中，我在 src/main/app 文件夹中有 Ui 文件，并在其上运行 npm install 并运行构建命令。 然后将构建文件夹内容复制到 src/main/webapp/resources https://github.com/Aditya260194/spring-boot-react-app

下面是我的构建和战争部分

        <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <id>npm install</id>
                        <phase>generate-sources</phase>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <configuration>
                            <workingDirectory>${uiResourcesDir}</workingDirectory>
                            <executable>npm.cmd</executable>
                            <arguments>
                                <argument>install</argument>
                            </arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm run build</id>
                        <phase>generate-sources</phase>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <configuration>
                            <workingDirectory>${uiResourcesDir}</workingDirectory>
                            <executable>npm.cmd</executable>
                            <arguments>
                                <argument>run</argument>
                                <argument>build</argument>
                            </arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

Answer 3

从 Spring 中查看本教程，有一个“frontend-maven-plugin”，您可能会发现它非常有用。我会放弃战争，将你的 Spring Boot 应用程序构建为一个 jar，然后将你的 js 文件放在 src/main/js 中，并将你的 index.html 放在 /src/main/resources/static 中。

教程可在此处获得：

https://spring.io/guides/tutorials/react-and-spring-data-rest/

代码可以在这里找到：

https://github.com/spring-guides/tut-react-and-spring-data-rest/tree/master/basic

使用类似于教程中使用的 webpack.config.js 配置，一旦您使用 maven 前端插件构建，它将“正常工作”。

正如其他人所建议的，最好将前端和后端代码分开（将它们保存在单独的存储库中）。