前后端分离,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. Developing Vert.x Modules using the Standard Project

    The module The tests Unit tests Integration tests Java integration tests JavaScript integration test ...

  2. Oracle索引之Btree索引

    索引介绍 日常开发中,对于数据的查询如果需要优化,常听说要加个索引.但是为什么加了索引,数据的查询就快了呢?那是不是加了索引就一定会是有效或者有利的呢? Oracle中常见有BTREE索引,位图索引和 ...

  3. [CTF] RSA共模攻击

    from gmpy2 import * import libnum n = 0x00b0bee5e3e9e5a7e8d00b493355c618fc8c7d7d03b82e409951c182f398 ...

  4. Win10下JDK下载与环境变量配置

    一.JDK下载 1.JDK下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.ht ...

  5. npm --save-dev --save | -D -S区别

    -S就是--save的简写,就行npm默认一个start的字段,你可以不必输入npm run start 而只需输入npm start,这两个效果是一样的.-D就是--save-dev 这样安装的包的 ...

  6. T55359 家庭作业

    传送门 思路: 先按学分从大到小排序,根据贪心的思想尽可能地让作业的完成时间延后,这样就能有更多空间给那些限制比较严格的作业 设 f [ i ] 为点 i 向左的最小空闲时间 对于一个限制 t 的作业 ...

  7. y

    switch(update_state) { : switch(num){ : window.progressn=num $('#h_progress_bar .ui-progress').anima ...

  8. Js拾忆

    instanceof运算符:他是判断一个构造函数的prototype是否在对象的原型链上查找到 var a = new Array(); console.log(a instanceof Array) ...

  9. dvi接口介绍

    Most graphics cards and motherboards feature a Digital Video Interface (DVI) connector for connectin ...

  10. Axure文本框验证和外部url的调用

    文本框的验证和外部url的调用: 场景: 当输入文本框中的内容是满足下面条件时:输入4-10的数字,页面会跳转到QQ注册(https://ssl.zc.qq.com/v3/index-chs.html ...