如何免安装服务器将 React 整合进 Spring Boot

下载 Spring Boot 官方 demo
下载 React 官方 demo
开始整合
使用 Spring MVC 控制器导向 React
将 React 打包文件置入 Spring Boot 更深的文件夹中
使用本地资源路径
停止 Spring Boot
完整代码

运行环境：

React 环境：

React 16.13.0

npm 8.3.1

webpack 5.68.0

WebStorm 2021.3

Spring Boot 环境：

Java 17.0.1

Maven 3.8.3

Spring Boot 2.6.2

IntelliJ IDEA 2021.3 (Ultimate Edition)

Windows 10 教育版 64位

本文将介绍将 React 整合部署进 Spring Boot 的方法，整合之后，启动 React、Spring Boot 不需要借助任何服务器。为了方便，这里分别使用了 Spring Boot 和 React 各自的官方 demo 项目，然后演示将它们整合在一起。

下载 Spring Boot 官方 demo

在这之前，需要先依次安装 Java、Maven 和 IntelliJ IDEA。笔者在此之前都编写过它们的安装教程，故此处不再介绍。
在 IntelliJ IDEA 中新建一个 Spring Boot 项目。也可以选择到 Spring 官网上下载，官网：https://start.spring.io/

下载 React 官方 demo

在这之前，需要先依次安装 Node.js 和 WebStorm。笔者在此之前都编写过它们的安装教程，故此处不再介绍。
使用如下命令在任意目录中生成一个 React 项目 create-react-app：（需要管理员权限）

npm install -g create-react-app
create-react-app React 应用名

开始整合

假设读者已经完成了上述步骤。现在开始整合。
使用如下命令将 React 项目打包。打包后应该会在项目目录下生成一个文件夹 build。其中，至少有一个 React 入口网页，如 index.html。

npm build
将上面文件夹 build 中的所有内容移动到 Spring Boot 项目中资源目录下的文件夹 public 中，因为 public 是 Spring Boot 默认指定的静态资源目录之一。

注意：是将文件夹 build 中的所有内容移动，不是将文件夹 build 移动。
在 Spring Boot 项目中编写一个空的控制器，这里为了防止 Spring Boot 因为认为到没有进行任何任务而自动退出。

为此，需要引入如下控制器注解的依赖。

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>
</dependency>

编写一个空的控制器。

package org.wangpai.demo.Spring Boot4react;import org.springframework.stereotype.Controller;@Controller
public class EmptyController {}

现在运行 Spring Boot 项目，然后使用浏览器访问如下网址就应该可以见到 React 的 Logo 页面。

http://localhost:8080/index.html

但是请注意：一旦将 React 打包文件置入 Spring Boot 的静态资源路径中，外界实际上就获得了关于此路径下所有文件的访问权限。如果想要对此访问权限进行管控，需要自行设定 Spring MVC 拦截器。

使用 Spring MVC 控制器导向 React

如果希望使用 Spring MVC 控制器来导向此页面，还需要进行 Spring MVC 的视图解析器配置。
为此，需要在 Spring Boot 的配置文件（如 application.properties）中加入如下配置。
```
spring.mvc.view.prefix=/spring.mvc.view.suffix=.html
```

然后就可以开发相应的控制器了。

package org.wangpai.demo.Spring Boot4react;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;@Controller
public class ReactController {@GetMapping("/index")public String hello(Model model) {return "index";}
}

这样就可以通过如下与资源文件路径无直接关联的地址来导向 React 了。

http://localhost:8080/index

将 React 打包文件置入 Spring Boot 更深的文件夹中

如果想要将 React 项目置入 Spring Boot 中目录 public 下任意深层次的目录的都能起作用，需要在 React 项目中的 package.json 中加入代码 "homepage": "."，添加的位置如下：

package.json
```
{"dependencies": {...},"homepage": ".",
}
```
然后在对此 React 项目进行打包，这样就可以将 React 项目置入 Spring Boot 中目录 public 下任意深层次的目录了，如图所示。

不过，此时，通过 Spring Boot 视图解析器进行解析 React 资源时，将不会链接完整的资源。也就是说，如果将 React 项目置入 Spring Boot 中目录 public 下任意深层次的目录中，则只能浏览器通过 React 项目的真实相对路径来访问 React 页面，而不能通过 Spring MVC 控制器的导向。此时如果使用 Spring MVC 控制器来导向 React 页面，浏览器可以接收到页面，但可能接收到的是缺失 React 组件的页面。
上面将 React 打包文件置入 Spring Boot 中静态资源目录下的目录 build 中，所以现在就可以如下 URL 来访问 React 页面了。

http://localhost:8080/build/index.html

使用本地资源路径

Spring Boot 也支持使用本地资源路径作为 Spring Boot 的静态资源路径。这里以路径 C:/Program Files/Nginx/nginx-1.21.6/html/ 为例，假设将 React 打包文件置于了此路径中。
指定 Spring Boot 的静态资源路径需要重写类 WebMvcConfigurer 中的方法 addResourceHandlers。用法与注意事项如下。

【用法】
- addResourceHandler 的参数为 URL 中的基路径
- addResourceLocations 的参数为文件路径中的基路径
【例如】

如果使用了如下的方法参数：
- addResourceHandler("/local/**")
- addResourceLocations("file:C:/Program Files/Nginx/nginx-1.21.6/html/")
则访问的 URL 与本地文件路径的对应关系示例如下：
- 若访问的 URL 为：http://域名:端口号/local/index.html
- 则本地文件路径为：C:/Program Files/Nginx/nginx-1.21.6/html/index.html
【注意】

此处 addResourceLocations 的参数中，文件路径不要用反斜杠 \\，就用斜杠 / 即可。另外，路径须以斜杠 / 结尾。
```
package org.wangpai.demo.Spring Boot4react;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class StaticPathConfig implements WebMvcConfigurer {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/local/**").addResourceLocations("file:C:/Program Files/Nginx/nginx-1.21.6/html/");}
}
```
现在可以来通过如下 URL 访问 React 页面了。

http://localhost:8080/build/index.html

不过，这种方法同 将 React 打包文件置入 Spring Boot 更深的文件夹中 一样，会令 Spring MVC 控制器不会链接完整的 React 资源。所以不能使用使用本方法后，就不能再使用 Spring MVC 控制器来导向 React 资源。

一般来说，会将上面的路径作为配置而置入 application.properties 中。相应的修改如下：

application.properties

custom.Spring Boot.staticResources.localPath=C:/Program Files/Nginx/nginx-1.21.6/html/

WebMvcConfigurer 类

package org.wangpai.demo.Spring Boot4react;import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class StaticPathConfig implements WebMvcConfigurer {@Value("${custom.Spring Boot.staticResources.localPath}")private String localPath;@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/local/**").addResourceLocations("file:" + localPath);}
}

停止 Spring Boot

由于 Spring Boot 本身没有相应的 GUI 界面，所以一旦以脱离 IDE 的方式来运行 Spring Boot，此时将无法直接知道 Spring Boot 有没有运行，也无法直接将其关闭。虽然可以通过操作系统的命令来解决，不过，Spring Boot 提供了一种仅通过 URL 就可以将其关闭的方式。
这是 Spring Boot Actuator 提供的功能，为此需要引入如下依赖：
```
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
```
这里不打算详细介绍 Spring Boot Actuator，更多的信息，可见：
- Spring 官方介绍：
  
  https://docs.spring.io/spring-boot/docs/current/reference/html/actuator.html
  
  https://spring.io/guides/gs/actuator-service/
- Baeldung 对 Spring Boot 的介绍：https://www.baeldung.com/spring-boot-actuators
Spring Boot 在扫描到添加了 Actuator 依赖时，便会自动应用 Actuator，而不需要手动创建任何监控类。这正是 Spring Boot 的强大之处之一。但是，默认配置下，很多 Endpoint 不会开放，如果想要开放它们，需要在 application.properties 中作相应设置。

【注：这里将 Actuator 译为 激励器，将 Endpoint 译为 端点。为了便于中文读者阅读，下面将尽量不使用原始英文术语】

application.properties
```
# 启动 shutdown 的 Endpoint URL
management.endpoint.shutdown.enabled=true
# 启动所有的 Endpoint URL
management.endpoints.web.exposure.include=*
```
在启动了上述配置之后，关闭端点 的 URL 默认是 域名:端口号/actuator/shutdown。不过，Spring Boot 要求 关闭端点 的 URL 必须由 POST 请求来触发，所以不能在浏览器输入上述网址来停止 Spring Boot。
发起 POST 请求的方法有很多，如使用如下命令：

curl -X POST http://localhost:8080/actuator/shutdown

也可以选择使用一种 网络请求模拟 软件（如 Postman）来发出 POST 请求。
关闭 Spring Boot 成功后，将收到如下反馈：
```
{"message": "Shutting down, bye..."
}
```
激励端点 的 URL 路径是由 激励端点的基路径 + 激励端点名 来构成的，默认的基路径是 域名:端口号/actuator/。可以更改 关闭端点 的基路径。为此，需要在 application.properties 中进行如下设置。

application.properties
```
# 设置 shutdown 的 Endpoint URL 的基路径，需要以斜杠 / 开头
management.endpoints.web.base-path=/backdoor/
```
现在，关闭端点 的 URL 路径变成了 http://localhost:8080/backdoor/shutdown/。

完整代码

已上传至 GitCode 中，可免费下载：

React 部分：[https://gitcode.net/wangpaiblog/20220220-Spring Boot_react-1-react_part ](https://gitcode.net/wangpaiblog/20220220-Spring Boot_react-1-react_part )
Spring Boot 部分：[https://gitcode.net/wangpaiblog/20220220-Spring Boot_react-2-sb_part](https://gitcode.net/wangpaiblog/20220220-Spring Boot_react-2-sb_part)

如何免安装服务器将 React 整合进 Spring Boot相关推荐

spring Boot 2 基础篇。内含整合一个spring boot 的小案例
目录 springBoot2基础篇前言与开发环境一.快速创建Boot项目 1.使用spring提供的快速构建 2.基于maven的手动构建 3.在Idea中隐藏指定文件/文件夹二.SpringB ...
react hooks_使用Spring Boot，JHipster和React构建照片库PWA
react hooks "我喜欢编写身份验证和授权代码." 〜从来没有Java开发人员. 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权和多 ...
Jfinal 框架 jar包部署到服务器全流程（通用spring boot等）
项目场景: 现有jar包(Jfinal框架),阿里云轻量服务器,使用的宝塔管理. 问题描述主流框架spring boot,在宝塔也有一键部署插件: 但由于项目利用的jfinal框架,就在网上找不到解 ...
使用React Native和Spring Boot构建一个移动应用
"我喜欢编写身份验证和授权代码." 〜从来没有Java开发人员. 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权和多因素身份验证. Reac ...
Vue整合到Spring Boot
文章目录 Vue打包部署到Spring Boot 1 文件目录结构 1.1 打包后的文件目录结构 1.2 后台的文件目录结构 2 修改webpack配置 3 修改Spring Boot配置 4 最后 ...
hibernate整合进spring后的事务处理
单独使用hibernate处理事务本来只用hibernate开发,从而可以省了DAO层实现数据库访问和跨数据库,也可以对代码进行更好的封装,当我们web中单独使用hibernate时,我们需要单独的 ...
使用React和Spring Boot构建一个简单的CRUD应用
"我喜欢编写身份验证和授权代码." 〜从来没有Java开发人员. 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权和多因素身份验证. Reac ...
Spring Boot底层原理详解及整合
Spring Boot框架通过Spring Boot 可以构建一个基于Spring框架的Java Application,简化配置,自动装配,开箱即用 JavaConfiguration用Java类 ...
java 模板引擎_极简 Spring Boot 整合 Thymeleaf 页面模板
点击"牧码小子"关注,和众多大牛一起成长! 关注后,后台回复 java ,领取松哥为你精心准备的技术干货! 虽然现在慢慢在流行前后端分离开发,但是据松哥所了解到的,还是有一些公司在 ...

如何免安装服务器将 React 整合进 Spring Boot

如何免安装服务器将 React 整合进 Spring Boot

下载 Spring Boot 官方 demo

下载 React 官方 demo

开始整合

使用 Spring MVC 控制器导向 React

将 React 打包文件置入 Spring Boot 更深的文件夹中

使用本地资源路径

停止 Spring Boot

完整代码

如何免安装服务器将 React 整合进 Spring Boot相关推荐

最新文章

热门文章