django+nginx+uwsgi部署vue项目

一、需求分析

前端：vue.js，

后端：python+django

服务器：腾讯云( ubuntu18.04.1 LTS )

使用 nginx + uwsgi 将该项目部署到服务器上

二、准备

将vue项目打包到 dist 目录，能在开发环境正常运行的
准备好django项目，能在开发环境正常运行的

三、将vue项目的dist目录放到django中

将vue项目打包后的dist目录放到django的根目录

改写django的setting文件

DEBUG = False
ALLOWED_HOSTS = ['*']

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, "dist/static"), )   # 添加这一行

使用xshell 连接服务器，然后使用xftp将整个django项目移至服务器（也可以使用github或者sz和rz命令）
然后安装虚拟环境
```
 pip3 install virtualenv
```

创建虚拟环境

virtualenv -p python3 ENV

虚拟环境命令：进入成功会在最前面显示红色部分（ENV）ubuntu@VM-0-16-ubuntu:~$

source 虚拟环境目录/bin/activate   // 激活虚拟环境
deactivate   //退出虚拟环境

安装nginx

apt-get install nginx

cd /etc/nginx/sites-available  # 移到/etc/nginx/sites-available/目录

创建一个 mysite_nginx.conf 文件，名字随便起，写入如下内容，修改其中的中文换成你实际情况的配置

# mysite_nginx.conf

# the upstream component nginx needs to connect to
upstream django {
    # unix:///home/breavo/PyWorkSpace/mysite_code_shuffle/config/eshop.sock
    # server unix:///path/to/your/mysite/mysite.sock; # for a file socket
    server 127.0.0.1:8000; # for a web port socket (we'll use this first)
}

# configuration of the server
server {
    # the port your site will be served on
    listen      80;
    # the domain name it will serve for
    server_name www.xmzd.wang; # 你的ip或者域名
    charset     utf-8;

    # max upload size
    client_max_body_size 75M;   # adjust to taste

    # Django media
    location /media/  {
        # /home/breavo/PyWorkSpace/mysite_code_shuffle/meida;
        alias /home/ubuntu/musicApp/media/; # 你的django media文件目录，没有可不写
    }

    location /static/ {
        # /home/breavo/PyWorkSpace/mysite_code_shuffle/static
        alias /home/ubuntu/musicApp/dist/static/; # # 你的django static文件目录
    }

    # Finally, send all non-media requests to the Django server.
    location / {
        uwsgi_pass  django;  #对应上面的upstream django{...}
        include     /etc/nginx/uwsgi_params; # the uwsgi_params file you installed
    }
}
# 这个用于请求重定向，将xmzd.wang定向到www.xmzd.wang
server{
    listen 80;
    server_name xmzd.wang;
    rewrite ^/(.*) http://www.xmzd.wang/$1 permanent;
}

uwsgi_params文件及内容：

uwsgi_param  QUERY_STRING       $query_string;
uwsgi_param  REQUEST_METHOD     $request_method;
uwsgi_param  CONTENT_TYPE       $content_type;
uwsgi_param  CONTENT_LENGTH     $content_length;

uwsgi_param  REQUEST_URI        $request_uri;
uwsgi_param  PATH_INFO          $document_uri;
uwsgi_param  DOCUMENT_ROOT      $document_root;
uwsgi_param  SERVER_PROTOCOL    $server_protocol;
uwsgi_param  REQUEST_SCHEME     $scheme;
uwsgi_param  HTTPS              $https if_not_empty;

uwsgi_param  REMOTE_ADDR        $remote_addr;
uwsgi_param  REMOTE_PORT        $remote_port;
uwsgi_param  SERVER_PORT        $server_port;
uwsgi_param  SERVER_NAME        $server_name;

执行如下命令：建立软连接

ln -s /etc/nginx/sites-available/mysite_nginx.conf  /etc/nginx/sites-enabled/

nginx命令：

service nginx restart    #重启
service nginx stop       #关闭

安装并配置uwsgi （注意：整个操作过程使用的都是python3和pip3，如有错误的地方，请自行改成python3和pip3命令）

pip3 install uwsgi

在项目根目录创建cinfig目录，进去并创建 my_uwsgi.ini文件，内容如下：

# mysite_uwsgi.ini file
[uwsgi]

# Django-related settings
# 项目目录（绝对路径）
chdir           = /home/ubuntu/musicApp
# Django's wsgi file
module          = musicApp.wsgi
# 虚拟环境路径
home            = /home/ubuntu/ENV

# process-related settings
# master
master          = true
# maximum number of worker processes
processes       = 10
# 和nginx通信的地址，端口号要一致，如果uwsgi和nginx服务开在一个机器，则都使用127.0.0.1就行
socket          = 127.0.0.1:8000
# ... with appropriate permissions - may be needed
chmod-socket    = 666
# clear environment on exit
vacuum          = true

stats           = %(chdir)/config/uwsgi.status           

pidfile         = %(chdir)/config/uwsgi.pid

启动uwsgi：

uwsgi --ini my_uwsgi.ini   //启动uwsgi
uwsgi --stop my_uwsgi.ini   //关闭uwsgi

然后在浏览器中访问，看是否能够成功显示。（如有遗漏或者不解的地方，欢迎私信我）
项目github地址：https://github.com/1061750360/MusicApp
修改项目中的 dev.env.js 中的BASE_URL改为这个 BASE_URL: '"http://www.xmzd.wang:80/"'，即可请求我的线上接口。