如何一步步在生產(chǎn)環(huán)境上部署django和vue

看見(jiàn)就非常 2020-04-30

展開(kāi)全文

本文由云+社區(qū)發(fā)表
本文主要講述了如何一步步在生產(chǎn)環(huán)境上部署django和vue,，操作系統(tǒng)默認(rèn)為centos

說(shuō)明：后文中出現(xiàn)的以下字符串均表示具體的路徑或者名稱(chēng)，含義如下：

DJANGO_DIR----表示django的工程根目錄
DJANGO_NAME----表示django的工程名稱(chēng)
VUE_HTML_DIR----表示vue編譯好的index.html路徑
VUE_STATIC_DIR----表示vue編譯好的靜態(tài)文件夾static的路徑

整體框架

一個(gè)常用的web框架圖如下圖所示

框架選用.jpg

我們使用nginx + uwsgi來(lái)驅(qū)動(dòng)django,，因?yàn)閡wsgi性能非常高

720333-20170312154455592-1425120615.png

一、安裝和配置nginx

安裝

使用yum安裝即可

yum -y install nginx

啟動(dòng)

service nginx start

此時(shí)到瀏覽器輸入對(duì)應(yīng)的ip地址,，出現(xiàn)下面頁(yè)面即表示安裝成功

1324702136-57fb16aa00d21_articlex.png

修改配置文件

nginx可以新建一個(gè)配置,，放在項(xiàng)目目錄,，暫時(shí)不修改nginx的默認(rèn)配置,，端口號(hào)可以換一個(gè),，然后在/etc/nginx/conf.d/內(nèi)新建一個(gè)軟鏈接指向該配置文件,，這樣nginx在讀取配置時(shí)會(huì)將該配置一起讀進(jìn)去,。這樣,，訪問(wèn)端口號(hào)8080的請(qǐng)求便會(huì)指向我們自己的這個(gè)配置,。

server {
    listen 8080;
    server_name 132.232.50.225;
    root /data/;
    charset  utf-8;
    access_log /data/access_narwhals.log;
    error_log /data/error_narwhals.log;
    client_max_body_size 75M;
    location / {
            uwsgi_pass 127.0.0.1:9090;
            include /etc/nginx/uwsgi_params;
    }
    location ^~ /admin/ {
            uwsgi_pass 127.0.0.1:9090;
            include /etc/nginx/uwsgi_params;
    }
}

該配置中uwsgi_pass要指向uwsgi綁定的接口,。（我們先假設(shè)uwsgi配置的是9090端口）

二,、安裝和配置uwsgi

安裝

使用yum或者pip均可安裝

yum install uwsgi
# 或者
pip install uwsgi

不過(guò)這里需要注意,，如果運(yùn)行uwsgi出現(xiàn)下面錯(cuò)誤

uwsgi: option '--http' is ambiguous; possibilities: '--http-socket' '--https-socket-modifier2' '--https-socket-modifier1' '--https-socket' '--http11-socket' '--http-socket-modifier2' '--http-socket-modifier1'
getopt_long() error

主要是用yum安裝的uwsgi,，缺少python的plugin,，可以安裝對(duì)應(yīng)的插件

yum install uwsgi-plugin-python
plugins = python （加在ini配置文件中）

配置

uwsgi可以使用命令行啟動(dòng),，也可以使用配置文件來(lái)啟動(dòng)，推薦使用配置文件來(lái)啟動(dòng)守護(hù)進(jìn)程,，配置文件內(nèi)容如下

[uwsgi]
socket = 127.0.0.1:9090
stats = 127.0.0.1:9293
workers = 4
# 項(xiàng)目根目錄
chdir = DJANGO_DIR
touch-reload = DJANGO_DIR
py-auto-reload = 1
# 在項(xiàng)目跟目錄和項(xiàng)目同名的文件夾里面的一個(gè)文件
module= DJANGO_NAME.wsgi
pidfile = /var/run/inner_manager.pid
daemonize = /data/uwsgi9090.log
# If you plan to receive big requests with lots of headers you can increase this value up to 64k (65535).
buffer-size=65535

這里以socket形式運(yùn)行uwsgi,，綁定了本地的9090端口，也就是上文nginx配置中uwsgi_pass指定的端口,。

大概解釋下幾個(gè)配置的含義：

chdir----應(yīng)用加載前chdir到指定目錄，一般設(shè)置為django的工程根目錄
touch-reload----如果修改/碰了指定的文件,，那么重載uWSGI
module----加載一個(gè)WSGI模塊的路徑,，如果django的話就指向?qū)?yīng)的wsgi文件模塊
buffer-size----設(shè)置請(qǐng)求的最大大小 (排除request-body),，這一般映射到請(qǐng)求頭的大小。默認(rèn)情況下,，它是4k,。如果你接收到了一個(gè)更大的請(qǐng)求 (例如,，帶有大cookies或者查詢字符串)，那么你也許需要增加它,。它也是一個(gè)安全度量,，所以調(diào)整為你的應(yīng)用需要,，而不是最大輸出,。該值如果太小會(huì)報(bào)錯(cuò)

具體參數(shù)含義可以到官方文檔查找

然后使用命令啟動(dòng)uwsgi進(jìn)程,，其中uwsgi.ini為上面內(nèi)容的配置文件

uwsgi -i uwsgi.ini

可以看下日志文件有沒(méi)有報(bào)錯(cuò),，或者看下ps -ef|grep uwsgi進(jìn)程有沒(méi)有跑起來(lái),。一定要確保進(jìn)程正常run起來(lái)才行

至此，DJANGO已經(jīng)通過(guò)nginx+uwsgi可以訪問(wèn)了

三,、配置訪問(wèn)vue

其實(shí)這里訪問(wèn)編譯好的vue靜態(tài)文件有很多方式，本文主要講述通過(guò)nginx直接訪問(wèn)和通過(guò)django路由訪問(wèn)

通過(guò)django路由訪問(wèn)

其實(shí)我們也可以直接通過(guò)http://ip:8080/ 來(lái)經(jīng)由django的路由來(lái)訪問(wèn)vue的頁(yè)面,。當(dāng)然要做到這樣要確保以下配置的正確

找到DJANGO_DIR根目錄下DJANGO_NAME同名文件夾下urls.py,，使用通用視圖創(chuàng)建最簡(jiǎn)單的模板控制器，增加一行路由

url(r'^$', TemplateView.as_view(template_name="index.html")),

這樣訪問(wèn)http://ip:8080/時(shí)會(huì)直接返回 index.html,。

上一步使用了Django的模板系統(tǒng),，所以需要配置一下模板使Django知道從哪里找到index.html。在project目錄的settings.py下：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [VUE_HTML_DIR],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

按照上述配置完成后,，結(jié)合前面配置好的nginx和uwsgi,，你已經(jīng)可以通過(guò)http://ip:8080/ 來(lái)訪問(wèn)到對(duì)應(yīng)的vue編譯好的VUE_HTML_DIR目錄下的index.html了，但是這時(shí)候你可能會(huì)有其他困擾,，比如找不到css樣式文件的問(wèn),，這經(jīng)常是靜態(tài)配置有誤導(dǎo)致找不到靜態(tài)文件的問(wèn)題,。

Django通過(guò)django.contrib.staticfiles來(lái)管理靜態(tài)文件，首先確保django.contrib.staticfiles已經(jīng)添加到INSTALLED_APPS,。

然后可以在DJANGO的配置文件settings.py中增加以下幾個(gè)配置：

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")
# Add for vuejs
STATICFILES_DIRS = [
    VUE_STATIC_DIR,
    # other static folders
]

STATIC_URL對(duì)外提供WEB訪問(wèn)時(shí)static的URL地址
STATIC_ROOT設(shè)置絕對(duì)路徑, 用來(lái)保存收集到的靜態(tài)文件，服務(wù)器最終也將從該路徑中獲取文件進(jìn)行轉(zhuǎn)發(fā),。在collectstatic運(yùn)行的時(shí)候會(huì)把STATICFILES_DIRS中的靜態(tài)文件拷貝到這個(gè)目錄中,達(dá)到從開(kāi)發(fā)環(huán)境到生產(chǎn)環(huán)節(jié)過(guò)程中移植靜態(tài)文件的作用。
STATICFILES_DIRS用來(lái)配置一些開(kāi)發(fā)環(huán)境下生成的靜態(tài)文件的地址,，即編譯好的VUE_STATIC_DIR

在url.py中添加路由

    url(r'^static/(?P<path>.*)$', static.serve,
        {'document_root': settings.STATIC_ROOT}, name='static'),

配置好以上配置后,，編譯好的靜態(tài)文件還在VUE_STATIC_DIR目錄下,，我們最終要執(zhí)行下面命令才能把STATICFILES_DIRS中的靜態(tài)文件拷貝到STATIC_ROOT這個(gè)目錄中，也就是最終生產(chǎn)環(huán)境指定的static的存放目錄

python manage.py collectstatic

那么為什么不直接手動(dòng)把構(gòu)建好的VUE_STATIC_DIR中的文件拷過(guò)來(lái)呢,，因?yàn)镈jango自帶的App：admin 也有一些靜態(tài)文件（css,js等），它會(huì)一并collect過(guò)來(lái),，畢竟nginx只認(rèn)項(xiàng)目跟目錄的靜態(tài)文件，它不知道django把它自己的需求文件放到哪了

這樣你訪問(wèn)django的admin網(wǎng)址http://ip:8080/admin 時(shí),，也不會(huì)出現(xiàn)找不到css的問(wèn)題了

當(dāng)然這種方式其實(shí)是通過(guò)django的路由來(lái)訪問(wèn)靜態(tài)文件的，一般的,，生產(chǎn)環(huán)境不會(huì)通過(guò)django來(lái)轉(zhuǎn)發(fā)靜態(tài)文件,，而是通過(guò)其他服務(wù)器進(jìn)行轉(zhuǎn)發(fā)，比如nginx,，apache等,，所以這里我們需要再配置下nginx的配置文件,，在8080的server中增加如下路徑的配置

   location /static/ {
        expires 30d;
        autoindex on;
        add_header Cache-Control private;
        alias  VUE_STATIC_DIR;
        access_log off;
    }

這樣訪問(wèn)靜態(tài)文件便會(huì)直接通過(guò)nginx來(lái)訪問(wèn)了,，不用擔(dān)心靜態(tài)文件訪問(wèn)導(dǎo)致Django的處理速度變慢了,。

通過(guò)nginx直接訪問(wèn)

如果你想直接通過(guò)nginx訪問(wèn)對(duì)應(yīng)的前端vue文件,，可以重新配置一個(gè)server來(lái)訪問(wèn)對(duì)應(yīng)的html文件，比如上面已經(jīng)使用了8080端口,，我們可以用默認(rèn)的80端口來(lái)配置個(gè)server,，其中root可以指向存放index.html文件的路徑,，/static/路徑下的root路徑可以指向html對(duì)應(yīng)的存放css和js的static文件夾，如果static就在index.html路徑下,，不指認(rèn)也可以,。直接修改/etc/nginx.conf即可,，里面已經(jīng)有配置好的80端口的server

配置如下所示

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         VUE_HTML_DIR;    

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }
        
        location /static/ {
            root  VUE_STATIC_DIR;
            access_log off;
         }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

這樣我們可以通過(guò)http://ip:80/ 來(lái)訪問(wèn)vue編譯好的頁(yè)面，使用http://ip:8080/ 訪問(wèn)django配置的cgi請(qǐng)求

四,、通過(guò)supervisor管理進(jìn)程

上面我們已經(jīng)用到了uwsgi,，后面可能還會(huì)用到redis,、celery,，都需要開(kāi)啟守護(hù)進(jìn)程,，其中celery自身還不支持守護(hù)進(jìn)程。那么如何管理這么多進(jìn)程呢,，這時(shí)候可以考慮下supervisor

安裝

使用pip安裝即可

pip install supervisor

配置

我們可以配置redis,celery,uwsgi進(jìn)去,，比如向下面一樣

[program:redis]
;指定運(yùn)行目錄
directory=%(here)s/
;執(zhí)行命令（redis-server redis配置文件路徑）
command=redis-server /etc/redis.conf

;啟動(dòng)設(shè)置
numprocs=1          ;進(jìn)程數(shù)
autostart=true      ;當(dāng)supervisor啟動(dòng)時(shí),程序?qū)?huì)自動(dòng)啟動(dòng)
autorestart=true    ;自動(dòng)重啟

;停止信號(hào)
stopsignal=INT


[program:celery.worker.default]
;指定運(yùn)行目錄
directory=%(here)s/
;運(yùn)行目錄下執(zhí)行命令
command=celery -A DjangoProject worker --loglevel info --logfile log/celery_worker.log -Q default -n %%h-%(program_name)s-%(process_num)02d
process_name=%(process_num)02d

;啟動(dòng)設(shè)置 
numprocs=2          ;進(jìn)程數(shù)
autostart=true      ;當(dāng)supervisor啟動(dòng)時(shí),程序?qū)?huì)自動(dòng)啟動(dòng) 
autorestart=true    ;自動(dòng)重啟
 
;停止信號(hào),默認(rèn)TERM 
;中斷:INT (類(lèi)似于Ctrl+C)(kill -INT pid)，退出后會(huì)將寫(xiě)文件或日志(推薦) 
;終止:TERM (kill -TERM pid) 
;掛起:HUP (kill -HUP pid),注意與Ctrl+Z/kill -stop pid不同 
;從容停止:QUIT (kill -QUIT pid) 
stopsignal=INT

[program:uwsgi]
;指定運(yùn)行目錄
directory=%(here)s/
;運(yùn)行目錄下執(zhí)行命令
command=uwsgi -i conf/uwsgi/uwsgi9090.ini

;啟動(dòng)設(shè)置
numprocs=1          ;進(jìn)程數(shù)
autostart=true      ;當(dāng)supervisor啟動(dòng)時(shí),程序?qū)?huì)自動(dòng)啟動(dòng)
autorestart=true    ;自動(dòng)重啟

;停止信號(hào),默認(rèn)TERM
;中斷:INT (類(lèi)似于Ctrl+C)(kill -INT pid),，退出后會(huì)將寫(xiě)文件或日志(推薦)
;終止:TERM (kill -TERM pid)
;掛起:HUP (kill -HUP pid),注意與Ctrl+Z/kill -stop pid不同
;從容停止:QUIT (kill -QUIT pid)
stopsignal=INT

使用

啟動(dòng)supervisor輸入如下命令,，使用具體的配置文件執(zhí)行：

supervisord -c supervisord.conf

關(guān)閉supervisord需要通過(guò)supervisor的控制器：

supervisorctl -c supervisord.conf shutdown

重啟supervisord也是通過(guò)supervisor的控制器：

supervisorctl -c supervisord.conf reload

一些特殊的變量

%(here)s   配置文件所在路徑
(program_name)s   program的名字
%(process_num)02d  多進(jìn)程時(shí)的進(jìn)程號(hào)

注意：command中如果含有%，需要進(jìn)行轉(zhuǎn)義%%

多進(jìn)程時(shí)如果不指定process_name會(huì)遇到如下錯(cuò)誤

Error: Format string 'celery -A INTProject worker --loglevel info --logfile log/celery_worker.log -Q diff_task,caller_task -n %h' for 'program:celery.worker.mac.command' is badly formatted: incomplete format in section 'program:celery.worker.mac' (file: 'supervisord.conf')

中間可能遇到的坑

*8107 recv() failed (104: Connection reset by peer) while reading response header from upstream, client 錯(cuò)誤

使用django+uwsgi+nginx,，發(fā)現(xiàn)如下報(bào)錯(cuò)

2018/10/08 14:34:33 [error] 12283#0: *8107 recv() failed (104: Connection reset by peer) while reading response header from upstream, client: 9.19.161.66, server: 132.232.50.225, request: "GET /auth/info?token=ZXlKaGJHY2lPaUprWldaaGRXeDBJaXdpZEhsd0lqb2lTbGRRSW4wOjFnOVA3aDp0bVZYcmg3XzJPR3RXSHJrbXFLRVdCZEpUdXc_ZXlKMWMyVnlibUZ0WlNJNkltVjBhR0Z1Wm1GdUlpd2lhV0YwSWpveE5UTTRPVGd3TkRjekxqZzVNekk1TVgwOjFnOVA3aDpMVXRHZkFiQkhrRTNaenFnS3NuS1RvOHBOMGM_3bdf34e6de16096f9982015a2382d3c8 HTTP/1.1", upstream: "uwsgi://127.0.0.1:9090", host: "int.", referrer: "http://int./"

I finally found a reference to fastcgi and a 502 bad gateway error (https://support./hc/...). That lead me to look for a buffer size limit in the uwsgi configuration which exists as buffer-size. The default value is 4096. From the documentation, it says: If you plan to receive big requests with lots of headers you can increase this value up to 64k (65535).

意思是uwsgi中有一項(xiàng)配置是buffer-size,，表明收到的最大請(qǐng)求size，默認(rèn)是4096,，可以將其改成65535

buffer-size=65535

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買(mǎi)等信息,，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請(qǐng)點(diǎn)擊一鍵舉報(bào),。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：看見(jiàn)就非常 > 《待分類(lèi)》

舉報(bào)/認(rèn)領(lǐng)