Django+Vue部署说明：后⽂中出现的以下字符串均表⽰具体的路径或者名称，含义如下：
DJANGO_DIR---表⽰django的⼯程根⽬录 例如：/data/Datalable
DJANGO_NAME---表⽰django的⼯程名称 例如Datalable
VUE_HTML_DIR---表⽰vue的index.html路径 例如:/data/dist
VUE_STATIC_DIR---表⽰vue的static的路径 例如:/data/dist/static
修改配置⽂件nginx 打开 vim /etc/f  在http中加⼊下⾯的配置⽂件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绑定的接⼝。（我们先假设uwsgi配置的是9090端⼝）⼆、安装和配置uwsgi
安装
使⽤yum或者pip均可安装
yum install uwsgi
# 或者
pip install uwsgi
配置
uwsgi可以使⽤命令⾏启动，也可以使⽤配置⽂件来启动，推荐使⽤配置⽂件来启动守护进程，配置⽂件内容如下
nginx部署前端项目[uwsgi]
socket = 127.0.0.1:9090
#
下⾯
IP
端⼝没弄明⽩做什么
stats = 127.0.0.1:9293
workers = 4
# 项⽬根⽬录
chdir
= /test_service/DataLable
touch-reload = /test_service/DataLable
py-auto-reload = 1
# 在项⽬跟⽬录和项⽬同名的⽂件夹⾥⾯的⼀个⽂件
module= DataLable.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形式运⾏uwsgi，绑定了本地的9090端⼝，也就是上⽂nginx配置中uwsgi_pass指定的端⼝。
⼤概解释下⼏个配置的含义：
1. chdir----应⽤加载前chdir到指定⽬录，⼀般设置为django的⼯程根⽬录
2. touch-reload----如果修改/碰了指定的⽂件，那么重载uWSGI
3. module----加载⼀个WSGI模块的路径，如果django的话就指向对应的wsgi⽂件模块
4. buffer-size----设置请求的最⼤⼤⼩ (排除request-body)，这⼀般映射到请求头的⼤⼩。默认情况下，它是4k。如果你接收到了⼀个
更⼤的请求 (例如，带有⼤cookies或者查询字符串)，那么你也许需要增加它。它也是⼀个安全度量，所以调整为你的应⽤需要，⽽不是最⼤输出。该值如果太⼩会报错
然后使⽤命令启动uwsgi进程，其中uwsgi.ini为上⾯内容的配置⽂件
uwsgi -i uwsgi.ini
可以看下⽇志⽂件有没有报错，或者看下ps -ef|grep uwsgi进程有没有跑起来。⼀定要确保进程正常run起来才⾏
⾄此，DJANGO已经通过nginx+uwsgi可以访问了
三、配置访问vue
其实这⾥访问编译好的vue静态⽂件有很多⽅式，本⽂主要讲述通过nginx直接访问和通过django路由访问
通过django路由访问
到DJANGO_DIR根⽬录下DJANGO_NAME同名⽂件夹下urls.py，使⽤通⽤视图创建最简单的模板控制器，增加⼀⾏路由
vim /test_service/DataLable/DataLable
url(r'^$', TemplateView.as_view(template_name="index.html")),
上⼀步使⽤了Django的模板系统，所以需要配置⼀下模板使Django知道从哪⾥到index.html。在project⽬录的settings.py下：
TEMPLATES = [
{'BACKEND': 'plate.backends.django.DjangoTemplates',
'DIRS': [‘/data/dist’],
'APP_DIRS': True,
'OPTIONS': {'context_processors': [
't_processors.debug',
'quest',
't_processors.auth',
'ssages',
],
},
},
]
Django通过ib.staticfiles来管理静态⽂件，⾸先确保ib.staticfiles已经添加到INSTALLED_APPS。默认都是有的
然后可以在DJANGO的配置⽂件settings.py中增加以下⼏个配置：
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")
# Add for vuejs
STATICFILES_DIRS = [
‘/data/dist/static’,
# other static folders
]
如下图所⽰:
STATIC_URL对外提供WEB访问时static的URL地址
STATIC_ROOT设置绝对路径, ⽤来保存收集到的静态⽂件，服务器最终也将从该路径中获取⽂件进⾏转发。在collectstatic运⾏的时候会把STATICFILES_DIRS中的静态⽂件拷贝到这个⽬录中，达到从开发环境到⽣产环节过程中移植静态⽂件的作⽤。
STATICFILES_DIRS⽤来配置⼀些开发环境下⽣成的静态⽂件的地址，即编译好的VUE_STATIC_DIR
在url.py中添加路由
from django.views.static import server
url(r'^static/(?P<path>.*)$', static.serve,{'document_root': settings.STATIC_ROOT}, name='static'),
如下图所⽰:
配置好以上配置后，编译好的静态⽂件还在VUE_STATIC_DIR⽬录下，我们最终要执⾏下⾯命令才能把STATICFILES_DIRS中的静态⽂件拷贝到STATIC_ROOT这个⽬录中，也就是最终⽣产环境指定的static的存放⽬录
python manage.py collectstatic
当然这种⽅式其实是通过django的路由来访问静态⽂件的，⼀般的，⽣产环境不会通过django来转发静态⽂件，⽽是通过其他服务器进⾏转发，⽐如nginx，apache等
通过nginx直接访问
如果你想直接通过nginx访问对应的前端vue⽂件，可以重新配置⼀个server来访问对应的html⽂件，⽐如上⾯已经使⽤了8080端⼝，我们可以⽤默认的80端⼝来配置个server，其中root可以指向存放index.html⽂件的路径，/static/路径下的root路径可以指向html对应的存放css和js的static⽂件夹，如果static就在index.html路径下，不指认也可以。直接修改/f即可，⾥⾯已经有配置好的80端⼝的server
配置如下所⽰
server {
listen      80 default_server;
listen      [::]:80 default_server;
server_name  _;
root        /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
root /test_service/dist;
index index.html;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
如下图所⽰:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。