Question

我们在开发中有一个react webapp和一个使用maven构建的spring boot应用程序。
React应用程序（在npm上）和启动应用程序分别运行，但是现在需要将它们集成到QA / staging中了。
我们正在使用webpack捆绑react应用程序。
引导应用程序是带有REST API（由React前端使用）和hibernate的单个模块，用于数据库持久性。

问题

react和boot应用程序的目录结构应该是什么？我们希望将整个应用程序（前端和后端）部署为.jar（spring boot uberjar）
什么是React App开发工作流程？每次进行小的css，html或.js更改时，都不必运行maven并运行java -jar的工作流程。

我发现Web上的资源，其中React和Boot应用程序都位于单独的存储库/目录上，没有任何集成，这不是最佳选择；我还没有找到Webapp资源和启动资源都在同一目录树中的资源，它也说明了开发生命周期和生产生命周期。

奖金：反应的开发人员只知道html / js / css。他们可能在vscode / webstorm项目中仅具有react应用程序资源吗？

Answer 1

我建议创建多模块Maven项目，其中一个模块是spring-boot应用程序，第二个模块是react应用程序。要将其放入超级jar中，请将react app打包到maven构建的webjar中。使用适当的插件，maven也可以完成构建。

所以：

在项目的子目录中创建普通的React应用（通过npm等构建）
将compile javascript on maven compile和pack it into proper webjar structure
在spring-boot模块中，将react 1作为正常的maven依赖项添加。 Check out this tutorial

这将使您可以将所有内容作为一个uber jar应用程序。另一方面，前端人员可以像其他任何React应用程序一样使用react模块。

Answer 2

我发现这则帖子可能回答了您的问题。它显示了如何开发react前端和spring boot后端，然后将它们合并到单个jar文件中进行部署。

https://medium.com/@mukundmadhav/build-and-deploy-react-app-with-spring-boot-and-mysql-6f888eb0c600

Answer 3

您可以在同一个端口上运行 React 和 SpringBoot，并将它们打包为一个工件！！请按照我在此处解释的步骤进行操作，这应该可以帮助您启动并运行。回答您的问题-

目录结构如下图所示。两者都在同一个根目录下。
关于 React 应用程序开发工作流程 - 您可以按照开发前端 React 项目的方式进行开发，使用热重新加载（保存文件，更改将自动反映）和有意义的错误消息。您将不得不使用代理进行通信。

<块引用>

这是我将要访问的演示项目的 Github 链接在这里解释

Spring Boot 可以提供来自 src/main/resources/static 文件夹的静态内容。我们将利用 Spring Boot 的上述特性来为 react 项目的单个页面提供服务。我们将从目标目录中的静态文件夹中提供一个 html 页面，而不是在源目录中。

项目结构-

首先，使用 https://start.spring.io 创建一个 spring boot 项目。添加 Web 依赖项。将 groupId 和 artifactId 设置为您想要的任何值。生成项目并将其解压缩到您的项目目录中。

或者，如果您使用的是 Spring Tools Suite，则只需单击 File->New->Spring Starter Project 并提及创建 Spring Boot 项目所需的详细信息。

frontend 中的 src/main 文件夹应该使用 create-react-app 构建您的 React 应用程序。

所以，有两个步骤-

创建前端的生产版本。
将生产版本复制到 ${target/classes/}。

为此，我们将使用两个 maven 插件和 Thymleaf。

frontend-maven-plugin 用于第 1 步。
maven-resources-plugin 用于第 2 步。

对于第 1 步中的 frontend-maven-plugin--如果您仔细观察那里的 pom.xml，我已经提到了 src 目录，其中 frontend-maven-plugin将获取文件，创建生产版本并将内容放在提到的输出目录中（在 src/main/frontend/build 内）。

 <workingDirectory>${frontend-src-dir}</workingDirectory>
 <installDirectory>${project.build.directory}</installDirectory>

对于第 2 步中的 maven-resources-plugin-- 它将获取刚刚由 frontend-maven-plugin 创建的生产版本并将其放置在您的根目录中，然后 target/classes/static .

然后我们将使用 Thymleaf 来提供来自 target/classes/static 的静态内容，并使用控制器中的休息端点。否则，您必须输入 html file 的名称，例如 http://localhost:8080/index.html

你的 pom.xml 应该是这样的-

<?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.4.2</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.springreact</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>Run React Frontend and SpringBoot Backend on the same port.</description>
    <properties>
        <java.version>1.8</java.version>
        <frontend-src-dir>${project.basedir}/src/main/frontend</frontend-src-dir>
        <node.version>v14.15.4</node.version>
        <yarn.version>v1.16.0</yarn.version>
        <frontend-maven-plugin.version>1.7.6</frontend-maven-plugin.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <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-thymeleaf</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>${frontend-maven-plugin.version}</version>

                <configuration>
                    <nodeVersion>${node.version}</nodeVersion>
                    <yarnVersion>${yarn.version}</yarnVersion>
                    <workingDirectory>${frontend-src-dir}</workingDirectory>
                    <installDirectory>${project.build.directory}</installDirectory>
                </configuration>

                <executions>
                    <execution>
                        <id>install-frontend-tools</id>
                        <goals>
                            <goal>install-node-and-yarn</goal>
                        </goals>
                    </execution>

                    <execution>
                        <id>yarn-install</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>

                    <execution>
                        <id>build-frontend</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <arguments>build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>position-react-build</id>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>${frontend-src-dir}/build</directory>
                                    <filtering>false</filtering>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

这是控制器代码。

package com.springreact.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {

    @GetMapping("")
    public ModelAndView home() {
        ModelAndView mav=new ModelAndView("index");
        return mav;
    }

}

如果您按照上述步骤操作，您应该会看到您的 React 应用程序在 http://localhost:8080/ 上启动。

有关更多详细信息，您可以查看我在上面写的博客。这是两个不同平台上博客的链接-

开发社区 - https://dev.to/arpan_banerjee7/run-react-frontend-and-springboot-backend-on-the-same-port-and-package-them-as-a-single-artifact-14pa

中 - https://medium.com/codex/run-react-frontend-and-springboot-backend-on-the-same-port-and-package-them-as-a-single-artifact-a790c9e10ac1

如何使用jar包装将React Webapp集成到Spring Boot应用程序内部

3 个答案: