Vue+Django项目部署详解

本地项目配置

1 复制 luffy/settings/dev.py为prop.py

修改luffy/settings/prop.py中以下几项

(1) allow_hosts

ALLOWED_HOSTS = [
  'api.youdomain.com',
]

(2) 跨域白名单

CORS_ORIGIN_WHITELIST = (
  # 前端域名
  "www.youdomain.com",
  # 后端api接口域名
  "api.youdomain.com"
)

(3) 支付宝电脑网站支付配置信息

ALIPAY_APPID = "xxxxxxx"
APP_NOTIFY_URL = None
ALIPAY_DEBUG = True
# APIPAY_GATEWAY="https://openapi.alipay.com/gateway.do"
APIPAY_GATEWAY = "https://openapi.alipaydev.com/gateway.do"
ALIPAY_RETURN_URL = "http://www.youdomain.com/success"
ALIPAY_NOTIFY_URL = "http://api.youdomain.com:8000/payments/success"

2 修改luffy/wsgi.py文件

第14行

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "luffy.settings.prop")

3 修改manage.py文件

不改也可以,为了在服务器测试方便一点

第6行

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "luffy.settings.prop")

4 导出pip安装的包列表

freeze > docs/requirements.txt

5 收集静态文件

python manage.py collectstatic

6 提交并推送

git add .
git commit -m "项目完成"
git push -u origin master

7 前端配置修改 src/settings.js

设置后端服务器域名和端口

Host:http://api.youdomain.com:80,

8 构建

npm run build

9 提交并推送

git add .
git commit -m "项目完成"
git push -u origin master

服务器上配置

1 安装所需软件

yum install python36-pip.noarch python36.x86_64 python36-devel.x86_64 nginx git gcc -y
pip3 install virtualenv -i https://pypi.douban.com/simple

注意:uwsig 最好使用pip方式安装

pip3 install uwsgi -i https://pypi.douban.com/simple

2 mysql数据库相关配置

(1)安装mysql

yum install mysql-server -y

或者使用容器

设置密码以及初始化配置请自行解决

(2) 启动数据库

systemctl start mysqld

(3)新建数据库luffy

create database luffy;

(4) 导入数据

mysql -uroot -pmysql luffy < luffy.sql

3 redis 安装与配置

可以使用 yum 安装并启动 ,简单粗暴!

为了使用最新版,我采用解压安装

那种方式你喜欢就好!

(1) 下载

cd /opt/
wget http://download.redis.io/releases/redis-5.0.5.tar.gz

(2) 解压并安装

tar -xf redis-5.0.5.tar.gz
cd /opt/redis-5.0.5
make && make install

(3)修改配置文件

vim redis.conf
69行 bind 127.0.0.1
改为 bind 0.0.0.0

(4)启动Redis,并放置在后台

nohup redis-server redis.conf &

4 拉取前端项目

cd /opt/
git clone https://gitee.com/SunHarvey/luffyweb.git

前端项目路径为 /opt/luffyweb/

只有 /opt/luffyweb/dist/ 文件有用 ,

dist用作前端根目录,其他的不要亦可!

5 创建虚拟环境

(1)创建虚拟环境

cd /opt/
virtualenv luffy 

即就是虚拟环境路径为 /opt/luffy/

cd /opt/luffy/

(2)激活虚拟环境

source /opt/luffy/bin/activate

(3)拉取后端项目

git clone https://gitee.com/SunHarvey/luffy.git

注:项目根路径为 /opt/luffy/luffy/

cd luffy

可以看到以下文件

docs luffy manage.py scripts static

(4)pip安装所需包

我的 django 使用的是2.0版本,不需要因为 pymysql 报错该源码

删除 luffy/docs/requirements.txt中 xadmin中的那行

pip3 install https://codeload.github.com/sshwsfc/xadmin/zip/django2
pip3 instal -r /opt/luffy/luffy/docs/requirements.txt

(5)用 runserver 启动django项目看看是否正常

记得启动MySQL数据库和redis

python manage.py runserver

没有报错的话继续,报错了就根据提示排除吧

6 uwsgi配置

(1) uwsgi.ini 配置内容如下

vim /opt/luffy/luffy/uwsgi.ini
[uwsgi]
# 设置uwsgi 启动用户,不设置也可,会有警告,也可以设置为当前登录的用户
uid = nginx
gid = nginx
#使用nginx连接时使用,Django程序所在服务器地址
socket=127.0.0.1:8000
#直接做web服务器使用,Django程序所在服务器地址
#http=0.0.0.0:8080
#项目目录
chdir=/opt/luffy/luffy
#项目中wsgi.py文件的目录,相对于项目目录
wsgi-file=luffy/wsgi.py
# 进程数
processes=1
# 线程数
threads=2
# uwsgi服务器的角色
master=True
# 存放进程编号的文件
pidfile=uwsgi.pid
# 日志文件,因为uwsgi可以脱离终端在后台运行,日志看不见。我们以前的runserver是依赖终端的
daemonize=uwsgi.log
# 指定依赖的虚拟环境
virtualenv=/opt/luffy/
# clear environment on exit #退出时清除环境
vacuum = true

(2) 修改文件所有者, 如果用root启动可忽略此步骤

chown -R nginx.nginx /opt/luffy/luffy/

也可以把nginx换成当前登录用户的用户名,其它用户也可以。

(3) 启动uwsgi , 记得启动MySQL数据库和redis

uwsgi --ini /opt/luffy/luffy/uwsgi.ini

7 nginx配置

(1) 创建配置文件

vim /etc/nginx/conf.d/your.conf
# 设置后端uwsgi服务器,可写多个用作负载均衡
upstream luffy {
  server 127.0.0.1:8000;
}
# 后端 api服务器配置
server {
  listen 80;
  server_name api.youdomain.com;
  location / {
    include uwsgi_params;
    uwsgi_pass luffy;
  }
  # 加载css、js文件
  location ~ .*\.(css|js)$ {
    root /opt/luffy/luffy/;
    }
}

# 前端页面服务器配置
server {
  listen 80;
  # 不要怀疑,你没有看错!nginx的80端口可以启动 n 个域名!
  server_name youdomain.com www.youdomain.com;
  location / {
    # /opt/luffyweb/dist/ 为npm run build生成的文件夹
    root /opt/luffyweb/dist/;
    index index.html;
    try_files $uri $uri /index.html;
  }
}

这是最基本配置,其它优化配置就不再赘述!

(2)检查nginx配置文件语法

nginx -t

(3) 启动nginx

systemctl start nginx

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Django+Vue实现WebSocket连接的示例代码

    近期有一需求:前端页面点击执行任务,实时显示后端执行情况,思考一波:发现 WebSocket 最适合做这件事. 效果 测试 ping www.baidu.com 效果 点击连接建立ws连接 后端实现 所需软件包 后端主要借助Django Channels 实现socket连接,官网文档链接 这里想实现每个连接进来加入组进行广播,所以还需要引入 channels-redis . pip channels==2.2.0 channels-redis==2.4.0 引入 settings.py INS

  • 浅谈django rest jwt vue 跨域问题

    django rest framework 使用 router 注册url时,访问接口 包302错误 可能是因为请求url 写法有问题, 如请求 /api/login/ 报302 ,需要去掉后面的反斜杠,正确写法 /api/login 请求跨域: 跨域: 简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.这显然是不安全的.为此,浏览器的鼻祖:网景(Netscape)公司提出了优秀的解决方案:著名的浏览器同源策略.现在所有支持JavaScript的浏览

  • Django+Vue.js搭建前后端分离项目的示例

    在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py

  • Django+vue跨域问题解决的详细步骤

    跨域 由于开发模式为前后端分离式开发,故而通常情况下,前端和后端可能运行不同的ip或者port下,导致出现跨域问题,故而单独说明 什么是跨域 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景. 什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.

  • Django与Vue语法的冲突问题完美解决方法

    当我们在django web框架中,使用vue的时候,会遇到语法冲突. 因为vue使用{{}},而django也使用{{}},因此会冲突. 解决办法1: 在django1.5以后,加入了标签: {% verbatim myblock %} {% endverbatim myblock %} 被此标签包裹的代码将不会被Django的模板引擎渲染. 因此,我们可以把带有{{ }} 的Vue代码放在 {% verbatim myblock %}标签中间,例如: <div id="app1&quo

  • Django+Vue跨域环境配置详解

    概述 在使用Django+Vue开发过程中,遇到了很多开发环境相关的问题,比如跨域,比如ajax请求参数等,本篇文章主要记录解决在开发过程中,遇到的一些问题. 跨域不带Cookie 在使用Vue脚手架开发的过程中,会使用Vue脚手架自带的Server进行项目调试,Vue自带的Server支持 hot reloading ,这个特性是非常好用的.但是在开发过程中,因为要与后端交互,所以在请求后端接口的时候,会遇到跨域问题,这个问题在一些职责划分清楚的团队并不存在,因为前端开发人员会才用Mock数据

  • Vue+Django项目部署详解

    本地项目配置 1 复制 luffy/settings/dev.py为prop.py 修改luffy/settings/prop.py中以下几项 (1) allow_hosts ALLOWED_HOSTS = [ 'api.youdomain.com', ] (2) 跨域白名单 CORS_ORIGIN_WHITELIST = ( # 前端域名 "www.youdomain.com", # 后端api接口域名 "api.youdomain.com" ) (3) 支付宝电

  • Apache部署Django项目图文详解

    前言 Django项目本身就可以启动运行,为什么还需要部署到Apache或者Nginx上呢?初学者都会遇到这个问题,我们来看看官方解释:It's intended only for use while developing. (We're in the business of making Web frameworks, not Web servers.),意思是django的业务是制作Web框架,而不是Web服务器.自带的web server只是方便开发,并不能直接放到生产环境,有兴趣的同学可

  • 基于Vue生产环境部署详解

    前面的话 开发时,Vue 会提供很多警告来帮助解决常见的错误与陷阱.生产时,这些警告语句却没有用,反而会增加载荷量.再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的.本文将详细介绍Vue生产环境部署 生产环境 如果用 Vue 完整独立版本 (直接用 <script> 元素引入 Vue),生产时应该用精简版本 (vue.min.js) 如果用 Webpack 或 Browserify 类似的打包工具时,生产状态会在 Vue 源码中由 process.env.NODE_ENV 决定,

  • 保姆级官方yolov7训练自己的数据集及项目部署详解

    目录 前言 第一步 数据集准备 第二步 train.py载入自己的数据集并训练 第三步 将训练好的pt文件做成接口调用 总结 前言 首先,先说明我只是初步接触yolov7,写这篇文章的主要目的是可以让大家快速应用自己的数据集进行训练.没有接触过yolov5也没有关系,该篇文章会逐步进行演示如何训练. 第一步 数据集准备 首先确保你有labelimg标图软件,若无,需要自行去下一个并看一下标图教程. 当你已经标注完成,获得了img以及相对应的xml之后(如图) 接下来就是可选择项:是否需要图像增强

  • python框架django项目部署相关知识详解

    这篇文章主要介绍了python框架django项目部署相关知识详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一:项目部署的框架 nginx和uWSGI在生产服务器上进行的部署 二:什么是nginx? nginx是一个web服务器. 什么是web服务器? web服务器则主要是让客户可以通过浏览器进行访问,处理HTML文件,css文件,js文件,图片等资源.web服务器一般要处理静态文件.对接服务器. 什么是静态文件? css,js,html

  • Nginx+Uwsgi+Django 项目部署到服务器的思路详解

    首先先说一下思路: 1.本地django项目打包 主要用到的是 python自带的distutils.core 下的 setup,具体代码在下面,主要讲的两个问题是package主要打包为和目录同级的代码,例如:TCMS如果还有一个子文件夹,那就不能自动打包了.这个时候需要用到data_files.glob(*filename)文件名模式匹配,不用遍历整个目录判断每个文件是不是符合. from distutils.core import setup import glob setup( name

  • node创建Vue项目步骤详解

    vue的安装 Vue.js不支持IE8及以下版本.因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟. Vue.js支持所有兼容ECMAScript5的浏览器. 在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用. 首先Vue的安装依赖于node.js,要保证你的计算机上已经安装过node.js. 如何查看node是否安装或者node版本呢? 进入cmd,输入命令 node -v,回车查看.node最好使用新一些的版本,否则后续

  • 如何用Idea或者webstorm跑一个Vue项目(步骤详解)

    现在vue.js几乎是程序员必会的前端框架啦~ 今天就学习记录一下怎么运行一个vue项目 无论是Idea还是webstorm,都是一样的操作. 去网上随便找一个开源项目,以下就是操作的流程,不管是用webstorm还是idea界面都一样. 第一步:终端输入npm install命令 第二步:配置这里 第三步:第二步点开以后就是这个界面 其中,name自己随便写 package.json的路径 scripts这里写dev还是serve,看json文件配置 第四步:这就是配置文件,里面是命令 第五步

  • vue动态代理无须重启项目解决方案详解

    目录 1.背景 2.技术方案 2.1 旧的配置方案 2.2 新的配置方案思路 3. 配置 1.背景 当我们vue构建项目的时候,都会在vue.config.js中配置我们需要代理的服务器地址.有时候我们需要使用不同后端服务器地址,也就是我们开发中所说的测试环境.灰度环境.正式环境等,这个时候如果我们需要使用不同的环境地址的时候,就需要使用命令或者手动修改vue.config.js中配置来重新启动项目.当项目项目越来越大的时候,我们需要很长的时间来启动项目,如此反复,极大影响我们开发进度.这个时候

  • 基于Vue单文件组件详解

    本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图.但当在更复杂的项目中,或者前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显: 1.全局定义 (Global definitions) 强制要求每个 compon

随机推荐