隨著企業(yè)上云與個人開發(fā)者對高效、穩(wěn)定計算資源的需求日益增長，選擇合適的云服務與部署方案至關重要。本文將以華為云彈性云服務器（ECS）為平臺，結合寶塔面板與Nginx，詳細評測并演示如何同時部署Spring Boot后端與Vue.js前端項目，打造一站式全棧應用托管環(huán)境。

一、華為云彈性云服務器（ECS）評測

華為云ECS以其穩(wěn)定可靠的性能、豐富的規(guī)格選擇和極具競爭力的價格，成為眾多開發(fā)者的優(yōu)選。在本次部署實踐中，我們選擇一臺CentOS 7.x系統(tǒng)的ECS實例。其核心優(yōu)勢在于：

高性能與穩(wěn)定性：底層采用華為自研硬件與虛擬化技術，提供穩(wěn)定的計算性能，網絡延遲低，尤其在國內訪問體驗優(yōu)異。
靈活的配置與計費：支持按需、包年包月等多種計費模式，CPU、內存、帶寬、系統(tǒng)盤均可自由搭配，滿足從測試到生產的不同場景。
完善的安全與網絡：配備免費的基礎DDoS防護、安全組（防火墻）精細控制，VPC網絡隔離保障了應用的安全運行環(huán)境。
便捷的管理：通過華為云控制臺可以輕松進行開關機、重置密碼、備份鏡像等操作，并集成豐富的監(jiān)控告警功能。

二、基礎軟件環(huán)境搭建：寶塔面板

為了簡化服務器運維管理，我們選擇安裝寶塔Linux面板（BT-Panel）。它是一款強大的服務器管理軟件，通過Web界面即可完成大部分運維操作。

安裝寶塔面板：通過SSH連接華為云ECS，執(zhí)行官方的一鍵安裝腳本。安裝完成后，會提供面板地址、用戶名和密碼。
初始化環(huán)境：登錄寶塔面板后，通常會推薦安裝LNMP或LAMP套件。我們選擇安裝 Nginx 1.20+、 MySQL 5.7/8.0 和 Java項目管理器（用于管理Spring Boot）。同時安裝Node.js環(huán)境（用于Vue項目構建）。寶塔的軟件商店使得這些安裝過程變得極其簡單。

三、項目部署實戰(zhàn)：Spring Boot + Vue

后端部署（Spring Boot）：
1. 項目準備：將Spring Boot項目打包成可執(zhí)行的JAR文件（如 myapp.jar）。確保其配置文件（application.yml/properties）中的數據庫連接等指向華為云ECS上的MySQL服務。
2. 上傳與部署：通過寶塔面板的文件管理器或FTP功能，將JAR包上傳至服務器目錄，例如 /www/wwwroot/backend/。
3. 使用Java項目管理器：在寶塔的“軟件商店”中找到并打開“Java項目管理器”。添加項目，設置項目路徑、JAR包名、端口號（如8080）及啟動參數。管理器支持一鍵啟動、停止、重啟和查看實時日志，極大簡化了Spring Boot應用的運維。

前端部署（Vue.js）：
1. 項目構建：在本地開發(fā)環(huán)境，運行 npm run build 生成靜態(tài)文件（位于 dist 目錄）。
2. 上傳文件：將 dist 文件夾內的全部內容，上傳至服務器目錄，例如 /www/wwwroot/frontend/。
3. 配置Nginx站點：在寶塔面板的“網站”菜單中，添加一個站點，域名填寫你的域名或服務器IP地址，根目錄設置為 /www/wwwroot/frontend。PHP版本選擇“純靜態(tài)”。

四、核心環(huán)節(jié)：Nginx配置實現(xiàn)前后端聯(lián)動

這是實現(xiàn)“同時部署”的關鍵。我們需要修改Nginx配置，將API請求代理到后端的Spring Boot應用，而其他請求則指向前端的靜態(tài)資源。

進入寶塔面板中對應站點的“設置”->“配置文件”，進行修改：

`nginx server { listen 80; server_name your-domain.com; # 替換為你的域名或IP

前端靜態(tài)資源服務

location / {
root /www/wwwroot/frontend; # Vue項目構建文件目錄
index index.html index.htm;
try_files $uri $uri/ /index.html; # 支持Vue Router的history模式
}

后端API代理 - 將所有以 /api/ 開頭的請求轉發(fā)到Spring Boot應用

location /api/ {
proxypass http://127.0.0.1:8080; # 轉發(fā)到Spring Boot運行的端口
proxysetheader Host $host;
proxysetheader X-Real-IP $remoteaddr;
proxysetheader X-Forwarded-For $proxyaddxforwardedfor;
proxysetheader X-Forwarded-Proto $scheme;
}