使用寶塔皮膚部署商城專案到雲伺服器的案例

琴時發表於2022-02-25
伺服器

專案案例介紹

該專案是使用node+vue+mysql前後端分離式開發的校園二手交易平臺

此次演示涉及：使用的是CentOS7的雲伺服器+域名+寶塔皮膚

部署前準備

安裝所需軟體/服務

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

建立資料庫

  • 上傳資料庫指令碼檔案

  • 在寶塔皮膚中建立相應的資料庫

  • 將資料庫檔案匯入資料庫中

  • 資料庫其餘操作過程省略不講（不是此次案例的重點內容）

解析域名

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

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

域名解析

開放埠

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

  • 雲伺服器控制檯開放所需要的埠(懶得換截圖了)

新增開發規則

  • 寶塔皮膚放行埠(懶得換截圖了)

開發埠

商城後端伺服器專案部署

開啟寶塔皮膚首頁

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

進入PM2

點選新增專案

新增專案

配置啟動專案

  • 啟動檔案：選擇需要啟動的檔案或者輸入指令碼執行命令

  • 執行目錄：找到需要部署專案的根目錄

  • 專案名稱：自定義即可

配置部署專案

部署成功

pm2管理列表

商城前端專案(dist)部署

  • 將打包構建好的dist檔案上傳到雲伺服器/www/wwwroot/ 檔案路徑下

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

進入網站管理-新增站點

新增站點

配置站點資訊

配置站點

建立站點成功

建立成功

網站首頁

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

vue開發環境代理

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

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;
}

案例部署結束

網站訪問成功

 

 

 

相關文章