前后端分离,vue前端提供静态页面,且可以向后台发起get,post等restful请求。
django后台提供数据支撑,返回json数据,返回给vue,进行数据页面渲染
后端
创建虚拟环境 解决django文件的环境依赖
pip install 环境依赖包
(通过windows转至linux环境下 处理windows环境下环境依赖   
(pip freeze >  requirements.txt : 将windows下python所需要的包 写入requirements.txt中
在linux中通过命令安装 pip3 install -r  requirements.txt )
(创建requirements.txt 需要的包写入, 在linux中通过命令安装 pip3 install -r requirements.txt)
)
安装uwsgi
(pip install uwsgi)
启动方式 1 用参数启动    (uwsgi --socket  :8000  --module  luffy_boy.wsgi)
启动方式2:用配置文件启动 
在项目的中 创建 uwsgi.ini 文件 写入配置
[uwsgi]
# Django-related settings
# the base directory (full path)     项目的绝对路径
chdir           = /opt/luffy_boy
# Django's wsgi file                        带有wsgi.py的文件路径(相对路径)
module          = luffy_boy.wsgi
# the virtualenv (full path)
home            = /root/Envs/s17luffy   虚拟环境的路径   (cdvirtualenv 进入  pwd查看  )
# 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:6666
# ... with appropriate permissions - may be needed
# chmod-socket    = 664
# clear environment on exit
vacuum          = true
启动命令(uwsgi  --ini   uwsgi.ini)
前端 vue
node准备
解压  (tar  -zxvf   包名) (unzip  包名)   压缩 (tar   -zcvf  文件 )
添加环境变量    (vim  /etc/profile )  刷新 环境变量   ( source  /etc/profile )  查看 (echo  $PATH)
开始编译打包前端vue文件
修改vue文件   vue文件下的/src/restful/api.js
修改 成当前服务器的ip和端口号  全局修改文件  ( sed  -i 's/需要修改的的内容/修改后的内容/g '  vue文件的绝对路径/src/restful/api.js)
进入 vue文件 找到找到package.json,安装它的内容   (npm  install)
编译打包vue代码,这一步会生成dist静态文件夹,用于nginx展示   (npm  run  build )
配置nginx
修改nginx.conf   需要两个虚拟主机
虚拟主机1   用于找到vue页面
server {
                listen       80;
                server_name  localhost;     # 访问的地址
                location / {
                root  /opt/s17luffy/dist;        # 展示vue页面 dist的绝对路径
                index index.html;
                }
    }
虚拟主机2  用于反向代理 找到django
server{
listen 8000;
    server_name  localhost;
 
    location / {
include uwsgi_params;
uwsgi_pass 0.0.0.0:6666;
    }
重启nginx使配置生效  (nginx -s  reload )
redis数据库
启动redis数据库 ( redis-server redis.conf )
 
 

vue+uwsgi+nginx部署前后端分离项目的更多相关文章

  1. 使用 Nginx 部署前后端分离项目,解决跨域问题

    前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...

  2. nginx+vue+uwsgi+django的前后端分离项目部署

    Vue+Django前后端分离项目部署,nginx默认端口80,数据提交监听端口9000,反向代理(uwsgi配置)端口9999 1.下载项目文件(统一在/opt/luffyproject目录) (1 ...

  3. linux --- 部署前后端分离项目

    vue + uwsgi +nginx 部署前后端分离项目 准备项目 1.将前端vue项目包和后端django项目包上传服务器,通过lrzsz,直接从windows拖进linux中 2.解压缩操作 前端 ...

  4. centos7部署前后端分离项目的过程

    概述 本文主要讲解在安装了centos7的Linux主机中部署前后端分离项目的过程. 前端项目名为:vue_project:后端项目名为:django_project. 将这两个项目放在/opt/wh ...

  5. Nginx部署前后端分离服务

    飘过... 一,安装Nginx 二,配置nginx 一般nginx配置文件在etc目录下 另,如何找nginx.conf配置文件: 在前后端分离端项目里,前端的代码会被打包成为纯静态文件.使用 Ngi ...

  6. 在centos7.6上部署前后端分离项目Nginx反向代理vue.js2.6+Tornado5.1.1,使用supervisor统一管理服务

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_102 这一次使用vue.js+tornado的组合来部署前后端分离的web项目,vue.js不用说了,前端当红炸子鸡,泛用性非常广 ...

  7. 海纳百川无所不容,Win10环境下使用Docker容器式部署前后端分离项目Django+Vue.js

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_179 随着现代化产品研发的不断推进,我们会发现,几乎每个产品线都会包含功能各异的服务,而且服务与服务之间存在也会存在着错综复杂的依 ...

  8. docker+nginx+redis部署前后端分离项目!!!

    介绍本文用的经典的前后端分离开源项目.项目的拉取这些在另一篇博客!!! 其中所需要的前后端打包本篇就不做操作了!!不明白的去看另一篇博客!!! 地址:http://www.cnblogs.com/ps ...

  9. vue.js+UEditor集成 [前后端分离项目]

    首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+web ...

随机推荐

  1. Maven打war包命令

    https://jingyan.baidu.com/article/295430f1e7c4b30c7e005095.html clean compile package

  2. HTML与CSS的一些知识(四)

    续: line-height 用于设置一行文本行高,一般用于文本的垂直居中: display 用于设置元素的显示方式 float 浮动,让元素漂浮起来排列 浮动的影响: a.浮动后,行内元素可以支持宽 ...

  3. <工厂方法>比<简单工厂>多了啥

    前言:多注重设计.仅当复习讨论! 简单工厂模式 UML图   假如有一位爱心人士,想给饥饿的流浪动物喂食.此时爱心人士身带了狗粮,但是他到处找啊找,最终只找到了猫大人,是不是有点惨兮兮.但是如果有简单 ...

  4. visual编译通过后,debug报错找不到*.dll

    解决: 在debug目录下放入*.dll

  5. h5 ios键盘卡死页面

    失去焦点以后重新设置页面顶部位置 $('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('c ...

  6. luogu准备复习(学习)题单

    矩阵乘法 P1306 exbsgs P4195 网络流(割点) P1345 主席树 P3302

  7. vue--transition-group

    1.为什么要使用<transition-group> <transition></transition>是vue封装的过渡组件 <transition nam ...

  8. d3.event=null

    d3功能奇多, 已经模块化,(其实感觉和react差不多了). 所以默认打包的单个文件 <script src="https://d3js.org/d3.v5.min.js" ...

  9. Django 应用程序 + 模型 + 基本数据访问

    如果你只是建造一个简单的web站点,那么可能你只需要一个app就可以了.如果是复杂的象 电子商务之类的Web站点,你可能需要把这些功能划分成不同的app,以便以后重用. 确实,你还可以不用创建app, ...

  10. WPF界面假死

    首先要检查那些滥用 Timer.Dispacher Timer 或者滥用什么“线程+死循环+阻塞”轮询的代码. 这种是编程大忌,有些人不会设计事件驱动程序,而是滥用轮询. 若是:触发事件后的假死,搜W ...