Django + Vue前后端分离项目部署

后端用的Django REST Framework，使用的是uwsgi+nginx，前端使用的Vue。

一、配置uwsgi.ini

进入服务器项目文件目录下，我的django项目放在了“/usr/myProjects/”目录下了。在manage.py同级目录下创建uwsgi.ini文件，配置如下：

#添加配置选择
[uwsgi]
#配置和nginx连接的socket连接


socket= :8888
#配置项目路径，项目的所在目录
chdir=/usr/myProject/dacts
#配置wsgi接口模块文件路径,也就是wsgi.py这个文件所在的目录名（dacts/wsgi.py）
module=dacts.wsgi
#配置启动的进程数
processes=4
#配置每个进程的线程数
threads=2
#配置启动管理主进程
master=True
#配置存放主进程的进程号文件
pidfile=uwsgi.pid
#配置dump日志记录
daemonize=uwsgi.log

测试效果命令：

uwsgi --http :8000 --module dacts.wsgi

如果访问：xxx.xxx.xxx.xx:8000 成功，  则uwsgi.ini配置成功。

二、配置nginx

我的nginx.conf所在位置是“/etc/nginx/nginx.conf”

配置文件如下：

user root nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;


events {
    worker_connections 1024;
}


http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';


    access_log  /var/log/nginx/access.log  main;


    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;


    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;


    # 前端vue服务器
    server {
        listen       8008;
        server_name  xxxx.com 47.xx.xxx.xx; # 此处填写服务器域名+ 空格+ ip




        location / {
        root  /root/dist;   #打包后的vue项目地址，我直接丢root目录下了
        index  index.html index.html;
        try_files $uri $uri/ /index.html;


        }


        location /api/  {
            proxy_pass http://xxxxx.com;   # 反向代理地址
            proxy_read_timeout 600s;
            client_max_body_size 100M;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }




        error_page 404 /404.html;
            location = /40x.html {
        }


        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }


    }
     # 后端drf服务器
     server {
        listen 80;
        server_name  xxxxxx.com; #改为自己的域名
        charset utf-8;
        location / {
           include uwsgi_params;
           uwsgi_pass 127.0.0.1:8888;  #端口要和uwsgi里配置的一样
           uwsgi_read_timeout 2;
        }
        location /static {
           alias /usr/myProject/dacts/static/; 
        }


        location /media {
           alias /usr/myProject/dacts/media/; 
        }
    }
 }

三、部分配置解析：

1、第一行

user root nginx;

主要就是给nginx加权限，vue部署后使用history路由时会去掉地址后面的‘#’号，打包部署后不加权限会有bug。

2、如配置所示，有两个Server，分别部署了前端服务，和后端服务，值得注意的是两个Server用的是同一个服务器，监听的端口不同。

3、vue部署需要注意的是反向代理地址：

proxy_pass http://xxxxx.com;   # 反向代理地址

以及后面的端口问题：

proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

4、后端的Server需要注意location中的uwsgi_pass 后面的端口号要和uwsgi.ini中配的相同，否则监听不到

location / {
           include uwsgi_params;
           uwsgi_pass 127.0.0.1:8888;  #端口要和uwsgi里配置的一样
        }

5、后端跨域问题。如果遇到跨域需要自己网上找配置，我的没遇到，可能是因为我在django的settings中配置了跨域。

6、我开始后台监听的是8008端口，vue前端监听的是80端口，这样前端显示好看。然而问题出现了，虽然后台api可以正常访问，vue的本地开发环境也能正常运行且文字、图片资源均显示正常，但是前端vue打包线上部署后，文字信息显示正常，图片信息缺失8008端口，导致显示不出来。为图方便我选择了前端监听8008端口，后端监听80，部署后显示正常。原因不太清楚。

7、不要问我为啥都前后端分离了还部署到一个服务器上？穷，而且只是测试，没必要.

8、此文仅适合入门。如果样式缺失，输入如下命令：

python manage.py collectstatic

接下来你就回发现static文件中包含了css文件，此时再打开网站，样式显示正常。uWSGI 通过 xxx.ini 启动后会在相同目录下生成一个 xxx.pid 的文件，里面只有一行内容是 uWSGI 的主进程的进程号。

关于uwsgi,进入同届目录下启动：

uwsgi --ini uwsgi.ini

重启：

uwsgi --reload uwsgi.pid

停止：

uwsgi --stop uwsgi.pid

教训：

获取不到环境，那就指定环境。

另外：记得重启uwsgi，重启Nginx，实在不行就先把监听的端口kill掉再重启。

暴力删端口：fuser -k 80/tcp

netstat -aptn命令行，查看所有开启的端口号

netstat -ntlp | grep 80  查看具体的端口是否使用
ps -ef | grep uwsgi   查看是否有uwsgi端口存在

作者：蜗牛LR
链接：https://www.jianshu.com/p/376b5554c457
来源：简书

推荐阅读

Docker-compose 八步部署Django + Uwsgi + Nginx + MySQL + Redis升级篇

生产环境使用Uvicorn和Nginx部署Django

如何在阿里云Ubuntu服务器通过uWSGI和Nginx部署Django项目教程-大江狗原创出品