言簡意賅的講解Java Spring Boot 中嵌入前端項目的靜態資源解決的痛點

之前給大家講解了如何部署一個前端項目，但大家還是好奇如何部署一個前后端一體項目。將前端構建后的靜態資源嵌入 Java Spring Boot 后端項目，是現代全棧開發中一種流行的實踐方式。本文將詳細講解這樣做的好處，并通過代碼示例和實踐演示，幫助你輕松實現這一目標。最后，我們還會探討如何優化靜態資源訪問路徑，使用戶體驗更加友好。

---

一、在 Spring Boot 中嵌入靜態資源的好處

1.1 好處概述

1. 簡化交付流程
   前端打包生成的靜態資源與后端結合為一個單獨的可運行文件（如 jar 或 war），客戶只需運行一個文件即可啟動整個系統，無需分別部署前端和后端服務。

2. 獨立開發，協作靈活
   在開發階段，前后端仍可以分為兩個獨立團隊，分別開發和調試。前端完成開發后，通過構建工具（如 Webpack、Vite）生成靜態資源文件，后端只需加載這些文件即可。

3. 部署維護方便
   只需部署一個 Spring Boot 服務，無需額外配置 Nginx 或其他靜態資源服務器，降低部署復雜度，減少維護成本。

---

二、實現步驟與代碼示例

2.1 項目目錄結構規劃

為了更好地管理嵌入的前端靜態資源，建議使用如下的項目目錄結構：

project-root/
├── src/
│   ├── main/
│   │   ├── java/
│   │   ├── resources/
│   │   │   ├── static/           # 存放前端打包后的靜態資源
│   │   │   │   ├── index.html
│   │   │   │   ├── css/
│   │   │   │   ├── js/
│   │   │   │   ├── images/
│   │   │   └── application.properties
│   │   └── Application.java
├── frontend/                     # 前端項目目錄（開發階段）
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── vite.config.js
└── pom.xml

2.2 前端構建與資源存放

1. 前端項目打包
   假設你的前端使用 Vite 或 Webpack 構建，運行如下命令生成構建文件：

   npm run build
   

   生成的文件通常位于 dist/ 目錄下，其中包括 index.html 和相關靜態資源文件（如 css/、js/ 文件夾）。
   

2. 拷貝靜態資源到后端項目
   將 dist/ 中的所有文件復制到 Spring Boot 項目的 src/main/resources/static/ 目錄下。
   
   注意： src/main/resources/static/ 是 Spring Boot 的默認靜態資源目錄，放置在此的文件可以直接通過瀏覽器訪問。

---

2.3 后端代碼示例

package com.example.demo;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class DemoApplication {public static void main(String[] args) {SpringApplication.run(DemoApplication.class, args);}
}

重要提示：如果你只需要靜態資源，而不打算使用 Spring MVC 來攔截路徑，請確保 src/main/resources/static/ 中的文件名和路徑完全一致。Spring Boot 會自動將這些文件直接暴露為靜態資源。

---

2.4 訪問測試

完成上述步驟后，運行 Spring Boot 項目并訪問以下 URL：

• http://localhost:8080/index.html
• http://localhost:8080/css/style.css
• http://localhost:8080/js/app.js

你會發現靜態資源可以正常加載。但這里存在一個問題：URL 必須以 .html 結尾，這不夠美觀且容易暴露文件類型。

---

三、優化靜態資源訪問路徑

為了去掉 .html 后綴，提供更優雅的訪問方式，我們可以通過以下兩種方式解決：

3.1 使用 Nginx 配置 URL 重寫

如果最終的部署環境中使用了Nginx，可以通過配置重寫規則來去掉 .html 后綴。例如：

server {listen 80;server_name yourdomain.com;root /path/to/static/files;location / {try_files $uri $uri/ $uri.html =404;}
}

上述規則會優先匹配文件路徑，若文件路徑不存在，則嘗試追加 .html 后綴。

---

3.2 使用 Spring MVC 實現 URL 重寫

如果沒有使用 Nginx，可以通過 Spring MVC 自定義控制器來實現 URL 重寫。

添加控制器代碼

package com.example.demo;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;@Controller
public class WebController {@GetMapping("/{path:[^\.]*}") // 匹配路徑中不包含"."的請求public String forwardToIndex() {return "forward:/index.html"; // 轉發到 index.html}
}

功能說明

• 該控制器會將所有不包含文件后綴的請求（如 /about、/contact）轉發到 index.html。
• 這樣，訪問 http://localhost:8080 或 http://localhost:8080/about 時，都會加載前端的 index.html。

---

四、總結

通過將前端構建后的靜態資源嵌入到 Spring Boot 項目中，可以顯著簡化交付和部署流程。為了提升用戶體驗，可以通過配置 Nginx 或 Spring MVC 實現 URL 優化。以下是整個流程的核心步驟總結：

1. 前后端獨立開發，前端打包輸出靜態資源文件。
2. 將構建好的文件復制到 Spring Boot 的 src/main/resources/static/ 目錄下。
3. 運行后端項目，確保靜態資源可以正常訪問。
4. 通過 Nginx 或 Spring MVC 優化路徑訪問。

按照本文的指導，你可以輕松實現一個既美觀又高效的全棧項目交付方案。

---

通過上述內容，你就已經基本理解了這個方法，基礎用法我也都有展示。如果你能融會貫通，我相信你會很強

Best
Wenhao (楠博萬)