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 相关文章推荐
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
浅谈实现在线预览PDF的几种解决办法
Aug 10 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
如何给phpadmin一个保护
2006/10/09 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
简单使用Python自动生成文章
2014/12/25 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python set常用操作函数集锦
2017/11/15 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
pycharm修改file type方式
2019/11/19 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
Python运行异常管理解决方案
2020/03/09 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
竞聘副主任科员演讲稿
2014/01/11 职场文书
岗位职责风险防控
2014/02/18 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
小学新课改心得体会
2016/01/22 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL