vue+uwsgi+nginx部署
目录
- 简介
- 部署前端vue
- 部署后端django
- 配置nginx
- 测试
简介
学城是前后端分离, vue前端提供静态页面, 且可以向后台发起get, post等restful请求。django后台提供数据支撑, 返回json数据,返回给vue, 进行数据页面渲染.
1. 建立一个虚拟环境mkvirtualenv luffy_boy
2. 在/opt/下载项目代码
wget https://files.cnblogs.com/files/pyyu/luffy_boy.zip
wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip
部署前端vue
3. 前端Vue打包1) 准备node环境, 下载node环境包
wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
2) 解压缩node包
tar -zxvf node-v8.6.0-linux-x64.tar.gz
3) 添加node到环境变量(bin目录)
source /etc/profile # 读取文件, 使PATH生效
node -v
npm -v
4. 编译打包前端vue文件
1) 修改Vue提交的请求地址, 修改文件
/opt/07-luffy_project_01/src/restful/api.js
2) 更改接口内的地址 (改成服务器的ip地址+端口)
sed -i "s/127.0.0.1/192.168.11.192/g" /opt/07luffy_project_01/src/restful/api.js
3) 进入vue代码第一层文件夹, 找到package.jason包
npm install
4) 编译打包vue代码, 生成dist静态文件夹, 同于nginx页面展示
npm run build
部署后端django
5. 后端部署django的环境依赖1) 解决环境依赖包
pip3 freeze > requirements.txt
# 在linux下安装依赖包
pip3 install -r requirements.txt
certifi==2018.11.29
chardet==3.0.4
crypto==1.4.1
Django==2.1.4
django-redis==4.10.0
django-rest-framework==0.1.0
djangorestframework==3.9.0
idna==2.8
Naked==0.1.31
pycrypto==2.6.1
pytz==2018.7
PyYAML==3.13
redis==3.0.1
requests==2.21.0
shellescape==3.4.1
urllib3==1.24.1
uWSGI==2.0.17.1
2) 安装uwsgi启动项目
pip3 install uwsgi
启动方式1: uwsgi --socket :8000 --module luffy_boy.wsgi
启动方式2: uwsgi --ini uwsgi.ini
3) 配置uwsgi.ini文件, 用配置文件启动
[uwsgi]
# Django-related settings
# the base directory (full path) # 项目第一层文件夹绝对路径
chdir = /opt/luffy_boy
# Django's wsgi file
module = luffy_boy.wsgi # 项目第二层
# the virtualenv (full path)
home = /root/Envs/luffy_boy # 虚拟环境的绝对路径
# 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:8090
# ... with appropriate permissions - may be needed
# chmod-socket = 664
# clear environment on exit
vacuum = true
配置nginx
6. 配置nginx代理找到后端页面 (配置nginx.conf)1) 虚拟主机1, 用于找到vue页面.
server {
listen 80;
server_name s17dnf.com;
location / { # 找到dist中的index页面
root /opt/07_luffy_project_01/dist;
index index.html;
}
}
2) 虚拟主机2, 用于反向代理, 找到django
server{
listen 8000;
server_name 192.168.11.192;
location / {
include uwsgi_params;
uwsgi_pass 0.0.0.0:8090;
}
}
3) 启动nginx使配置生效 (或重启: nginx -s reload)
测试
6. 启动redis数据库, 在页面进行访问redis-server
7. 用户登陆后, 购物车可以添加数据
账号密码: xxx xxxxxx
以上是 vue+uwsgi+nginx部署 的全部内容, 来源链接: utcz.com/z/380887.html