vue+uwsgi+nginx部署項目

首先先下載好先後端項目

先從前端vue搞起

要在服務器上，編譯打包vue項目，必須得有node環境

下載node二進制包，此包已經包含node，不須要再編譯
wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
解壓縮
tar -zxvf node-v8.6.0-linux-x64.tar.gz
進入node文件夾
[root@web02 opt]# cd node-v8.6.0-linux-x64/
[root@web02 node-v8.6.0-linux-x64]# ls
bin  CHANGELOG.md  etc  include  lib  LICENSE  README.md  share
[root@web02 node-v8.6.0-linux-x64]# ls bin
node  npm  npx
[root@web02 node-v8.6.0-linux-x64]# ./bin/node -v
v8.6.0
[root@web02 node-v8.6.0-linux-x64]# ./bin/npm -v
5.3.0

將node命令，添加至linux環境變量,修改/etc/profile，寫入

PATH=$PATH:/opt/node-v8.6.0-linux-x64/bin

讀取文件，生效PATH

source /etc/profile

測試path

[root@web02 node-v8.6.0-linux-x64]# node -v
v8.6.0
[root@web02 node-v8.6.0-linux-x64]# npm -v
5.3.0

node環境有了，安裝node模塊，以及打包node項目

進入vue源碼目錄
cd 07-luffy_project_01/
安裝vue模塊，默認去裝package.json的模塊內容，若是出現模塊安裝失敗，手動再裝
npm install 

此時注意，你本地寫的vue代碼，接口極可能鏈接的服務器地址有問題，注意Axios.POST提交的地址，必定得發送給django應用（若是用了nginx，就發送給nginx的入口端口）
超哥這裏爲了試驗方便，將vue項目和django項目放在了一臺服務器，經過nginx反向代理功能(8000端口)，轉發vue請求給django(9000)

準備編譯打包vue項目，替換配置文件全部地址，改成服務器地址
sed -i 's/127.0.0.1/192.168.119.12/g' /opt/07-luffy_project_01/src/restful/api.js
此時打包vue項目，生成一個dist靜態文件夾
npm run build

檢查dist文件夾
[root@web02 07-luffy_project_01]# ls dist/
index.html static

至此vue代碼就結束了，只須要讓nginx配置，找到vue的index.html首頁文件便可

nginx這裏不作解釋，編譯安裝好便可

server {
　　　　 #用戶訪問域名或者ip，默認是nginx的80端口

        listen       80;
        server_name  192.168.119.12;
　　　　 #url匹配 / 也就是請求地址是192.168.119.12時，進入此location，返回vue的dist下index.html你的項目首頁
        location / {
        root /opt/07-luffy_project_01/dist;
        index index.html;
        }
    }

3、配置後端代碼，解決虛擬環境，保證項目乾淨隔離

激活虛擬環境venv1，在虛擬環境下，安裝項目所需的依賴模塊

pip3  install  -r   requirements.txt  

配置數據庫前面博客有 若是是sqllite,就不須要配置數據庫

　　　　安裝及配置 　　mysql+centos7+主從複製 

redis數據庫的配置, 

　　　　redis

經過uwsgi啓動路飛項目

1.建立一個uwsgi.ini配置文件，寫入參數信息 touch uwsgi.ini 
                                    
                    [uwsgi]
                    # Django-related settings
                    # the base directory (full path)
                    #指定項目的絕對路徑的第一層路徑！！！！！！！！！！！！！！！！！！！！！！！！
                    chdir = /opt/s15vuedrf/luffy_boy/

                    # Django's wsgi file
                    #  指定項目的 wsgi.py文件！！！！！！！！！！！！
                    #  寫入相對路徑便可，這個參數是以  chdir參數爲相對路徑
                    module          = luffy_boy.wsgi

                    # the virtualenv (full path)
                    # 寫入虛擬環境解釋器的 絕對路徑！！！！！！
                home            = /root/Envs/s15vuedrf
                    # process-related settings
                    # master
                    master          = true
                    # maximum number of worker processes
                    #指定uwsgi啓動的進程個數 processes = 1 #這個參數及其重要！！！！！！ #這個參數及其重要！！！！！！ #這個參數及其重要！！！！！！ #這個參數及其重要！！！！！！ # the socket (use the full path to be safe #socket指的是，uwsgi啓動一個socket鏈接，當你使用nginx+uwsgi的時候，使用socket參數 socket = 0.0.0.0:8000 #這個參數是uwsgi啓動一個http鏈接，當你不用nginx只用uwsgi的時候，使用這個參數 #這個參數是uwsgi啓動一個http鏈接，當你不用nginx只用uwsgi的時候，使用這個參數 #這個參數是uwsgi啓動一個http鏈接，當你不用nginx只用uwsgi的時候，使用這個參數 #這個參數是uwsgi啓動一個http鏈接，當你不用nginx只用uwsgi的時候，使用這個參數 #這個參數是uwsgi啓動一個http鏈接，當你不用nginx只用uwsgi的時候，使用這個參數 #http = 0.0.0.0:8000

                    # ... with appropriate permissions - may be needed
                    # chmod-socket    = 664
                    # clear environment on exit
                    vacuum          = true

配置好文件, 啓動項目 

uwsgi --ini  uwsgi.ini 

4、配置nginx，此步重要

1.先編譯安裝nginx

　　　　nginx入門與實戰  安裝與編譯

 

2.nginx.conf配置以下

#第一個server虛擬主機是爲了找到vue的dist文件， 找到項目的index.html
server {
        listen       80;
        server_name  192.168.13.79;
        
        #當請求來自於 192.168.13.79/的時候，直接進入如下location，而後找到vue的dist/index.html 
        location / {
            root   /opt/s15vuedrf/07-luffy_project_01/dist;
            index  index.html;
        }
        
    }
    
#因爲vue發送的接口數據地址是 192.168.13.79:8000  咱們還得再準備一個入口server
server {
    listen 8000;
    server_name  192.168.13.79;
    
    #當接收到接口數據時，請求url是 192.168.13.79:8000 就進入以下location
    location /  {
        #這裏是nginx將請求轉發給  uwsgi啓動的 9000端口
        uwsgi_pass  192.168.13.79:9000;
        # include  就是一個「引入的做用」，就是將外部一個文件的參數，導入到當前的nginx.conf中生效
        include /opt/nginx112/conf/uwsgi_params;
    }
}

3. 啓動nginx

./sbin/nginx  直接啓動 

此時到頁面查看

 

原理圖