django+vue前后端分离项目部署

Posted 2023-03-27

参考技术A 后端用的drf，使用的是uwsgi+nginx

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

测试效果命令：

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

我的nginx.conf所在位置是“/etc/nginx/nginx.conf”
配置文件如下：

1、第一行

主要就是给nginx加权限，vue部署后使用history路由时会去掉地址后面的‘#’号，打包部署后不加权限会有bug。
2、如配置所示，有两个Server，分别部署了前端服务，和后端服务，值得注意的是两个Server用的是同一个服务器，监听的端口不同。
3、vue部署需要注意的是反向代理地址：

以及后面的端口问题

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

5、后端跨域问题。如果遇到跨域需要自己网上找配置，我的没遇到，可能是因为我在django的settings中配置了跨域。
6、django-suit后台管理样式崩了，需要改，但是api可以正常访问，这个有空再说
7、我开始后台监听的是8008端口，vue前端监听的是80端口，这样前端显示好看。然而问题出现了，虽然后台api可以正常访问，vue的本地开发环境也能正常运行且文字、图片资源均显示正常，但是前端vue打包线上部署后，文字信息显示正常，图片信息缺失8008端口，导致显示不出来。为图方便我选择了前端监听8008端口，后端监听80，部署后显示正常。原因不太清楚///////有空再说吧。
8、不要问我为啥都前后端分离了还部署到一个服务器上？穷，而且只是测试，没必要
9、此文仅适合入门

关于django后台admin（suit）缺失的修改（参考：django中文网： https://www.django.cn/article/show-4.html ）

在环境中进入项目目录，需要收集css样式，在终端输入命令：

接下来你就回发现static文件中包含了css文件，此时再打开网站，样式显示正常

uWSGI 通过 xxx.ini 启动后会在相同目录下生成一个 xxx.pid 的文件，里面只有一行内容是 uWSGI 的主进程的进程号。

关于uwsgi,进入同届目录下

教训

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

另外：记得重启uwsgi，重启Nginx，实在不行就先把监听的端口kill掉再重启
暴力删端口：fuser -k 80/tcp

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

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

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

vue部署

把打包好的vue项目 dist上传至服务器/opt文件夹中

nginx配置vue项目

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /opt/dist;
            index  index.html;
        }

    }

如需安装nginx 请移步至 Nginx安装

django部署

上传django包至 /opt目录为例

1.通过命令保证环境的一致性，导出python开发环境的包

pip3 freeze > requirements.txt

激活虚拟环境ipm，在虚拟环境下，安装项目所需的依赖模块（requirements.txt文件上传到与虚拟环境同级的目录）

pip3 install -r requirements.txt

如何使用虚拟环境请移步 虚拟环境配置

uwsgi （Django框架运行依赖wsgi，众多模块实现了wsgi规范，而django框架中默认使用wsigiref模块来实现，他由于性能比较低，所以用于本地开发和测试，而线上部署时需要使用uwsgi来代替）

退出虚拟环境，安装uwsgi

pip3 install uwsgi

在/opt目录下建立文件

vi /opt/uwsgi.ini

配置如下

[uwsgi]
# 项目目录

chdir=/opt/ipm2020
module=ipm2020.wsgi:application
# the virtualenv (虚拟环境的绝对路径)
home = /root/Envs/ipm
#热重载
#touch-reload = /opt/ipm2020
#py-auto-reload = 1
# 指定sock的文件路径
#socket=/root/proj/script/uwsgi.sock
#或者指定地址直接(指定文件路径就是相当于单独写了个配置导入,相当于import导入,可以修改和删除,可维护性高点)
#socket=127.0.0.1:9090
socket=0.0.0.0:9090
#直接做服务器用http模式
; http=0.0.0.0:9500
# 进程个数
workers=1
pidfile=/opt/uwsgi/uwsgi.pid
# 指定静态文件，这个项目中没有，如果你的项目中有静态文件的话按这个目录结构配置
#static-map=/static=/root/proj/
# 启动uwsgi的用户名和用户组
uid=root
gid=root
# 启用主进程
master=true
# 自动移除unix Socket和pid文件当服务停止的时候
vacuum=true
# 序列化接受的内容，如果可能的话
#thunder-lock=true
# 启用线程
enable-threads=true
# 设置自中断时间
#harakiri=30
# 设置缓冲
post-buffering=4096
# 设置日志目录
#daemonize=/opt/uwsgi/uwsgi.log

测试启动uwsgi

/usr/local/python3/bin/uwsgi --ini /opt/uwsgi.ini

 nginx配置

#user  nginx;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    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;

    keepalive_timeout  65;

    #gzip  on;
    gzip on; # 开启Gzip
    


    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /opt/dist;
            index  index.html;
        }

    }
    server {
        listen       8000;
        server_name  localhost;

        location / {
            uwsgi_pass localhost:9090;
            include /usr/local/nginx/conf/uwsgi_params;
        }
        

    }

}

使用Supervisor管理 uwsgi  Supervisor安装

一切配置无误 项目就可以正常运行起来了