使用寶塔面板部署商城項目到雲服務器的案例

項目案例介紹

該項目是使用node+vue+mysql前后端分離式開發的校園二手交易平台

此次演示涉及：使用的是CentOS7的雲服務器+域名+寶塔面板

部署前准備

安裝所需軟件/服務

• MySQL服務（ 5.7.34）
• phpMyAdmin（5.1）
• PM2管理器（5.2）
• Nginx（1.19.8）

創建數據庫

• 上傳數據庫腳本文件

• 在寶塔面板中創建相應的數據庫

• 將數據庫文件導入數據庫中

• 數據庫其余操作過程省略不講（不是此次案例的重點內容）

解析域名

• 在購買的域名DNS解析管理進行二級域名解析

• 如果沒有就不做這個步驟

開放端口

• 開放該案例所需要的端口：80（前端）、3002（后端）（我以前有開放過80端口了）

• 雲服務器控制台開放所需要的端口(懶得換截圖了)

• 寶塔面板放行端口(懶得換截圖了)

商城后端服務器項目部署

打開寶塔面板首頁

雙擊PM2管理器進入管理列表

點擊添加項目

配置啟動項目

• 啟動文件：選擇需要啟動的文件或者輸入腳本執行命令

• 運行目錄：找到需要部署項目的根目錄

• 項目名稱：自定義即可

部署成功

商城前端項目(dist)部署

• 將打包構建好的dist文件上傳到雲服務器/www/wwwroot/ 文件路徑下

• 將文件夾重命名為：trading-platform（根據個人自定義操作）

進入網站管理-添加站點

配置站點信息

創建站點成功

• 訪問映射的域名：shop.kim-shift.cn或者www.shop.kim-shift.cn

• 由於剛部署的前端是有vue構建打包的，而在開發環境配置的代理在生產環境（build構建的dist）是不生效的

• 開發環境代理的訪問地址均為404

Nginx反向代理配置

使用Nginx代理來解決前端無法有效訪問后端服務的問題，先部署好后端服務（不演示了），部署好后根據如下操作進行反向代理配置：

• 進入寶塔-網站-對應的網站點擊設置

• 修改代理配置：新增在開發環境中對應的三個代理

  • /api ==>請求服務前綴接口

  • /carousel ==>獲取輪播圖前綴接口

  • /uploads ==>獲取上傳文件前綴接口

• 創建反向代理

  • 開啟高級功能

  • 代理名稱（可自定義）

  • 代理目錄：對應需要代理的接口路徑

  • 目標URL：所要代理到的后端服務

  • 發送域名：前端請求服務（默認即可）

  • /carousel 、/uploads 的代理配置與/api的操作一致（已省略）

• 配置完成

解決訪問不到js/css等靜態文件問題

• 分別點擊這三個配置代理的配置文件進行修改（將這個部分刪除掉）

location  ~* \.(gif|png|jpg|css|js|woff|woff2)$
{
   proxy_pass http://127.0.0.1:3002;
   proxy_set_header Host $host;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_header REMOTE-HOST $remote_addr;
   expires 12h;
}

案例部署結束

• 訪問網站：www.shop.kim-shift.cn