前后端分离,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. 2018年-2019年第二学期第二周C#学习个人总结

    在本学期的第二周,我们又开始了C#的学习.在星期一的C#课上时,我们学了this关键字的用法其中包括1.this访问属性2.this访问成员方法3.this访问构造方法.在this访问属性中通过thi ...

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

    续: 5.表单标签<form></form> 用于收集用户信息,统一提交到服务器 一般用input标签收集,再用提交按钮提交:input标签根据type属性值不同有不同的类型: ...

  3. LintCode 1.A+B的问题

    LintCode 1.A+B的问题 描述 给出两个整数 a 和 b , 求他们的和. 答案 public class Solution { /** * @param a: An integer * @ ...

  4. Lintcode470-Tweaked Identical Binary Tree-Easy

    470. Tweaked Identical Binary Tree Check two given binary trees are identical or not. Assuming any n ...

  5. ssh 框架整合事,使用注解,action提示找不到

    There is no Action mapped for namespace [/] and action name [/select] associated with context path [ ...

  6. 【云短信】腾讯&阿里

    腾讯 : https://github.com/qcloudsms/qcloudsms_csharp 安装nuget包: using qcloudsms_csharp; using System.Co ...

  7. centos7配置consul

    下载wget https://releases.hashicorp.com/consul/1.4.2/consul_1.4.2_linux_amd64.zip解压unzip consul_1.4.2_ ...

  8. Descriptio Resource Path LocationType Archive for required library: 'D:/apache-maven/apache-maven-3.6.0/mavenrepository/org/springframework/spring-aspects/4.3.7.RELEASE/spring-aspects-4.3.7.RELEASE.

    eclipse创建了一个maven项目后,在导入依赖包后返现项目有个红色刺眼的感叹号,再看控制台有个Problem提示 Descriptio Resource Path LocationType Ar ...

  9. C# 生成小于Int数值绝对值的随机数

    C#中有两种类型的随机数生成器: 伪随机数(System.Random) 安全随机数(System.Security.Cryptography.RNGCryptoServiceProvider)   ...

  10. Cordova入门系列(四)自定义Cordova插件--showToast

    前三篇Cordova入门系列,简单讲解了Cordova,以及如何调用Cordova插件,今天我们讲解一下如何自己做一个插件. 自定义插件,就是自己写一些安卓java代码,然后和js代码以及配置文件,封 ...