Windows伺服器,通過Nginx部署VUE+Django前後端分離項目

来源:https://www.cnblogs.com/kyguo1997/archive/2023/12/08/17884479.html
-Advertisement-
Play Games

目錄 基本說明 安裝 Nginx 部署 VUE 前端 部署 Django 後端 Django admin 靜態文件(CSS,JS等)丟失的問題 總結 1. 基本說明 本文介紹了在 windows 伺服器下,通過 Nginx 部署 VUE + Django 前後端分離項目。本項目前端運行在 80 埠 ...


目錄

  1. 基本說明
  2. 安裝 Nginx
  3. 部署 VUE 前端
  4. 部署 Django 後端
  5. Django admin 靜態文件(CSS,JS等)丟失的問題
  6. 總結

1. 基本說明

本文介紹了在 windows 伺服器下,通過 Nginx 部署 VUE + Django 前後端分離項目。本項目前端運行在 80 埠,伺服器端運行在 8000 埠。因此本項目使用 Django 的 runserver 命令進行部署,基本能滿足小型使用需求。
由於 Nginx 多在 Linux 伺服器下使用,少有博客介紹其 windows 下使用規則。此外,Django 部署多用 uWSGI,但經過實測 windows 下先無法正常使用。並且經過本人實測目前幾乎沒有可以滿足本人需求的博文。基於以上考慮,因此寫下此博客,方便大家進行基本部署。

2. 安裝 Nginx

2.1 下載

Nginx 是一個 Web 伺服器和方向代理伺服器,簡而言之,Nginx監聽請求,然後根據配置中的規則(2.2中講)執行不同的操作。

進入 Nginx 官網 https://nginx.org/en/index.html
點擊右側 download 鏈接
隨後選擇版本,我選擇了圖中紅框中版本
下載後將其放入伺服器中想要的文件夾並解壓即可,文件夾中內容如圖所示

點擊執行 Nginx.exe,隨後在瀏覽器中訪問 localhost,頁面展示如下則表示安裝成功。

下麵為 Nginx 操作命令,在 終端 中,進入 Nginx 文件夾路徑

  # 啟動 Nginx
  nginx
  start nginx
  # 結束 Nginx
  nginx -s stop
  # 或在任務管理器中結束 Nginx 任務

2.2 配置

當前,我的程式在本機運行時,訪問前端地址為 localhost:3000 , 後端地址為 localhost:8000。我想將前後端分別在伺服器中部署,前端運行在 80 埠,後端運行在 8000 埠。目前有了 Nginx 這個伺服器,因此我們在訪問網站時要通過Nginx監聽所有請求,然後根據規則分別進行轉發。因此,我通過 Nginx 監聽 80 埠,如果有人訪問伺服器的 80 埠,那麼 Nginx 將讓其訪問我的前端程式。
打開文件夾中 conf/nginx.conf 文件,通過記事本等工具打開,在 http 的 server 下進行如下配置。

http {
  ... # 這裡不進行修改
  server {
    listen 80; # 監聽 80 埠
    server_name 192.168.50.10; # 輸入伺服器 ip,我這裡為內網 ip
    
    location / {
      root html;
      index index.html index.htm; # 這裡預設為此配置,表示當有人訪問 伺服器 80 埠的 / 根目錄,那麼 Nginx 將在 html 文件夾中尋找 index.html, index.htm 文件進行展示,也可以根據自己實際情況進行修改
      # 如果 vue 的路由模式是 history,一定要加上下麵這句話
      try_files $uri $uri/ /index.html;
    }
  }
}

3. 配置 VUE 前端

我使用了 axios 發起請求,請求地址為 http://localhost:8000/api/,現在部署到伺服器後,所有請求通過 Nginx進行轉發,因此前端並不直接訪問 8000 埠,而是通過 Nginx 進行轉發,因此將 axios 請求地址改為 http://192.168.50.10/api/。這裡修改為你的伺服器地址,去掉埠號。
隨後在 終端 中執行一下命令打包前端文件

npm run build

執行結束後,在前端項目根目錄自動生成 dist 文件夾,將裡面內容全部複製到 伺服器 Nginx 文件夾的 html 文件夾中。確保 Nginx 處於啟動狀態,瀏覽器訪問 192.168.50.10 (這裡為你伺服器ip),如正確出現 前端項目 則表示 vue 前端配置成功。(但是目前還不能進行前後端通信,因為我們把前端的請求8000埠改成了80埠,但是目前我們還沒有配置,因此要進行如下配置才可以,在將Django後端配置結束以後,再進行如下配置也可以)
在 conf/nginx.conf 文件中進行如下配置。

  location / {
    ... # 上面配置的內容
  }
  
  location /api/ {
    add_header Access-Control-Allow-Origin *;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://localhost:8000;  # Nginx 監聽到請求 api後,將請求轉發給 localhost的8000埠,因為 Django後端也要部署到這台伺服器上,所以是 localhost,這樣可以減少用戶請求次數,加快網站訪問速度。(我實測速度是有一定提升)
  }

此外,如果前端程式中存在一些需要訪問的文件(我的程式為論文檢索系統,在前端保留了論文pdf文件,存儲在static文件夾中),那麼在 conf/nginx.conf 文件中進行如下配置。

  location / {
    ... #上面配置內容
  }

  location /static/ {  # 這裡為你的需要訪問文件的訪問路徑,我的文件訪問路徑是 http://192.168.50.10/static/papers/XXX.pdf,我的文件存儲在了 static/papers/XXX.pdf,並且一同複製到了 html 文件夾中。
    alias D:/Web/nginx-1.24.0/html/static/;  # 這裡為伺服器中 html 內,你的文件的存儲路徑。
    try_files $uri $uri/;
  }

4. 配置 Django 後端

4.1 安裝依賴

在開發電腦上,終端 進入 Django 後端程式路徑,執行pip freeze > requirements.txt,生成所需的依賴文件。
隨後將 Django 後端程式複製到伺服器中合適路徑,在終端中執行 pip3 install -r requirements.txt,在伺服器中安裝依賴。

4.2 部署

進入 Django 後臺程式中的 settings.py
進行如下修改

DEBUG = False

ALLOWEDD_HOST = ['*']

DATABASES = {
    "default": {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'paper_web', # 伺服器資料庫名
        'USER': 'root', # 伺服器資料庫用戶名
        'PASSWORD': 'root', # 伺服器資料庫密碼
        'HOST': '127.0.0.1',
        'PORT': '3306'
    }
}

隨後在 終端 中執行(進入Django 後臺程式目錄)

python manage.py runserver 0.0.0.0:8000

至此,配置基本結束,通過瀏覽器訪問 伺服器ip,即可進行正常操作。

5. Django admin 靜態文件(CSS,JS等)丟失的問題

Django 自帶一個 admin 管理後臺,直接通過瀏覽器訪問 192.168.50.10:8000/admin/: 時,會出現樣式丟失的問題,如圖所示

因此要執行以下配置。
在 伺服器的 Django 的 settings.py 中,新增以下配置

STATIC_ROOT = "D:/Web/nginx-1.24.0/html/static/static/" # 這裡為你的伺服器中 Nginx 的路徑,應在 html 文件夾下的 static 文件夾,但是我的static 文件夾存了論文不為空,因此我在 static 文件夾中新建了文件夾 static

隨後在終端中執行

python manage.py collectstatic  # 將 admin 樣式複製到指定目錄

將 html/static/static 文件夾的 admin 文件夾複製到 html/static 文件夾中。

隨後在 Nginx 的 conf/nginx.conf 文件中進行如下配置。

location /api/ {
  ... # 以上配置內容
}
location /admin/ {
  add_header Access-Control-Allow-Origin *;
  proxy_set_header Host $http_host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header REMOTE-HOST $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_pass http://localhost:8000;
}
location /static/admin/ {
  alias D:/Web/nginx-1.24.0/html/static/admin/;  # 這裡為 admin文件夾所在位置
  try_files $uri $uri/;
}
location /static/ {
  ... # 以上配置內容
}

配置結束後,重啟 Nginx 服務,在瀏覽器中訪問 192.168.50.10/admin/,可以發現 Django admin 樣式又回來了。

6. 總結

因為 網上幾乎沒有這種部署情況,而且對於Django admin 樣式丟失的方法,我嘗試過均沒有什麼效果,因此我寫下這篇文章,希望對有相似情況的朋友有一定幫助。
以上就為我的簡單部署情況,因為是單位內部使用,並且僅有 windows 伺服器,所以只能進行以上操作。
如果大家遇到什麼我未提到的問題,可以與我聯繫,我們共同解決。
如有未盡之處,還請見諒。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Python打包為程式 今天用python的時候,寫了一個腳本來進行篩選內容,但是一次一次的進行打開和啟動python,一點麻煩,所以今天就準備將腳本來進行包裝成應用程式來進行運行。 目前常見的打包應用程式都是通過 Pyinstaller 這個腳本實現的,我們現在開始使用。 首先先安裝Pyinsta ...
  • JDBC連接資料庫六步: 1.Class.forName()載入資料庫連接驅動 2.DriverManager.getConnection()獲取數據連接對象 3.根據SQL獲取sq|會話對象 4.執行SQL,執行SQL前如果有參數值就設置參數值setXXX() 5.處理結果集 6.釋放資源 ...
  • 當我們開發Windows應用程式時,通常會涉及到使用資源(Resource)的情況。資源可以包括圖標、點陣圖、字元串等,它們以二進位形式嵌入到可執行文件中。在某些情況下,我們可能需要從可執行文件中提取自定義資源並保存為獨立的文件。在這篇博客文章中,我們將討論如何使用C++和WinAPI實現這個目標。首... ...
  • 1.傳值和傳址的區別 傳值就是傳入一個參數的值,傳址就是傳入一個參數的地址,也就是記憶體的地址(相當於指針)。他們的區別是如果函數裡面對傳入的參數重新賦值,函數外的全局變數是否相應改變,用傳值傳入的參數是不會改變的,用傳址傳入就會改變。 a=1 def f(b): b=2 f(a) print (a) ...
  • 重覆的操作令手工測試苦不堪言,於是自動化測試出現了!作為web應用里最出名的自動化測試工具,selenium讓web應用的測試輕鬆了很多。今天我們就來簡單的介紹一下一些簡單的selenium瀏覽器操作。接下來我們就來看看python怎麼操作瀏覽器的吧! 1、打開指定的網頁地址 我們使用seleniu ...
  • 使用freemarker,導出製作好的ftl模板,並寫入數據 一、背景 1.1 項目背景 最近在開發一個項目,需要導出一些數據,然後寫入到word文檔中,然後再導出到本地,這個需求是比較常見的,但是我在網上找了很多資料,都沒有找到一個比較好的解決方案,所以就自己寫了一個,這裡分享給大家,希望能幫助到 ...
  • 目標現狀及問題 目標: 已有的國內項目,需要部署國際化。需要考慮幣種、金額貨幣精度、多語言、匯率、稅等一系列問題。這裡主要說的就是其中金額精度的處理。 現狀: 日常國內項目里,界面輸入的金額是元,然後資料庫存儲以及與其他系統交互都是用的分,也是就固定的貨幣精度繫數100。 問題: 那麼國際化項目後, ...
  • 從0到1,手把手帶你開發截圖工具ScreenCap------003實現最小化程式到托盤運行,- 為了方便截圖乾凈,實現最小化程式到托盤運行,簡潔,勿擾,實現最小化程式到托盤運行, 實現托盤菜單功能,實現回顯主窗體, 實現托盤開始截屏, 實現氣泡信息提示,實現托盤程式提示,實現托盤退出程式, 封裝完... ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...