剛剛在本地測試環境寫完專案,目前本地測試是一切順利,未發現異常,準備打包到生產環境伺服器上.

1. 前端React + antd + React-Router + axios
2. 後端Python3.6 + Django1.10.1
3. 腳手架用的是create-react-app所以我們無需 用webpack來編譯

1: 前端打包:

專案用的是yarn,所以我們編譯的話直接執行yarn build 這個命令在我們的package.json的檔案裡面定義的

執行之後如下:

注意：

1：大家用過Django的都知道普遍的模式是mtv，html css js檔案也是在後端中,當用了前端之後，前端的檔案會獨立出來,也就是我剛剛編譯之後的內容 ⇒ build

2: 後端打包:

到我們後端專案Backend目錄中,將資料庫裡面的資料統一倒入到.json檔案中：

除了json檔案命名無所謂以外,其他格式是嚴格要求這個寫法(除了python版本)

然後將後端目錄拷貝到生產伺服器上

3: uwsgi:

伺服器上的一些包什麼的這裡就不一一說了，大家肯定有缺少的，少什麼就pip裝什麼,推薦pip國內映象:

mkdir ~/.pip
touch ~/.pip/pip.conf
vim ~/.pip/pip.conf

[global]
timeout = 6000
 

index-url = http://pypi.douban.com/simple/
[install]
use-mirrors = true
mirrors = http://pypi.douban.com/simple/
trusted-host = pypi.douban.com

然後將開發環境打包的.json檔案倒入到本地資料庫中:

安裝uwsgi:

pip3.6 install uwsgi

安裝之後我們現在本地建立一個指令碼檔案進行uwsgi測試 ：

vim /root/test.py

def application(env, start_response):
        start_response('200 OK'
 
,[('Content-Type', 'text/html')])
        #return ['Hello world'] # Python2
        return [b'Hello world'] # Python3
執行測試: uwsgi --http 127.0.0.1:9090 --wsgi-file test.py #返回200即OK

然後我們進入後端目錄的settings.py的同級目錄下建立uwsgi.ini檔案 (本地是以配置檔案形式,以sock檔案形式輸出)

[uwsgi]
socket = 127.0.0.1:8000                 "這部分是uwsgi開啟的埠號,注意不能和nginx佔用同一個埠,同時也是nginx 代理的地址"
chdir =  /src/Backend/                  "後端專案目錄"
wsgi-file = /src/Backend/back/wsgi.py   "後端專案的wsgi.py 位置都是一樣的"
master = True                           "啟動一個master程序來管理其他程序"
processes = 2                           "同時啟動uwsgi程序的個數"            
daemonize = wsgi.log                    "uwsgi的日誌輸出檔案"
threads = 4                             "同時啟動的執行緒個數"
pidfile = uwsgi.pid                     "uwsgi的pid檔案"
buffer-size  = 30000                    "此處可不寫,我這buffer較高,所以我設定了"

啟動uwsgi：

uwsgi --ini uwsgi.ini 

檢視日誌輸出是否正常:

一般看到我畫箭頭的那塊就差不多成功啟動了

4: nginx:

現在我們需要做的就是ngixn的配置了,首先需要將你的前端編譯過的目錄build放到nginx根目錄下:

編輯nginx配置檔案隨便命名.conf結尾

cd conf/conf.d/
vim api.conf

前端配置server
server {
    listen 80;
    server_name www.project.com; "對外訪問的加速域名,不可與uwsgi埠衝突"

    location / {
        "一些跨域頭"
        add_header 'Access-Control-Allow-Origin' '*'; 
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        root build; "這裡就要指定你的前端目錄檔案了,也就是剛剛放進nginx根目錄的資料夾"
        index html index.html; "build 目錄下預設有index.html 指定預設檔案"
        try_files $uri /index.html; "這塊分重要,曾經不加嘗試過,當我訪問login路徑時,他不會自動跳轉,具體自行百度"
    }
}
後端配置server
server {
    "這部分是我前端axios 請求的時候的地址也就是每次前端非同步請求是http://www.igolang.cn:9000"
    listen 9000;
    server_name www.igolang.cn; 

    "專案app 叫api,也就是匹配到api路徑,載入uwsgi模組 代理到本地地址"
    location  ~ /api/ {
        include uwsgi_params;
        uwsgi_pass 127.0.0.1:8000; "這裡就是uwsgi.ini配置檔案中的地址"
    }
}

有問題歡迎前來諮詢:
QQ:1301927919
QQ群: 340164542