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/nginx/nginx.conf  在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可以使用命令行启动，也可以使用配置文件来启动，推荐使用配置文件来启动守护进程，配置文件内容如下

[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路由访问

其实我们也可以直接通过http://ip:8080/ 来经由django的路由来访问vue的页面。当然要做到这样要确保以下配置的正确

找到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': 'django.template.backends.django.DjangoTemplates',
     'DIRS': [‘/data/dist’],
     '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',
           ],
        },
    },
]

按照上述配置完成后，结合前面配置好的nginx和uwsgi，你已经可以通过http://ip:8080/ 来访问到对应的vue编译好的VUE_HTML_DIR目录下的index.html了，但是这时候你可能会有其他困扰，比如找不到css样式文件的问，这经常是静态配置有误导致找不到静态文件的问题。

Django通过django.contrib.staticfiles来管理静态文件，首先确保django.contrib.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.*)$', static.serve,{'document_root': settings.STATIC_ROOT}, name='static'),

如下图所示:

配置好以上配置后，编译好的静态文件还在VUE_STATIC_DIR目录下，我们最终要执行下面命令才能把STATICFILES_DIRS中的静态文件拷贝到STATIC_ROOT这个目录中，也就是最终生产环境指定的static的存放目录

python manage.py collectstatic

这样你访问django的admin网址http://ip:8080/admin 时，也不会出现找不到css的问题了

当然这种方式其实是通过django的路由来访问静态文件的，一般的，生产环境不会通过django来转发静态文件，而是通过其他服务器进行转发，比如nginx，apache等

通过nginx直接访问

如果你想直接通过nginx访问对应的前端vue文件，可以重新配置一个server来访问对应的html文件，比如上面已经使用了8080端口，我们可以用默认的80端口来配置个server，其中root可以指向存放index.html文件的路径，/static/路径下的root路径可以指向html对应的存放css和js的static文件夹，如果static就在index.html路径下，不指认也可以。直接修改/etc/nginx.conf即可，里面已经有配置好的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 {
        }  

如下图所示:

这样我们可以通过http://ip:80/ 来访问vue编译好的页面，使用http://ip:8080/ 访问django配置的cgi请求