Press "Enter" to skip to content

Docker+Django+Vue联合开发环境搭建

项目目标:开启一个新项目的时候,初始化一堆乱七八糟的环境和基础框架是最费心费力了,可能你两三天都没办法开始写业务逻辑或者页面。所以,如果能有一个比较万能的脚手架项目,以后直接复制这个代码出来开始写自己的业务逻辑就好办多了。

目前比较理想的项目框架是Vue做单页面前端,Django(或者其它语言)只做后端restful接口,但发布时是要作为一个站点一起发布的。另外还要考虑到开发过程中的方便性,因此才有了这篇示例文章,作为一个开始新项目的简单指引。

首先,需要做两个Docker镜像,一个Nginx,一个Django+Vue环境。可以基于alpine linux从干净环境开始安装,Nginx镜像也可以直接下载官方版本,自己只需要写站点的conf文件就可以了,它只负责一件事:把站点的请求转发到vue的8080端口,同时把/api/目录的请求转发到django的8000端口。

然后开始建设项目结构:(映射当前目录到django+vue容器,并在docker中执行以下命令)

django-admin startproject website_t
cd website_t
django-admin startapp backend
vue init webpack frontend
cd frontend
npm install

这样外层的django负责整个站点,api接口实现在backend的views里面,当然业务逻辑很多的时候直接使用多个app目录分别负责就可以了,在urls里面按照api/+业务子目录的形式来区分。frontend目录就是vue的项目目录,该目录不包含后端逻辑,纯前端代码。

在backend/views.py里面增加一个方法:

from django.http import JsonResponse
def index(request):
    return JsonResponse({'foo': 'bar'})

修改website_t下面的urls.py,添加一个api/目录的URL映射: path(‘api/’, include(‘backend.urls’)),
同时添加backend下面的urls.py文件,增加一个URL定义:

from django.urls import path, include
from backend import views
urlpatterns = [
    path('', views.index),
]

这样在启动django站点之后访问/api/应该就可以看到这个返回的json信息。

接下来启动一个vue容器,直接映射frontend这一级目录,并指定启动命令为npm run dev,这样vue的开发环境就启动起来了,并可以通过8080端口访问,修改了vue的文件之后它也是即时生效的。
然后再启动一个django容器,映射website_t这一级目录,并指定启动命令为python manage.py runserver 0.0.0.0:8000,这样django的开发环境就启动起来了,可以通过8000端口访问,而且修改了django的python文件以后它也是即时生效的。
然后需要启动一个nginx容器,分别用vue和django的别名link到另外两个容器上,同时映射一个站点conf文件到/etc/nginx/conf.d目录,内容是:

server{
    listen 80;
    server_name _;
    location / {
        proxy_pass http://vue:8080;
    }
    location /api/ {
        proxy_pass http://django:8000;
    }
}

这样nginx容器启动以后,在浏览器里面访问localhost,打开的静态页面就是Vue的页面,在Vue的页面里使用ajax请求/api/目录下的接口,就可以直接访问到django的代码。
docker的启动脚本差不多是这样的:

docker run -d --rm --name django -v $PWD:/app djangovue python manage.py runserver 0.0.0.0:8000
docker run -d --rm --name vue -v $PWD/frontend:/app djangovue npm run dev
docker run -d --rm --name nginx -v $PWD/nginxconf:/etc/nginx/conf.d -p 80:80 --link django:django --link vue:vue nginx

PS:默认情况下这样访问Vue还会有些问题,会报Invalid Host Header的错误,这个是webpack的一个限制,需要在frontend/build/webpack.dev.conf.js里面的devServer段添加一个配置项:disableHostCheck:true,同时需要修改frontend/conf/index.js里面的host配置为:host: ‘0.0.0.0’,这样配置以后才能正常访问。

如果某次代码写错导致vue或者django崩了,重启这个docker容器即可。

至此整个开发环境就算完成了,可以开始写代码了。

到正式发布站点的时候,django需要配置成使用uwsgi来运行,而不是使用manage.py runserver,vue需要在frontend目录下运行一次npm run build,打包后的HTML和JS,CSS等文件在frontend/dist目录下。
配置生产环境的Nginx站点conf文件,项目root目录指向frontend/dist目录,然后将api/转发给uwsgi,其它路径全部通过

location / {
    try_files $uri $uri/ /index.html;
}

来处理,即可实现静态文件和接口文件的访问。(理论上django不再处理除restful接口外的任何请求,否则还要处理Django的static文件)