運行環境：

• 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

1. 在這之前，需要先依次安裝 Java、Maven 和 IntelliJ IDEA。筆者在此之前都編寫過它們的安裝教程，故此處不再介紹。

2. 在 IntelliJ IDEA 中新建一個 Spring Boot 項目。也可以選擇到 Spring 官網上下載，官網：https://start.spring.io/

下載 React 官方 demo

1. 在這之前，需要先依次安裝 Node.js 和 WebStorm。筆者在此之前都編寫過它們的安裝教程，故此處不再介紹。

2. 使用如下命令在任意目錄中生成一個 React 項目 create-react-app：（需要管理員權限）

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

開始整合

1. 假設讀者已經完成了上述步驟。現在開始整合。

2. 使用如下命令將 React 項目打包。打包后應該會在項目目錄下生成一個文件夾 build。其中，至少有一個 React 入口網頁，如 index.html。

   npm build
   

   

3. 將上面文件夾 build 中的所有內容移動到 Spring Boot 項目中資源目錄下的文件夾 public 中，因為 public 是 Spring Boot 默認指定的靜態資源目錄之一。

   注意：是將文件夾 build 中的所有內容移動，不是將文件夾 build 移動。

   

4. 在 Spring Boot 項目中編寫一個空的控制器，這里為了防止 Spring Boot 因為認為到沒有進行任何任務而自動退出。

5. 為此，需要引入如下控制器注解的依賴。

   <dependency>
       <groupId>org.springframework.bootgroupId>
       <artifactId>spring-boot-starter-webartifactId>
   dependency>
   

6. 編寫一個空的控制器。

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

7. 現在運行 Spring Boot 項目，然后使用瀏覽器訪問如下網址就應該可以見到 React 的 Logo 頁面。

   http://localhost:8080/index.html
   

   

   但是請注意：一旦將 React 打包文件置入 Spring Boot 的靜態資源路徑中，外界實際上就獲得了關于此路徑下所有文件的訪問權限。如果想要對此訪問權限進行管控，需要自行設定 Spring MVC 攔截器。

使用 Spring MVC 控制器導向 React

1. 如果希望使用 Spring MVC 控制器來導向此頁面，還需要進行 Spring MVC 的視圖解析器配置。

2. 為此，需要在 Spring Boot 的配置文件（如 application.properties）中加入如下配置。

   spring.mvc.view.prefix=/
   
   spring.mvc.view.suffix=.html
   

3. 然后就可以開發相應的控制器了。

   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";
       }
   }
   

4. 這樣就可以通過如下與資源文件路徑無直接關聯的地址來導向 React 了。

   http://localhost:8080/index
   

   

將 React 打包文件置入 Spring Boot 更深的文件夾中

1. 如果想要將 React 項目置入 Spring Boot 中目錄 public 下任意深層次的目錄的都能起作用，需要在 React 項目中的 package.json 中加入代碼 "homepage": "."，添加的位置如下：

   package.json

   {
     "dependencies": {
       ...
     },
     "homepage": ".",
   }
   

2. 然后在對此 React 項目進行打包，這樣就可以將 React 項目置入 Spring Boot 中目錄 public 下任意深層次的目錄了，如圖所示。

   不過，此時，通過 Spring Boot 視圖解析器進行解析 React 資源時，將不會鏈接完整的資源。也就是說，如果將 React 項目置入 Spring Boot 中目錄 public 下任意深層次的目錄中，則只能瀏覽器通過 React 項目的真實相對路徑來訪問 React 頁面，而不能通過 Spring MVC 控制器的導向。此時如果使用 Spring MVC 控制器來導向 React 頁面，瀏覽器可以接收到頁面，但可能接收到的是缺失 React 組件的頁面。

   

3. 上面將 React 打包文件置入 Spring Boot 中靜態資源目錄下的目錄 build 中，所以現在就可以如下 URL 來訪問 React 頁面了。

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

   

使用本地資源路徑

1. Spring Boot 也支持使用本地資源路徑作為 Spring Boot 的靜態資源路徑。這里以路徑 C:/Program Files/Nginx/nginx-1.21.6/html/ 為例，假設將 React 打包文件置于了此路徑中。

   

2. 指定 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/");
       }
   }
   

3. 現在可以來通過如下 URL 訪問 React 頁面了。

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

   

   不過，這種方法同 將 React 打包文件置入 Spring Boot 更深的文件夾中 一樣，會令 Spring MVC 控制器不會鏈接完整的 React 資源。所以不能使用使用本方法后，就不能再使用 Spring MVC 控制器來導向 React 資源。

4. 一般來說，會將上面的路徑作為配置而置入 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

1. 由于 Spring Boot 本身沒有相應的 GUI 界面，所以一旦以脫離 IDE 的方式來運行 Spring Boot，此時將無法直接知道 Spring Boot 有沒有運行，也無法直接將其關閉。雖然可以通過操作系統的命令來解決，不過，Spring Boot 提供了一種僅通過 URL 就可以將其關閉的方式。

2. 這是 Spring Boot Actuator 提供的功能，為此需要引入如下依賴：

   <dependency>
       <groupId>org.springframework.bootgroupId>
       <artifactId>spring-boot-starter-actuatorartifactId>
   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

3. 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=*
   

4. 在啟動了上述配置之后，關閉端點 的 URL 默認是 域名:端口號/actuator/shutdown。不過，Spring Boot 要求 關閉端點 的 URL 必須由 POST 請求來觸發，所以不能在瀏覽器輸入上述網址來停止 Spring Boot。

5. 發起 POST 請求的方法有很多，如使用如下命令：

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

   也可以選擇使用一種 網絡請求模擬 軟件（如 Postman）來發出 POST 請求。

6. 關閉 Spring Boot 成功后，將收到如下反饋：

   {
       "message": "Shutting down, bye..."
   }
   

7. 激勵端點 的 URL 路徑是由 激勵端點的基路徑 + 激勵端點名 來構成的，默認的基路徑是 域名:端口號/actuator/。可以更改 關閉端點 的基路徑。為此，需要在 application.properties 中進行如下設置。

   application.properties

   # 設置 shutdown 的 Endpoint URL 的基路徑，需要以斜杠 / 開頭
   management.endpoints.web.base-path=/backdoor/
   

8. 現在，關閉端點 的 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)