django+nginx+uwsgi部署vue项目

一、需求分析

前端：vue.js，

后端：python+django

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

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

二、准备

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

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

1. 将vue项目打包后的dist目录放到django的根目录
   
2. 改写django的setting文件

   DEBUG = False
   ALLOWED_HOSTS = ['*']

    

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

    

3. 使用xshell 连接服务器，然后使用xftp将整个django项目移至服务器（也可以使用github或者sz和rz命令）
   

4. 然后安装虚拟环境

    pip3 install virtualenv

    

5. 创建虚拟环境

   virtualenv -p python3 ENV

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

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

    

6. 安装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       #关闭

    

7. 安装并配置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/"'，即可请求我的线上接口。