linux Vue+nginx+django 實現先後端分離

示例項目 -- LuffyCity.com 的上線

具體解釋,vue前端提供靜態頁面,且能夠向後臺發起get,post等restful請求

django後臺提供數據支撐,返回json數據,返回給vue,進行數據頁面渲染

下面是部署筆記:

-- 先從後端搞起 解決環境依賴 -- 解決環境依賴的辦法: 1 挨個報錯的處理 2 pip3 freeze >requirements.txt 3 傳這個txt文件到linux linux經過命令安裝 pip3 install -r requirements.txt 4 或者本身建立 touch requirements.txt vim requirements.txt 寫進去包數據

(s17luffy) [root@master luffy_boy]# cat requirements.txt 
certifi==2018.11.29 chardet==3.0.4 crypto==1.4.1 Django==2.1.4 django-redis==4.10.0 django-rest-framework==0.1.0 djangorestframework==3.9.0 idna==2.8 Naked==0.1.31 pycrypto==2.6.1 pytz==2018.7 PyYAML==3.13 redis==3.0.1 requests==2.21.0 shellescape==3.4.1 urllib3==1.24.1 uWSGI==2.0.17.1

5 安裝uwsgi啓動項目後端
啓動方式1 :用參數啓動 uwsgi --socket :8000 --module luffy_boy.wsgi
方式2     用配置文件啓動  建立 touch uwsgi.ini   
　　　　                vim uwsgi.ini 寫入  
　　　　　　　　　　　　　 啓動命令 (虛擬環境) [root@web02 opt]# uwsgi --ini luffy_boy/uwsgi.ini 找見 .ini文件的地址

[uwsgi] # Django-related settings # the base directory (full path)
chdir           = /opt/luffy_boy # Django's wsgi file
module          = luffy_boy.wsgi # the virtualenv (full path)
home            = /root/Envs/s17luffy # process-related settings # master
master          = true # maximum number of worker processes
processes       = 1
# the socket (use the full path to be safe
socket          = 0.0.0.0:6666     此處需注意
# ... with appropriate permissions - may be needed # chmod-socket = 664 # clear environment on exit
vacuum          = true

#後臺運行uwsgi
daemonize=yes

-- 前端代碼 vue 打包搞起  --
    1 準備node環境,下載node環境包 wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz 2 解壓包 tar -zxvf   node-v8.6.0-linux-x64.tar.gz 3  添加到環境變量   vim /etc/profile PATH="......"   
    4 編譯打包前端的vue文件 1 修改vue提交的請求地址,修改文件是 /opt/s17luffy/07-luffy_project_01/src/restful/api.js 2 更該接口內的地址 原來是 127.0.0.1:8000/ 改爲服務器的ip地址和端口 sed -i "s/127.0.0.1/192.168.11.186/g"   /opt/s17luffy/07-luffy_project_01/src/restful/api.js 此時進入vue代碼的第一冊層文件夾, 
　　　　　　cd /opt/s17luffy/07-luffy_project_01
　　　　 3 安裝node模塊,這是找到package.json,安裝它的內容
　　　　　　npm install 
　　　　 4 編譯打包vue代碼,這一步會生成 dist 靜態文件夾,用於nginx 展現,路飛的頁面都在這裏了
　　　　 npm install build 
　　　　 5 配置nginx去找到這個路飛學城頁面
　　　　　　修改 nginx.conf 參數以下所示:

 虛擬主機1，用於找到vue頁面 server { listen 80; server_name s17dnf.com; location / { root /opt/s17luffy/dist; index index.html; } } 虛擬主機2，用於反向代理，找到django server{ listen 8000; server_name 192.168.11.250; location / { include uwsgi_params; uwsgi_pass 0.0.0.0:6666; } } 

　　　　　　nginx -t 檢查

　　　　　　nginx -s reload 重啓使得配置生效

 -- 啓動redis數據庫,支撐購物車數據

　　　　redis-server redis.conf  默認6379端口

 -- 確保前端vue正常,後端django正常,nginx啓動正常,redis正常,在Windows中訪問頁面

 -- 確保能夠添加購物車數據,用戶登錄

更多請訪問 https://www.cnblogs.com/pyyu/p/10160874.html