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
...