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