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.gz2.解压缩 # tar -zxvf node-v8.6.0-linux-x64.tar.gz3.进入压缩后的node文件找到bin目录执行 pwd 获取到node的路径4.将node命令添加到环境变量 --- vim /etc/profile # PATH = $PATH:/opt/node-v8.6.0-linux-x64/bin 再读取文件生效PATH --- source /etc/profile5.测试环境 node -v 查看版本, v8.6.0
编译打包前端vue文件
1.进入vue源码目录 cd /opt / vue_project/ #安装vue模块,默认去装package.json的模块内容,如果出现模块安装失败,手动再装 #npm install2.根据本地写的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.js3.编译打包vue源码 ,生成一个dist静态文件夹 #npm run build4.查看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_django2.安装项目所需的依赖模块. #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 filemodule = django_project.wsgi# the virtualenv (full path)home = /root/Envs/vue_django# process-related settings# mastermaster = true# maximum number of worker processesprocesses = 1# the socket (use the full path to be safesocket = 0.0.0.0:9999# ... with appropriate permissions - may be needed# chmod-socket = 664# clear environment on exitvacuum = true
启动redis数据库,支撑需要的业务数据
#进入redis目录redis-server redis.conf
全部部署完毕后,最后再次确认前端vue,后端django,nginx,redis正常后,通过windows中访问浏览器
#查看端口以及pid netstat -tunlp
...