如何将 React webapp 集成到带有 jar 包装的 Spring Boot 应用程序中
anj*_*anb 7 maven-3 reactjs spring-boot webpack
我们有一个 react webapp 和一个 spring boot 应用程序（用 maven 构建）正在开发中。
React 应用程序（在 npm 上）和启动应用程序分别运行，但现在是时候将它们集成并放入 QA/staging 中了。
我们正在使用 webpack 来捆绑 React 应用程序。
启动应用程序是一个带有 REST API（由 React 前端使用）的单个模块，带有用于数据库持久性的休眠。
问题
- react 和 boot 应用程序的目录结构应该是什么？我们想将整个应用程序（前端和后端）部署为 .jar（spring boot uberjar）
- 什么是 React 应用程序开发工作流程？无需在每次进行小的 css、html 或 .js 更改时运行 maven 和运行 java -jar 的工作流。
我在 web 上找到了资源，其中 react 和 boot 应用程序都在单独的存储库/目录中，没有任何集成，这不是最佳的；我还没有找到一个资源，其中 webapp 资源和引导资源都在同一目录树中，这也说明了开发生命周期和生产生命周期。
奖励：React 开发人员只知道 html/js/css。他们的 vscode/webstorm 项目中是否可能只有 react 应用程序资源？
Arp*_*jee 28
您可以在同一端口上运行 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。
对于第 1 步中的frontend-maven-plugin -如果您仔细查看pom.xml那里，我提到了frontend-maven-pluginsrc将从中获取文件的目录，创建生产版本并将内容放入提到的输出目录中（内部）。src/main/frontend/build
<workingDirectory>${frontend-src-dir}</workingDirectory>
<installDirectory>${project.build.directory}</installDirectory>
对于第 2 步中的maven-resources-plugin -它将采用刚刚由frontend-maven-plugin创建的生产构建并将其放置在您的根目录中target/classes/static。
然后，我们将使用Thymleaftarget/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/。
有关更多详细信息，您可以查看我写的博客。以下是两个不同平台上博客的链接-
- 非常感谢你做的这些！一整天都在试图解决这个问题。我是一位经验丰富的 Java 开发人员，但对 Javascript 框架还是个新手。很难找到关于如何执行此操作的明确说明 (5认同)
我建议创建多模块 maven 项目，其中一个模块是 spring-boot 应用程序，第二个模块是反应应用程序。要使其成为 uber jar，请将react 应用程序打包到 maven 构建的webjar 中。构建也可以通过 maven 使用适当的插件来完成。
所以：
- 在您项目的子目录中创建普通的反应应用程序（由 npm 等构建）
- 添加到这个应用程序 pom.xml，它将在 maven compile 上编译 javascript并将其打包成适当的 webjar 结构
- 在 spring-boot 模块中添加 react 一个作为正常的 maven 依赖项。看看这个教程
这将允许您将所有内容作为一个 uber jar 应用程序。另一方面，前端人员可以像使用任何其他 React 应用程序一样使用 react 模块。
| 归档时间： |
|
| 查看次数： |
3534 次 |
| 最近记录： |