在開(kāi)發(fā)完django后端接口和vue前端頁(yè)面之后,我們的代碼并不能直接放到遠(yuǎn)程服務(wù)器上去部署,需要一些準(zhǔn)備,下面是在項(xiàng)目已經(jīng)在本地對(duì)好接口,可以運(yùn)行的情況下的部署準(zhǔn)備操作
1.頁(yè)面開(kāi)發(fā)完成,修改main.js文件中的baseURL,將原本的方便開(kāi)發(fā)調(diào)試的localhost修改為遠(yuǎn)程服務(wù)器的公網(wǎng)地址,如圖:
2.為了去掉vue項(xiàng)目生成后url中的#號(hào),需要在router文件夾中的index.js文件中,在導(dǎo)出(export)的部分中加上:
mode: 'history',
如圖:
3.做好上面的準(zhǔn)備后,在vue項(xiàng)目所在的目錄下打開(kāi)cmd窗口,輸入:
npm run build
將項(xiàng)目打包為一個(gè)dist文件夾
1.在django項(xiàng)目中,先關(guān)掉Debug模式,將ALLOWED_HOSTS設(shè)置為['*'],方便所有網(wǎng)址訪問(wèn):
2.在pycharm控制臺(tái)或者本地路勁的cmd窗口輸入:
pip freeze > requirements.txt
將這個(gè)項(xiàng)目所需的依賴包目錄存進(jìn)requirements.txt文件中
3.將數(shù)據(jù)庫(kù)的用戶名、密碼等修改為服務(wù)器的mysql數(shù)據(jù)庫(kù)名(如果服務(wù)器沒(méi)有安裝數(shù)據(jù)庫(kù),先安裝,再配置)
1.在linux服務(wù)器中,創(chuàng)建一個(gè)文件夾,來(lái)保存整個(gè)項(xiàng)目,我創(chuàng)建的是一個(gè)/home文件夾。
完成后,在/home文件夾中創(chuàng)建三個(gè)文件夾
code: 用來(lái)存儲(chǔ)項(xiàng)目的所有代碼
conf: 用來(lái)存儲(chǔ)這個(gè)項(xiàng)目所需的配置文件
logs: 用來(lái)存放產(chǎn)生的日志文件
在/home文件夾中創(chuàng)建pythn虛擬環(huán)境:
python3 -m venv venv
后一個(gè)venv為虛擬環(huán)境名稱,并激活虛擬環(huán)境
source venv/bin/activate
2.開(kāi)啟linux中的mysql數(shù)據(jù)庫(kù),在數(shù)據(jù)庫(kù)中創(chuàng)建django settings.py文件中所配置的數(shù)據(jù)庫(kù)名,將vue項(xiàng)目準(zhǔn)備時(shí)生成的dist文件夾和后端整個(gè)項(xiàng)目傳過(guò)來(lái),放在code文件夾中,去到code文件夾的django項(xiàng)目目錄,使用命令行遷移文件:
python manage.py makemigrations
python manage.py migrate
3.同樣在django項(xiàng)目目錄下,安裝項(xiàng)目所需的依賴包:
pip install -r reuqirements.txt
此時(shí)可以使用如下命令檢查是否安裝成功
pip list
4.安裝uwsgi:
pip install uwsgi
此時(shí)所有的準(zhǔn)備工作完成
1.去到剛剛創(chuàng)建的conf文件夾中,創(chuàng)建一個(gè)uwsgi.ini文件,vim打開(kāi)該文件,進(jìn)行如下配置
2.配置文件書(shū)寫(xiě)完成后,使用命令運(yùn)行uwsgi(使用ini配置文件運(yùn)行):
uwsgi --ini uwsgi.ini
1.同樣在conf文件夾中創(chuàng)建nginx.conf文件,進(jìn)行如下配置:
2.在/etc/nginx/nginx.conf文件中配置總的nginx文件:
3.此時(shí)啟動(dòng)nginx,在瀏覽器中訪問(wèn)即可
systemctl start nginx
此時(shí),vue+django的http就已經(jīng)完成了。
在http部署完成以后,我們可以在瀏覽器上對(duì)項(xiàng)目進(jìn)行訪問(wèn),但是我們所有的接口、cookie等傳輸均為http不安全傳輸,也不被chrome、firefox等主流瀏覽器所認(rèn)同,顯示為非安全連接。
我們需要將所有的請(qǐng)求和連接都設(shè)置為https連接,保證文件傳輸?shù)目煽啃浴?/p>
1.在阿里云官網(wǎng)控制臺(tái)上,購(gòu)買好對(duì)應(yīng)的ssl證書(shū),在ssl證書(shū)控制臺(tái)下載對(duì)應(yīng)證書(shū)到本地:
2.在本地解壓后出現(xiàn)兩個(gè)文件:分別為.key, .pem文件
此時(shí)在/etc/nginx/目錄下創(chuàng)建一個(gè)名為cert的文件夾,將證書(shū)解壓后的兩個(gè)文件夾放到cert文件夾下
將main.js中的baseURL修改如下:
打開(kāi)django項(xiàng)目的settings.py文件,在配置文件的末尾加上如下配置:
去到conf文件夾中,打開(kāi)nginx.conf文件,在文件中做如下修改:
現(xiàn)在一切準(zhǔn)備就緒,重啟uwsgi和nginx服務(wù)器即可。
本文章為博主親測(cè),如有bug,請(qǐng)聯(lián)系我,謝謝!
聯(lián)系客服