vue+uwsgi+nginx部署

阅读次数：282 次来源：admin 发布时间：2022-03-18 07:15

目录简介部署前端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