我们有一个 react webapp 和一个 spring boot 应用程序(用 maven 构建)正在开发中。
React 应用程序(在 npm 上)和引导应用程序是分开运行的,但现在是时候将它们集成起来并将其放入 QA/staging 中了。
我们正在使用 webpack 来捆绑 react 应用程序。
启动应用程序是一个带有 REST API(由 react 前端消耗)的单个模块,具有用于数据库持久性的休眠功能。
问题
我在网络上找到了资源,其中 react 和引导应用程序都位于单独的存储库/目录中,没有任何集成,这不是最佳的;我还没有找到一个资源,其中 webapp 资源和引导资源都在同一个目录树中,这也说明了开发生命周期和生产生命周期。
奖励:react 开发人员只知道 html/js/css。他们的 vscode/webstorm 项目中是否只有 react 应用程序资源?
最佳答案
您可以在同一端口上运行 React 和 SpringBoot 并将它们打包为单个工件!
请按照我在此处解释的步骤进行操作,这应该可以帮助您启动并运行。
回答你的问题——
Here is the Github link of the demo project that I am going to explain here
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 应用程序.所以,有两个步骤-
我们将使用两个 maven 插件和 Thymleaf为了那个原因。
对于frontend-maven-plugin在步骤 1-- 如果您仔细查看
pom.xml
那里我提到了src
来自哪里frontend-maven-plugin将获取文件,创建生产版本并将内容放在提到的输出目录中(在 src/main/frontend/build
内)。 <workingDirectory>${frontend-src-dir}</workingDirectory>
<installDirectory>${project.build.directory}</installDirectory>
对于maven-resources-plugin在第 2 步——它将采用 frontend-maven-plugin 刚刚创建的生产版本。然后把它放在你的根目录下target/classes/static
.然后我们将使用 Thymleaf 提供来自
target/classes/static
的静态内容在 Controller 中使用休息端点。否则您必须输入 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>
这里是 Controller 代码。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
关于reactjs - 如何将 React webapp 集成到带有 jar 包装的 Spring Boot 应用程序中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64058885/