nginx部署vue+drf 前後端分離專案
阿新 • • 發佈：2022-04-08
1.開發環境
- vue-cli 4.x
- Python 3.9.6
- Django 3.2.8
2.前端 vue
main.js 中
// axios baseUrL , 這個地址寫後端部署 nginx 監聽的ip:portaxios.defaults.baseURL = 'http://x.xxx.xxx.xxx:81/
vue.config.js 中(沒有就在package.json同目錄下建立一個)
點選檢視程式碼
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, publicPath: '/', })
點選檢視程式碼
import { createRouter,createWebHistory} from 'vue-router'
const router = createRouter({
history: createWebHistory(), // 使用HTML5模式
routes
})
3.後端
後端採用drf框架，伺服器部署時用 uwsgi 提高併發量
利用虛擬機器環境部署DRF解決其以來問題......等等，使drf能在伺服器跑起來。
測試沒問題後，用uwsgi 替換 django的 wsgiref
uwsgi.ini 配置檔案
點選檢視程式碼
[uwsgi] # 專案第一層的絕對路徑 chdir=/opt/ModelNine/RearEnd # 專案第二層相對路徑，找到 wsgi.py 這個檔案的路徑 # 是相對與第一層絕對路徑，找到到第二層目錄下的 wsgi.py # 每個django專案建立時候，其專案內部都有一個和專案同名的資料夾，該資料夾下有一個 wsgi.py 的檔案 module=LuffyCity.wsgi # 虛擬環境第一層目錄的絕對路徑（告訴uwsgi 你虛擬環境在哪裡） home=/opt/ModelNine/modlenine # master 啟用主程序 master=true # uwsgi的程序數量，官網給出的優化建議是 2*核心數+1 如，單核的話建議值是3 processes=5 # 是這個socket是用於 nginx+uwsgi 聯合部署 unix-socket引數的設定 socket=0.0.0.0:6789 vacuum=true # 日誌檔案，django控制檯的輸出都會儲存在此檔案下 daemonize=/var/log/luffycity.log
啟動 uwsgi
uwsgi --ini uwsgi.ini
nginx 配置
點選檢視程式碼
# 前端vue部署 server
server {
listen 80;
server_name _;
charset utf-8;
# 允許跨域
add_header 'Access-Control-Allow-Origin' '*';
location /{
root /opt/ModelNine/FrontEnd/dist; # vue 打包專案全路徑
index index.html; # 指定首頁
error_page 405 =200 $request_uri; # 防止405 報錯
try_files $uri $uri/ /index.html; # vue-router 採用 HTML5模式下官方指定引數
}
error_page 404 /404.html;
}
# 後端server
server {
listen 81; # 這個埠就是vue專案中 main.js 內所有axios請求baseURL 路徑
server_name _;
charset utf-8;
location / {
uwsgi_pass 0.0.0.0:6789; # uwsgi 的 ip：port
include uwsgi_params;
}
}