React + Spring Boot部署

Question

我在使用spring boot部署react nodejs應用程序時遇到問題。 spring應用程序與基本的HTML / JS一起工作正常，我已經讓dev應用程序在開發模式下運行良好，但我似乎錯過了將反應和彈簧正確捆綁在一起的東西。

目前，我可以使用一些簡單的HTML和javascript ajax調用來運行/部署我的spring啟動應用程序（沒有反應）。 它在我的AWS ec2上運行沒有任何問題。

我也可以通過節點JS“npm start”在開發模式下運行我的react應用程序，並將它指向我當地的spring boot應用程序。 （我在manifest.json添加了"proxy": "http://localhost:8080" ）。 我正在努力實現將我的反應應用程序與我的Spring應用程序的其余部分捆綁在戰爭中並使其正常運行的后續步驟。 我甚至無法在沒有休息呼叫的情況下加載一個反應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 ）並在本地運行war之后，我在嘗試加載沒有指定任何頁面的服務器時遇到404錯誤。 當我指定index.html時，我收到的錯誤是它無法在我的靜態目錄中加載JS和CSS文件。 當我將戰爭部署到ec2並嘗試加載頁面時，會發生同樣的問題。

我缺少更多配置步驟嗎？ 我知道可能有一些基本的URL配置，我需要做的是在開發模式之外使用其余的API，但我甚至無法在沒有任何其他調用的情況下加載頁面。 我嘗試將index.html移動到各種位置，例如/resources/static和/resources/public 。 任何幫助，將不勝感激。

Answer 1

從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前端插件構建它就會“正常工作”。

正如其他人所建議的那樣，最好將前端和后端代碼分開（將它們保存在不同的存儲庫中）。

Answer 2

我也遇到了同樣的問題，在項目的src文件夾中創建了一個文件夾webapp / resources ，並復制了從npm install和run build生成的構建文件夾內容。 這解決了這個問題。

在我的項目中，我將si / main / app文件夾中的Ui文件運行並運行npm install並在其上運行build命令。 然后將構建文件夾內容復制到src / main / webapp / 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 3

我使用frontend-maven-plugin和maven-antrun-plugin按照相同的方法進行生產。

我使用frontend-maven-plugin生成React包（ npm install和npm run build ）和maven-antrun-plugin來將工件復制到spring boot的公共文件夾。

一個偉大的示例項目和教程，可以發現這里