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

暗诺星刻

已于 2023-09-07 05:33:34 修改

阅读量2.8k

点赞数 3

分类专栏：教程/入门使用 Java JS/TS/HTML/CSS 文章标签： SpringBoot React.js 免服务器

于 2022-02-20 21:21:31 首次发布

本文链接：https://blog.csdn.net/wangpaiblog/article/details/123036241

版权

Java 同时被 3 个专栏收录

92 篇文章 11 订阅

订阅专栏

教程/入门使用

44 篇文章 30 订阅

订阅专栏

JS/TS/HTML/CSS

7 篇文章 0 订阅

订阅专栏

笔者的运行环境：

React 环境：

React 16.13.0

npm 8.3.1

webpack 5.68.0

WebStorm 2021.3 (Ultimate Edition)

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。笔者在此之前都编写过它们的安装教程，故此处不再介绍。

Java 下载安装教程： https://blog.csdn.net/wangpaiblog/article/details/111466827

Maven 下载安装教程： https://blog.csdn.net/wangpaiblog/article/details/112689500
在 IntelliJ IDEA 中新建一个 Spring Boot 项目。也可以选择到 Spring 官网上下载，官网：https://start.spring.io/

下载 React 官方 demo

在这之前，需要先依次安装 Node.js 和 WebStorm。

Node.js 下载安装教程： https://blog.csdn.net/wangpaiblog/article/details/113666666
使用如下命令在任意目录中生成一个 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 {
    @Override
    public 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;

    @Override
    public 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 对 Actuator 的介绍：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/。

完整代码

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

React 部分：https://github.com/wangpaiblog/20220220-springboot_react-1-react_part
Spring Boot 部分：https://github.com/wangpaiblog/20220220-springboot_react-2-sb_part

暗诺星刻

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
如何免安装服务器将 React 整合进 Spring Boot

如何将 React 整合进 SpringBoot下载 SpringBoot 官方 demo下载 React 官方 demo开始整合使用 Spring MVC 控制器导向 React将 React 打包文件置入 SpringBoot 更深的文件夹中使用本地资源路径停止 SpringBoot完整代码运行环境：React 环境：React 16.13.0npm 8.3.1webpack 5.68.0WebStorm 2021.3SpringBoot 环境：Java
复制链接

扫一扫