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) 支付寶電腦網(wǎng)站支付配置信息
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 收集靜態(tài)文件
python manage.py collectstatic
6 提交并推送
git add . git commit -m "項目完成" git push -u origin master
7 前端配置修改 src/settings.js
設置后端服務器域名和端口
8 構(gòu)建
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數(shù)據(jù)庫相關配置
(1)安裝mysql
yum install mysql-server -y
或者使用容器
設置密碼以及初始化配置請自行解決
(2) 啟動數(shù)據(jù)庫
systemctl start mysqld
(3)新建數(shù)據(jù)庫luffy
create database luffy;
(4) 導入數(shù)據(jù)
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 創(chuàng)建虛擬環(huán)境
(1)創(chuàng)建虛擬環(huán)境
cd /opt/ virtualenv luffy
即就是虛擬環(huán)境路徑為 /opt/luffy/
cd /opt/luffy/
(2)激活虛擬環(huán)境
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數(shù)據(jù)庫和redis
python manage.py runserver
沒有報錯的話繼續(xù),報錯了就根據(jù)提示排除吧
6 uwsgi配置
(1) uwsgi.ini 配置內(nèi)容如下
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 # 進程數(shù) processes=1 # 線程數(shù) threads=2 # uwsgi服務器的角色 master=True # 存放進程編號的文件 pidfile=uwsgi.pid # 日志文件,因為uwsgi可以脫離終端在后臺運行,日志看不見。我們以前的runserver是依賴終端的 daemonize=uwsgi.log # 指定依賴的虛擬環(huán)境 virtualenv=/opt/luffy/ # clear environment on exit #退出時清除環(huán)境 vacuum = true
(2) 修改文件所有者, 如果用root啟動可忽略此步驟
chown -R nginx.nginx /opt/luffy/luffy/
也可以把nginx換成當前登錄用戶的用戶名,其它用戶也可以。
(3) 啟動uwsgi , 記得啟動MySQL數(shù)據(jù)庫和redis
uwsgi --ini /opt/luffy/luffy/uwsgi.ini
7 nginx配置
(1) 創(chuàng)建配置文件
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; } }
這是最基本配置,其它優(yōu)化配置就不再贅述!
(2)檢查nginx配置文件語法
nginx -t
(3) 啟動nginx
systemctl start nginx
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- vue-resource post數(shù)據(jù)時碰到Django csrf問題的解決
- 使用django和vue進行數(shù)據(jù)交互的方法步驟
- django和vue實現(xiàn)數(shù)據(jù)交互的方法
- django與vue的完美結(jié)合_實現(xiàn)前后端的分離開發(fā)之后在整合的方法
- django rest framework vue 實現(xiàn)用戶登錄詳解
- Python Django Vue 項目創(chuàng)建過程詳解
- Django與Vue語法的沖突問題完美解決方法
- Django+Vue.js搭建前后端分離項目的示例
- Django vue前后端分離整合過程解析
相關文章
vue中使用gantt-elastic實現(xiàn)可拖拽甘特圖的示例代碼
這篇文章主要介紹了vue中使用gantt-elastic實現(xiàn)可拖拽甘特圖,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-07-07vue中用js如何實現(xiàn)循環(huán)可編輯表格
這篇文章主要介紹了vue中用js如何實現(xiàn)循環(huán)可編輯表格,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09Vue 實現(xiàn)對quill-editor組件中的工具欄添加title
這篇文章主要介紹了Vue 實現(xiàn)對quill-editor組件中的工具欄添加title,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08