响应Spring启动部署

Question

我在部署带有Spring启动的 react nodejs 应用程序时遇到问题。Spring应用程序在基本的HTML / JS中工作正常，并且我已经使react应用程序在开发模式下运行良好，但是我似乎缺少一些东西，即正确捆绑反应和Spring。

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

我还可以通过节点JS npm start在开发模式下运行我的反应应用程序，并将其指向我的本地Spring启动应用程序。（我将"代理"："http://localhost:8080"添加到manifest.json）。我正在努力将我的反应应用程序与我的Spring应用程序的其余部分捆绑到战争中并使其正常工作。如果没有rest调用，我甚至无法加载反应hello世界页面。

我尝试运行< code>npm run build，然后将< code>/build目录中生成的所有文件复制到我的spring项目的< code>/src/main/resources中。具体来说，我复制了:

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

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

在构建 war（mvn 安装）并在本地运行 war 之后，我在尝试加载服务器而不指定任何页面时收到 404 错误。当我指定索引.html时，我收到错误，指出它无法在我的静态目录中加载JS和CSS文件。当我将 war 部署到 ec2 并尝试加载页面时，也会发生同样的问题。

我是否遗漏了更多配置步骤？我知道我可能需要做一些基本的URL配置来使用开发模式之外的rest API，但是如果没有任何rest调用，我甚至无法加载页面。我试图将index.html移动到不同的位置，比如< code>/resources/static和< code>/resources/public。任何帮助都将不胜感激。

Answer 1

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

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

下面是我建造和战争的pom部分

        <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 2

出于生产目的，我使用frontend-maven-plugin和maven-antrun-plugin遵循了相同的方法。

我使用前端maven插件生成React bundle（＜code＞npm install＜/code＞，然后＜code＜npm run build＞），并使用maven antrun插件将工件复制到spring boot的公共文件夹。

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

Answer 3

看看Spring的这个教程，有一个“前端maven插件”，你可能会发现它非常有用。我会放弃这场战争，把你的springboot应用程序构建成一个jar，然后把你的js文件放在src/main/js和你的索引中。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 前端插件构建，它将“正常工作”。

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