Vue+Django項(xiàng)目部署詳解
本地項(xiàng)目配置
1 復(fù)制 luffy/settings/dev.py為prop.py
修改luffy/settings/prop.py中以下幾項(xiàng)
(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文件
不改也可以，為了在服務(wù)器測(cè)試方便一點(diǎn)
第6行
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "luffy.settings.prop")
4 導(dǎo)出pip安裝的包列表
freeze > docs/requirements.txt
5 收集靜態(tài)文件
python manage.py collectstatic
6 提交并推送
git add . git commit -m "項(xiàng)目完成" git push -u origin master
7 前端配置修改 src/settings.js
設(shè)置后端服務(wù)器域名和端口
8 構(gòu)建
npm run build
9 提交并推送
git add . git commit -m "項(xiàng)目完成" git push -u origin master
服務(wù)器上配置
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ù)庫(kù)相關(guān)配置
(1)安裝mysql
yum install mysql-server -y
或者使用容器
設(shè)置密碼以及初始化配置請(qǐng)自行解決
(2) 啟動(dòng)數(shù)據(jù)庫(kù)
systemctl start mysqld
(3)新建數(shù)據(jù)庫(kù)luffy
create database luffy;
(4) 導(dǎo)入數(shù)據(jù)
mysql -uroot -pmysql luffy < luffy.sql
3 redis 安裝與配置
可以使用 yum 安裝并啟動(dòng) ，簡(jiǎn)單粗暴！
為了使用最新版，我采用解壓安裝
那種方式你喜歡就好！
(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)啟動(dòng)Redis,并放置在后臺(tái)
nohup redis-server redis.conf &
4 拉取前端項(xiàng)目
cd /opt/ git clone https://gitee.com/SunHarvey/luffyweb.git
前端項(xiàng)目路徑為 /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)拉取后端項(xiàng)目
git clone https://gitee.com/SunHarvey/luffy.git
注：項(xiàng)目根路徑為 /opt/luffy/luffy/
cd luffy
可以看到以下文件
docs luffy manage.py scripts static
(4)pip安裝所需包
我的 django 使用的是2.0版本，不需要因?yàn)?pymysql 報(bào)錯(cuò)該源碼
刪除 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 啟動(dòng)django項(xiàng)目看看是否正常
記得啟動(dòng)MySQL數(shù)據(jù)庫(kù)和redis
python manage.py runserver
沒(méi)有報(bào)錯(cuò)的話繼續(xù)，報(bào)錯(cuò)了就根據(jù)提示排除吧
6 uwsgi配置
(1) uwsgi.ini 配置內(nèi)容如下
vim /opt/luffy/luffy/uwsgi.ini [uwsgi] # 設(shè)置uwsgi 啟動(dòng)用戶，不設(shè)置也可，會(huì)有警告，也可以設(shè)置為當(dāng)前登錄的用戶 uid = nginx gid = nginx #使用nginx連接時(shí)使用，Django程序所在服務(wù)器地址 socket=127.0.0.1:8000 #直接做web服務(wù)器使用，Django程序所在服務(wù)器地址 #http=0.0.0.0:8080 #項(xiàng)目目錄 chdir=/opt/luffy/luffy #項(xiàng)目中wsgi.py文件的目錄，相對(duì)于項(xiàng)目目錄 wsgi-file=luffy/wsgi.py # 進(jìn)程數(shù) processes=1 # 線程數(shù) threads=2 # uwsgi服務(wù)器的角色 master=True # 存放進(jìn)程編號(hào)的文件 pidfile=uwsgi.pid # 日志文件，因?yàn)閡wsgi可以脫離終端在后臺(tái)運(yùn)行，日志看不見(jiàn)。我們以前的runserver是依賴終端的 daemonize=uwsgi.log # 指定依賴的虛擬環(huán)境 virtualenv=/opt/luffy/ # clear environment on exit #退出時(shí)清除環(huán)境 vacuum = true
(2) 修改文件所有者， 如果用root啟動(dòng)可忽略此步驟
chown -R nginx.nginx /opt/luffy/luffy/
也可以把nginx換成當(dāng)前登錄用戶的用戶名，其它用戶也可以。
(3) 啟動(dòng)uwsgi , 記得啟動(dòng)MySQL數(shù)據(jù)庫(kù)和redis
uwsgi --ini /opt/luffy/luffy/uwsgi.ini
7 nginx配置
(1) 創(chuàng)建配置文件
vim /etc/nginx/conf.d/your.conf
# 設(shè)置后端uwsgi服務(wù)器，可寫(xiě)多個(gè)用作負(fù)載均衡
upstream luffy {
server 127.0.0.1:8000;
}
# 后端 api服務(wù)器配置
server {
listen 80;
server_name api.youdomain.com;
location / {
include uwsgi_params;
uwsgi_pass luffy;
}
# 加載css、js文件
location ~ .*\.(css|js)$ {
root /opt/luffy/luffy/;
}
}
# 前端頁(yè)面服務(wù)器配置
server {
listen 80;
# 不要懷疑，你沒(méi)有看錯(cuò)！nginx的80端口可以啟動(dòng) n 個(gè)域名！
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配置文件語(yǔ)法
nginx -t
(3) 啟動(dòng)nginx
systemctl start nginx
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vue-resource post數(shù)據(jù)時(shí)碰到Django csrf問(wèn)題的解決
- 使用django和vue進(jìn)行數(shù)據(jù)交互的方法步驟
- django和vue實(shí)現(xiàn)數(shù)據(jù)交互的方法
- django與vue的完美結(jié)合_實(shí)現(xiàn)前后端的分離開(kāi)發(fā)之后在整合的方法
- django rest framework vue 實(shí)現(xiàn)用戶登錄詳解
- Python Django Vue 項(xiàng)目創(chuàng)建過(guò)程詳解
- Django與Vue語(yǔ)法的沖突問(wèn)題完美解決方法
- Django+Vue.js搭建前后端分離項(xiàng)目的示例
- Django vue前后端分離整合過(guò)程解析
相關(guān)文章
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue.js將unix時(shí)間戳轉(zhuǎn)換為自定義時(shí)間格式
這篇文章主要介紹了vue.js將unix時(shí)間戳轉(zhuǎn)換為自定義時(shí)間格式的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Element中el-table動(dòng)態(tài)合并單元格(span-method方法)
本文主要介紹了Element中el-table動(dòng)態(tài)合并單元格(span-method方法)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要為大家詳細(xì)介紹了Vue2純前端實(shí)現(xiàn)像chatGpt和Deepseek那樣的文字流式輸出效果的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),有需要的可以了解下2025-03-03
vue中swiper?vue-awesome-swiper的使用方法及各種坑解決
這篇文章主要介紹了vue中swiper?vue-awesome-swiper的使用方法及各種坑解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
antd的select下拉框因?yàn)閿?shù)據(jù)量太大造成卡頓的解決方式
這篇文章主要介紹了antd的select下拉框因?yàn)閿?shù)據(jù)量太大造成卡頓的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
詳解vue中v-on事件監(jiān)聽(tīng)指令的基本用法
這篇文章主要介紹了詳解vue中v-on事件監(jiān)聽(tīng)指令的基本用法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)信息管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
vue使用css-rcurlyexpected等less報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了vue使用css-rcurlyexpected等less報(bào)錯(cuò)問(wèn)題，具有很的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue表格(table)計(jì)算總計(jì)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07