Vue+Django项目部署的示例分析
这篇文章主要介绍Vue+Django项目部署的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联公司是一家专注于做网站、网站制作与策划设计,玉龙网站建设哪家好?创新互联公司做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:玉龙等地区。玉龙做网站价格咨询:13518219792
本地项目配置
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
以上是“Vue+Django项目部署的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网站栏目:Vue+Django项目部署的示例分析
网址分享:http://myzitong.com/article/jeigsc.html