Vue+Django前后端分离，在Linux下使用Nginx和uWSGI部署

前后端分离已成为互联网项目开发的业界标准使用方式，本文讲述Vue项目和Django项目的部署方法。

1、准备工作

• Django项目路径/home/project/IOT_SERVER
• Django项目启动文件路径/home/project/IOT_SERVER/iot_server_uwsgi.ini
• Vue项目项目路径/home/project/IOT_VUE/
• Vue项目启动文件路径/home/project/IOT_VUE/iot_vue_nginx.conf

2、Django后端项目部署

使用uWSGI部署Django项目，配置文件如下。

[uwsgi]
# 服务端口
http = :4055
# 项目目录
chdir = /home/project/IOT_SERVER
# 指定项目的application
module = IOT_SERVER.wsgi
# 指定sock的文件路径
socket = /home/project/IOT_SERVER/uwsgi.sock
# 启动uwsgi的用户名和用户组
uid = root
gid = root
# 进程数
workers = 4
# 接受的最大请求数
max-requests = 1000
pidfile = /home/project/IOT_SERVER/uwsgi.pid
# 启动主进程
master = true
# 自动移除 unix socket和pid 文件当服务停止的时候
vacuum = true
# 序列化接受的内容，如果可能的话
thunder-lock = true
# 启动线程
enable-threads = true
# 设置自中断时间
harakiri = 100
# 设置缓冲
post-buffering = 65535
# 不设置会导致上传大文件失败
buffer-size = 65535
# 设置日志目录
daemonize = /mnt/logs/iot_server/uwsgi.log

启动Django项目，命令如下。
uwsgi --ini /home/project/IOT_SERVER/iot_server_uwsgi.ini

3、Vue前端项目部署

先使用npm工具将项目打包，将打包后的dist文件夹放到/home/project/IOT_VUE/目录下。
然后使用Nginx部署Vue项目，配置文件如下。

user root;
worker_processes 1;

events {
    worker_connections 1024;
}
http {
    include mime.types;
    default_type application/octet-stream;

    sendfile on;
    keepalive_timeout 65;
    # 此处值代表nginx 设置 64 个 512k 的块进行缓存，总共大小为 64*512k
    proxy_buffers 64 512k;
    proxy_buffer_size 512k;
    
    server {
        listen 4056;
        server_name localhost;

        # dist目录指向你本地的工作目录，相当重要
        root /home/project/LOT_VUE/dist;
        # 打开默认文件为index
        index index.html index.htm;

        # 官网介绍设置这条可以解决history路由的问题
        location / {
            try_files $uri $uri/ /index.html;
        }
        # 下面这些地址为nginx代理后台服务器的地址，和Vue项目vue.config.js配置的proxy代理匹配
        location /api {
            add_header 'Access-Control-Allow-Origin' '*';
            proxy_pass http://127.0.0.1:4055/api;
        }
    }
}

启动Vue项目，命令如下。
nginx -c /home/project/IOT_VUE/iot_vue_nginx.conf