隨著企業上云與個人開發者對高效、穩定計算資源的需求日益增長,選擇合適的云服務與部署方案至關重要。本文將以華為云彈性云服務器(ECS)為平臺,結合寶塔面板與Nginx,詳細評測并演示如何同時部署Spring Boot后端與Vue.js前端項目,打造一站式全棧應用托管環境。
一、華為云彈性云服務器(ECS)評測
華為云ECS以其穩定可靠的性能、豐富的規格選擇和極具競爭力的價格,成為眾多開發者的優選。在本次部署實踐中,我們選擇一臺CentOS 7.x系統的ECS實例。其核心優勢在于:
- 高性能與穩定性:底層采用華為自研硬件與虛擬化技術,提供穩定的計算性能,網絡延遲低,尤其在國內訪問體驗優異。
- 靈活的配置與計費:支持按需、包年包月等多種計費模式,CPU、內存、帶寬、系統盤均可自由搭配,滿足從測試到生產的不同場景。
- 完善的安全與網絡:配備免費的基礎DDoS防護、安全組(防火墻)精細控制,VPC網絡隔離保障了應用的安全運行環境。
- 便捷的管理:通過華為云控制臺可以輕松進行開關機、重置密碼、備份鏡像等操作,并集成豐富的監控告警功能。
二、基礎軟件環境搭建:寶塔面板
為了簡化服務器運維管理,我們選擇安裝寶塔Linux面板(BT-Panel)。它是一款強大的服務器管理軟件,通過Web界面即可完成大部分運維操作。
- 安裝寶塔面板:通過SSH連接華為云ECS,執行官方的一鍵安裝腳本。安裝完成后,會提供面板地址、用戶名和密碼。
- 初始化環境:登錄寶塔面板后,通常會推薦安裝LNMP或LAMP套件。我們選擇安裝 Nginx 1.20+、 MySQL 5.7/8.0 和 Java項目管理器(用于管理Spring Boot)。同時安裝Node.js環境(用于Vue項目構建)。寶塔的軟件商店使得這些安裝過程變得極其簡單。
三、項目部署實戰:Spring Boot + Vue
后端部署(Spring Boot):
1. 項目準備:將Spring Boot項目打包成可執行的JAR文件(如 myapp.jar)。確保其配置文件(application.yml/properties)中的數據庫連接等指向華為云ECS上的MySQL服務。
2. 上傳與部署:通過寶塔面板的文件管理器或FTP功能,將JAR包上傳至服務器目錄,例如 /www/wwwroot/backend/。
3. 使用Java項目管理器:在寶塔的“軟件商店”中找到并打開“Java項目管理器”。添加項目,設置項目路徑、JAR包名、端口號(如8080)及啟動參數。管理器支持一鍵啟動、停止、重啟和查看實時日志,極大簡化了Spring Boot應用的運維。
前端部署(Vue.js):
1. 項目構建:在本地開發環境,運行 npm run build 生成靜態文件(位于 dist 目錄)。
2. 上傳文件:將 dist 文件夾內的全部內容,上傳至服務器目錄,例如 /www/wwwroot/frontend/。
3. 配置Nginx站點:在寶塔面板的“網站”菜單中,添加一個站點,域名填寫你的域名或服務器IP地址,根目錄設置為 /www/wwwroot/frontend。PHP版本選擇“純靜態”。
四、核心環節:Nginx配置實現前后端聯動
這是實現“同時部署”的關鍵。我們需要修改Nginx配置,將API請求代理到后端的Spring Boot應用,而其他請求則指向前端的靜態資源。
進入寶塔面板中對應站點的“設置”->“配置文件”,進行修改:
`nginx
server {
listen 80;
server_name your-domain.com; # 替換為你的域名或IP
前端靜態資源服務
location / {
root /www/wwwroot/frontend; # Vue項目構建文件目錄
index index.html index.htm;
try_files $uri $uri/ /index.html; # 支持Vue Router的history模式
}
后端API代理 - 將所有以 /api/ 開頭的請求轉發到Spring Boot應用
location /api/ {
proxypass http://127.0.0.1:8080; # 轉發到Spring Boot運行的端口
proxysetheader Host $host;
proxysetheader X-Real-IP $remoteaddr;
proxysetheader X-Forwarded-For $proxyaddxforwardedfor;
proxysetheader X-Forwarded-Proto $scheme;
}
可選:可能還需要代理WebSocket或其他特定路徑
location /ws/ {
proxy_pass http://127.0.0.1:8080;
proxyhttpversion 1.1;
proxysetheader Upgrade $http_upgrade;
proxysetheader Connection "upgrade";
}
}`
保存配置并重載Nginx。至此,訪問服務器IP或域名,將直接顯示Vue前端頁面;當前端發起 /api/xxx 的請求時,Nginx會將其無縫轉發到運行在8080端口的Spring Boot應用進行處理。
五、與優勢
通過“華為云ECS + 寶塔面板 + Nginx”的組合,我們成功構建了一個高效、易管理的全棧項目部署環境:
- 華為云ECS 提供了堅實、可靠的IaaS底層支撐。
- 寶塔面板 將復雜的命令行操作可視化,降低了服務器運維門檻,實現了環境搭建、軟件安裝、項目監控的一站式管理。
- Nginx 作為高性能的Web服務器和反向代理,完美解決了前后端分離項目的部署與路由問題,實現了單一端口(80/443)對外服務。
此方案特別適合中小型項目、個人開發者及運維入門者,能夠在保證性能與安全的前提下,顯著提升全棧應用的部署效率和運維體驗。