vue+uwsgi+nginx部署

vue

目录

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

回到顶部