vue + uwsgi +nginx 部署前后端分离项目
准备项目
1.将前端vue项目包和后端django项目包上传服务器,通过lrzsz,直接从windows拖进linux中
2.解压缩操作
前端vue部署
node环境准备
.下载node二进制包,该包已经包含node,不需要再编译 # wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
.解压缩 # tar -zxvf node-v8.6.0-linux-x64.tar.gz .进入压缩后的node文件找到bin目录执行 pwd 获取到node的路径 .将node命令添加到环境变量 --- vim /etc/profile # PATH = $PATH:/opt/node-v8.6.0-linux-x64/bin
再读取文件生效PATH --- source /etc/profile .测试环境 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
...