Vue+Django项目部署详解

前端  /  管理员 发布于 5年前   512

本地项目配置

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 = NoneALIPAY_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 -ypip3 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.gzcd /opt/redis-5.0.5make && 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/django2pip3 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 = nginxgid = 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

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

您可能感兴趣的文章:

• vue+django实现一对一聊天功能的实例代码
• Django+Vue跨域环境配置详解
• Django与Vue语法的冲突问题完美解决方法
• Django+Vue.js搭建前后端分离项目的示例
• Python Django Vue 项目创建过程详解