部署前后端分離項目總結

1、前后端分離，vue前端提供靜態頁面，且可以向后台發起get，post等restful請求。django后台提供數據支撐，返回json數據，返回給vue，進行數據頁面渲染。

vue向后台發起請求  get  服務器ip:8000/課程列表 

django-rest-framework框架接收，“ 服務器ip:8000/課程列表 ” 請求，然后return返回一個json數據
{"課程列表":"python課程，linux課程",.....}

一、

 

1.先從后端搞起,部署django后台的環境依賴
    -解決環境依賴的辦法：
       
       把可以正常運行項目的那個機器地下的python包，全部導出來，就可以
        pip3 freeze >  requirements.txt    把這個文件，傳輸給linux系統
        linux再通過命令安裝
         pip3 install -r  requirements.txt 

安裝uwsgi啟動后端
        pip3 install uwsgi 
        
        啟動方式1，用參數啟動uwsgi --http  :8000  --module  luffy_boy.wsgi
        啟動方式2：用配置文件啟動
        touch uwsgi.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

二、

1、前端代碼vue打包搞起

      ①、准備node環境，下載node環境包

       wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
      ②、解壓縮node包
         tar -zxvf node-v8.6.0-linux-x64.tar.gz
      ③、添加node到環境變量
      PAHT="node環境" 
      ④、開始編譯打包前端vue文件
        1.修改vue提交的請求地址，修改文件是
        /opt/前端文件/src/restful/api.js 
        2.更改接口內的地址
        原本是 127.0.0.1:8000/ 
        改成服務器的ip地址+端口
        sed -i "s/127.0.0.1/192.168.29.136/g"   /opt/前端文件/src/restful/api.js 
        
        此時進入vue代碼的第一層文件夾
        cd /opt/vue文件名
        
        3.安裝node模塊，這是找到package.json，安裝它的內容 
        npm install （出現err后把vue文件刪除，重新解壓，開始④步驟）
        如果多次出現err,換台電腦打包dist文件，
        4.編譯打包vue代碼，這一步會生成dist靜態文件夾，用於nginx展示，前端頁面都在這了
        npm run build  

        5.配置nginx去找到這個前端vue頁面
        修改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;
                    }
        }   
        

            6.重啟nginx使得配置生效

             nginx -s reload

            7、啟動redis數據庫，支撐數據
             redis-server redis.conf