nginx部署vue+drf 前后端分离项目

1.开发环境

• vue-cli 4.x
• Python 3.9.6
• Django 3.2.8

2.前端 vue
main.js 中

// axios baseUrL , 这个地址写后端部署 nginx 监听的ip:port
axios.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: '/',  
})

在 src/router/index.js 中

点击查看代码

import { createRouter,createWebHistory} from 'vue-router'
const router = createRouter({
  history: createWebHistory(),  // 使用HTML5模式
  routes
})

设置好后，用 npm run build 打包

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

}