Spring Boot 打包與部署

1. 前言

項目開發完畢后，免不了將前后端應用打包，然后部署到生產服務器上運行。本篇就演示一個標準的打包、部署過程。

2. 操作流程

我們以上一篇開發的前后端分離項目 spring-boot-cors 為例進行打包、部署演示，步驟如下：

2.1 服務器運行環境安裝

一般服務器采用 Linux 或者 Windows Server 系統，相對而言 Linux 系統更加穩定安全。實際上 Windows Server 系統對于一般應用來說也足夠了，本篇我們使用 Windows Server 系統進行演示。

推薦使用云服務器，更加穩定且易于維護，國內廠商阿里云、華為云都還不錯。

Tips： 云服務器的硬盤讀寫性能非常重要，在購買云服務器時務必關注下云硬盤的 IOPS 值（衡量硬盤讀寫性能的一個指標），一般建議要采用 IOPS > 3800 的云磁盤。

具備云服務器后，需要安裝 JDK 以便運行 Spring Boot 應用。由于 nginx 對靜態資源的負載能力非常強悍，所以我們將前端應用部署到 nginx 上。

2.2 Spring Boot 后端應用打包與部署

Spring Boot 應用可以打包為 war 或者 jar ，官方和我個人都是推薦打 jar 包。可以直接運行，無需部署到 Web 服務器上。

打開命令行工具，進入 spring-boot-cors 項目目錄后運行 mvn clean package -Dmaven.test.skip=true 命令，即可快速打包 Spring Boot 應用。下圖中的 jar 文件，即為打包后的 Spring Boot 應用。

打包后生成的文件內容

接下來我們將該應用拷貝至服務器，在同一目錄下新建 start.bat 文件，內容如下：

java -jar spring-boot-cors-0.0.1-SNAPSHOT.jar

雙擊 start.bat 文件即可啟動項目，效果如下，可以看出系統已經啟動成功（started）。

Spring Boot 打包項目已啟動

2.3 前端應用部署

前端應用的部署更加簡單，我們直接在云服務器上下載 nginx 然后解壓。

打開網址 http://nginx.org/en/download.html ，點擊下圖中的鏈接下載即可。

nginx 下載鏈接

下載解壓后，將前端頁面直接放到 nginx/html 目錄下即可。當然如果有很多網頁，可以先在該目錄下建立子目錄便于歸類網頁。

我們建立 shop-front 目錄（表示商城系統的前端項目），然后將網頁放入其中，效果如下：

商城系統前端項目目錄內容

注意還需要修改 goods.html 中訪問的后端 URL 地址，假設云服務器的公網 IP 為 x.x.x.x ，則修改為：

實例：

$.ajax({
      type: "GET",
      url: "http://x.x.x.x:8080/goods", //后端接口地址
      dataType: "json",
      contentType: "application/json; charset=utf-8",
      success: function (res) {
        $.each(res, function (i, v) {
          row = "<tr>";
          row += "<td>" + v.id + "</td>";
          row += "<td>" + v.name + "</td>";
          row += "<td>" + v.price + "</td>";
          row += "<td>" + v.pic + "</td>";
          row += "</tr>";
          $("#goodsTable").append(row);
        });
      },
      error: function (err) {
        console.log(err);
      }
    });

此處解釋下后端地址 http://x.x.x.x:8080/goods ， HTTP 代表協議， x.x.x.x 代表云服務器公網地址， 8080 是我們后端項目的啟動端口，由于我們沒有在配置文件中設置，所以默認就是 8080 ，最后 goods 是控制器中設定的后端接口路徑。

雙擊 nginx.exe 啟動 nginx ，由于 nginx 默認啟動端口是 80 ，所以此時訪問 http://x.x.x.x ，效果如下，說明 nginx 啟動成功！

nginx 已啟動成功

2.4 測試

現在我們的后端 Spring Boot 應用已啟動，前端項目也通過 nginx 啟動起來。

我們在瀏覽器地址欄打開 http://x.x.x.x/shop-front/goods.html ，效果如下，說明我們的項目全部部署成功。

項目部署成功后頁面顯示效果

3. 小結

前后端分離部署的方式，更能發揮服務器的性能，如果要進行版本升級，直接替換后端 jar 或者前端項目文件夾即可，輕松愉快。