Vue+Django项目部署详解


Posted in Javascript onMay 30, 2019

本地项目配置

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

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

Javascript 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
asp.net 30分钟掌握无刷新 Repeater
Sep 16 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
了解重排与重绘
May 29 #Javascript
小程序如何构建骨架屏
May 29 #Javascript
新手简单了解vue
May 29 #Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 #Javascript
基于JS实现一个随机生成验证码功能
May 29 #Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 #Javascript
深入了解响应式React Native Echarts组件
May 29 #Javascript
You might like
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
Javascript - HTML的request类
2006/07/15 Javascript
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
AngularJS语法详解
2015/01/23 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
js实现点击烟花特效
2020/10/14 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
Python3 log10()函数简单用法
2019/02/19 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
如何基于python实现不邻接植花
2020/05/01 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
巴黎一票通:The Paris Pass
2018/02/10 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
档案管理员岗位职责
2013/12/01 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
获奖感言范文
2015/07/31 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS