部署前后端分离项目

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

准备项目

1.将前端vue项目包和后端django项目包上传服务器,通过lrzsz,直接从windows拖进linux中

2.解压缩操作

前端vue部署

node环境准备

1.下载node二进制包,该包已经包含node,不需要再编译

#  wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
2.解压缩 #   tar -zxvf node-v8.6.0-linux-x64.tar.gz

3.进入压缩后的node文件找到bin目录执行 pwd   获取到node的路径

4.将node命令添加到环境变量  --- vim /etc/profile
    
   #     PATH = $PATH:/opt/node-v8.6.0-linux-x64/bin
  再读取文件生效PATH ---  source  /etc/profile

5.测试环境  node -v  查看版本,    v8.6.0

编译打包前端vue文件

1.进入vue源码目录 cd    /opt / vue_project/
   #安装vue模块,默认去装package.json的模块内容,如果出现模块安装失败,手动再装 
   #npm  install
2.根据本地写的vue代码,处理接口连接的服务器地址,注意Axios.POST提交的地址,一定发送给django应用,(如果用了nginx,就发送给nginx的入口端口)

    #找到  /opt/vue_project/src/restful/api.js
    #更改接口内地址原本可能是127.0.0.0.1:8000/,改成现在的服务器ip地址+端口   sed -i "s/127.0.0.1/192.168.220.128/g" /opt/vue_project/src/restful/api.js

3.编译打包vue源码 ,生成一个dist静态文件夹  
    #npm run build

4.查看dist里面有  index.html static   即正常

配置nginx

配置nginx.conf

        #虚拟主机1，用于找到vue页面
            server {
                listen       80;
                server_name loaclhost;
                location / {
                    root  /opt/vue_project/dist;
                    index index.html;
                }
         }
        #虚拟主机2，用于反向代理，找到django
                server{
                    listen 8000;
                    server_name  192.168.220.128;

                    location / {
                        include uwsgi_params;
                        uwsgi_pass 0.0.0.0:9999;
                       }
                }   
        
配置完毕后重启  nginx -s nginx.conf

配置后端代码(创建配置虚拟环境,保证项目干净隔离)

1.创建虚拟环境  mkvirtualenv   vue_django
2.安装项目所需的依赖模块.
    #windows下  执行pip3 freeze >  requirements.txt 
3.在linux下通过命令安装 
# pip3 install -i https://pypi.douban.com/simple -r requirements.txt 

4. 安装uwsgi 启动后端
 #pip3 install uwsgi
  
  启动方式1:uwsgi --socket  :8000  --module  django_project.wsgi
  启动方式2:在项目第一层文件 touch  uwsgi.ini
  #配置uwsgi.ini文件

[uwsgi]
# Django-related settings
# the base directory (full path)
chdir           = /opt/django_project
# Django's wsgi file
module          = django_project.wsgi
# the virtualenv (full path)
home            = /root/Envs/vue_django
# process-related settings
# master
master          = true
# maximum number of worker processes
processes       = 1
# the socket (use the full path to be safe
socket          = 0.0.0.0:9999
# ... with appropriate permissions - may be needed
# chmod-socket    = 664
# clear environment on exit
vacuum          = true

启动redis数据库,支撑需要的业务数据

#进入redis目录
redis-server redis.conf

全部部署完毕后,最后再次确认前端vue,后端django,nginx,redis正常后,通过windows中访问浏览器

#查看端口以及pid
 netstat -tunlp

...