這幾天研究了一下vue + django 前后端分離框架歇终，順便在自己的阿里云上部署了一下缆毁，主要在django與nginx的交互上遇到了一些問題贰健，在此做記錄與分享
github地址 https://github.com/qianhaoq/django_with_vue
一. django + vue的一些問題
由于我使用了django +Vue 的前后端分離技術(shù)進行開發(fā)瞄崇，在構(gòu)建時會遇到一些問題盔腔，可以參考
https://zhuanlan.zhihu.com/p/25080236
第一步
pip3 install django-cors-headers
第二步
在settings.py 的 MIDDLEWARE 中加入corsheaders（注意順序)
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
第三步
在settings.py 中添加
CORS_ORIGIN_ALLOW_ALL = True
二. 在nginx 上配置django
1.nginx
安裝nginx
sudo apt install nginx
nginx基本操作命令
# 啟動nginx服務(wù)
sudo /etc/init.d/nginx start
# 關(guān)閉服務(wù)
sudo /etc/init.d/nginx stop
# 重啟nginx服務(wù)( restart = stop + start )
sudo /etc/init.d/nginx restart
# 重新加載nginx配置文件
sudo /etc/init.d/nginx reload
# 注 service nginx reload 重新加載配置文件
# reload不用重啟服務(wù)，直接重新加載配置文件琳拨，客戶端感覺不到服務(wù)異常瞭恰，平滑切換。
2.uwsgi
why django + uwsgi + nginx ?
概念說明：
- APP（應(yīng)用程序）狱庇，就是開發(fā)者寫的應(yīng)用程序惊畏，例如django，bottle這些密任。記錄怎么處理客戶端發(fā)來的請求的邏輯部分颜启。
- WSGI，是一個協(xié)議浪讳，Python用于Web開發(fā)的協(xié)議
- uWSGI缰盏，是一個程序，充當Web服務(wù)器或中間件。
- 如果架構(gòu)是Nginx+uWSGI+APP口猜，uWSGI是一個中間件
- 如果架構(gòu)是uWSGI+APP负溪，uWSGI是一個服務(wù)器
- uwsgi，是uWSGI程序?qū)崿F(xiàn)的一個自有的協(xié)議济炎。
Web協(xié)議出現(xiàn)順序：
CGI -> FCGI -> WSGI -> uwsgi
- CGI川抡，最早的協(xié)議
- FCGI，比CGI快
- WSGI冻辩，Python專用的協(xié)議
- uwsgi猖腕，比FCGI和WSGI都快，是uWSGI項目自有的協(xié)議恨闪，主要特征是采用二進制來存儲數(shù)據(jù)倘感，之前的協(xié)議都是使用字符串，所以在存儲空間和解析速度上咙咽，都優(yōu)于字符串型協(xié)議.官方介紹
傳輸原理
web client <-> nginx <-> socket <-> uwsgi <-> django
安裝uwsgi
sudo apt-get install build-essential python3-dev
sudo pip3 install uwsgi
為了測試uwsgi ,可以寫一個test.py 如下
# test.py
def application(env, start_response):
start_response('200 ok', [('Content-Type', 'text/html')])
return ["Hello World"]
運行命令
uwsgi --http :8000 --wsgi-file test.py
然后打開瀏覽器老玛，輸入地址 http://127.0.0.1:8000
如果顯示 "hello world"，則運行成功钧敞，下面3個環(huán)節(jié)正常
web client <-> uWSGI <-> Python
這邊有一個bug蜡豹，記錄一下，
uwsgi --http :8001 --wsgi-file test.py
*** Starting uWSGI 2.0.15 (64bit) on [Wed Jan 10 20:26:57 2018] ***
compiled with version: 5.4.0 20160609 on 08 January 2018 21:11:57
os: Linux-4.10.0-43-generic #47~16.04.1-Ubuntu SMP Wed Dec 13 19:23:27 UTC 2017
nodename: qh-G752VT
machine: x86_64
clock source: unix
detected number of CPU cores: 8
current working directory: /home/qh/test
detected binary path: /usr/local/bin/uwsgi
!!! no internal routing support, rebuild with pcre support !!!
*** WARNING: you are running uWSGI without its master process manager ***
關(guān)鍵為!!! no internal routing support, rebuild with pcre support !!!
需要先卸載uwsgi,安裝pcre路由
sudo pip3 uninstall uwsgi
sudo apt install libpcre3 libpcre3-dev
sudo pip3 install uwsgi
測試django與uwsgi是否正常
首先切換到django項目根目錄下（即manage.py 所在目錄）
通過uwsgi 運行django
我的項目目錄樹
comic
├── backend
├── comic
├── comic_uwsgi.ini
├── db.sqlite3
├── frontend
├── manage.py
├── media
├── nginx.conf
├── static
└── test.py
# 注意溉苛，此處的comic镜廉，即你的項目名稱
uwsgi --http :8000 --module comic.wsgi
運行以上命令后，訪問http://127.0.0.1:8000 查看django是否正常運行
3. 配置nginx
默認nginx配置文件為/etc/nginx/sites-enabled/default愚战，它是指向sites-available/default的一個軟鏈接
default -> /etc/nginx/sites-available/default
我們可以刪除這個軟鏈接娇唯，然后建一個自己的nginx.conf，再在sites-enabled下軟鏈接到自己的配置文件
或者寂玲，也可以直接寫改default（通常不建議這樣做塔插，也可以先備份一下然后直接修改）
此處貼一下我的nginx.conf
upstream django {
server unix:////home/qh/git/django_with_vue/comic/comic.sock;
# server 127.0.0.1:8001;
}
# Default server configuration
#
server {
listen 80;
charset utf-8;
server_name .example.com;
#root /home/qh/git/django_with_vue/comic;
location /media {
alias /home/qh/git/django_with_vue/comic/media;
}
location /static {
alias /home/qh/git/django_with_vue/comic/static;
}
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
# try_files $uri $uri/ =404;
uwsgi_pass django;
include /etc/nginx/uwsgi_params;
}
}
注意，修改完配置后需要用
sudo /etc/init.d/nginx reload
重載配置文件拓哟，最好再restart一下
sudo /etc/init.d/nginx restart
4. django端配置
部署static文件
在django的settings.py文件中加入下一行內(nèi)容
STATIC_ROOT = os.path.join(BASE_DIR, "static/")
然后運行
python3 manage.py collectstatic
順便貼一下我的comic/wsgi.py
# wsgi.py
import os
import sys
from os.path import dirname,abspath
from django.core.wsgi import get_wsgi_application
PROJECT_DIR = dirname(dirname(abspath(__file__)))
sys.path.insert(0,PROJECT_DIR)
os.environ["DJANGO_SETTINGS_MODULE"] = "comic.settings"
application = get_wsgi_application()
以及在django的settings.py文件中配置ALLOWED_HOSTS想许，關(guān)閉debug模式
DEBUG = False
ALLOWED_HOSTS = ['*']
測試uwsgi是否能拉起django app
# 若權(quán)限為664,可能出現(xiàn)502的情況，最好配置為666
uwsgi --socket comic.sock --module comic.wsgi --chmod-socket=666
打開瀏覽器断序，訪問http://127.0.0.1流纹，查看django項目是否正常運行（因為我的配置文件里用的80端口，所以不用額外指定端口）
若可以正常運行违诗，則可以通過ini配置文件來指定這一切
在manage.py 的相同目錄下捧颅，寫一個comic_uwsgi.ini
# comic_uwsgi.ini file
[uwsgi]
# Django-related settings
# the base directory (full path)
chdir = /home/qh/git/django_with_vue/comic
# Django's wsgi file
module = comic.wsgi
# the virtualenv (full path)
#home = /path/to/virtualenv
# process-related settings
# master
master = true
# maximum number of worker processes
processes = 2
# the socket (use the full path to be safe
socket = /home/qh/git/django_with_vue/comic/comic.sock
# ... with appropriate permissions - may be needed
chmod-socket = 666
# clear environment on exit
vacuum = true
運行方式為
uwsgi --ini comic_uwsgi.ini
如果要開機啟動的話，添加到/etc/rc.local 中即可
由于用到了mongoDB,restful API,django_filters, 需要額外安裝以下依賴
sudo pip3 install mongoengine
sudo pip3 install django-rest-framework-mongoengine
sudo pip3 install django-rest-framework
sudo pip3 install django_filters django_filter
同時還要注意mongodb的安裝與配置
sudo apt install mongo
導入json
mongoimport --db comic --collection pokemon --file items.json
vue前端文件有改動以后需要重新執(zhí)行下列語句生效
python3 manage.py collectstatic
