使用docker compose搭建django+vue工程

随着虚拟化技术的发展，愈来愈多的web工程采用docker进行部署运维。咱们尝试使用docker-compose编排一个后端基于django，前端基于vue，数据库为postgresql并使用nginx进行反向代理的web工程。

工程准备

Docker

• 安装Docker
• 安装docker-compose

django

1. 在python3.7的环境下建立 django-admin startproject dockerdemo
2. 修改settings.py文件
   • 修改 DEBUG=False
   • ALLOWED_HOSTS = ['127.0.0.1', 'web']
   • 将静态文件收集路径添加进 STATIC_ROOT，笔者设置为static
   • 添加 STATICFILES_DIRS，此项配置后 django 的 collectstatic 会在此路径下收集静态文件到 STATIC_ROOT 的路径中去。
   • 另外，静态文件的处理笔者采用的是 whitenoise 的方案进行处理，因此须要在中间件中配置一下whitenoise的处理中间件。

     'django.middleware.security.SecurityMiddleware',
     'whitenoise.middleware.WhiteNoiseMiddleware',
     复制代码

   • 同时设置 STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
   • 修改数据库信息（可选），针对实际使用的数据库进行配置，也能够采用django默认的sqlite，笔者此处演示了postgresql的简单配置
   • TEMPLATES下的DIRS配置为 os.path.join(BASE_DIR, 'web', 'dist')
3. 配置views.py和urls.py将首页设为vue的index.html

vue

1. 使用vue-cli3建立了一个简单的vue工程
2. 配置 npm run build 的静态文件目录到 dist/static 中

nginx

准备nginx的配置文件，进行端口转发的设置。

镜像和编排

咱们先肯定一下部署一个web工程所须要的环节。在这里笔者绘制了一张流程图。

按照流程图的顺序，咱们编写一下Dockerfile和docker-compose.yml

数据库

数据库须要先准备一下web工程使用的用户和数据库，这里涉及到一个点，就是如何初始化数据库的问题。这里以postgresql举例。

官方文档中提供了两种示例，一种是配置环境变量：

• POSTGRES_DB
• POSTGRES_USER
• POSTGRES_PASSWORD

另外一种是将初始化脚本拷贝进/docker-entrypoint-initdb.d/ 中，镜像在初始化的时候会执行文件夹下的全部脚本，咱们能够在脚本中建立数据库和用户。这里给出脚本的一种方式。

#!/bin/bash
set -e

psql -v ON_ERROR_STOP=1 --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" <<-EOSQL
	CREATE USER $DATABASE_USER;
	CREATE DATABASE $DATABASE_NAME;
	GRANT ALL PRIVILEGES ON DATABASE $DATABASE_NAME TO $DATABASE_USER;
EOSQL
复制代码

须要注意的是，初始化操做尽在第一次build的时候又进行初始化。之后若是终止了docker-compose或者使用 docker-compose stop指令以后再启动是不从新初始化的。只有在 docker-compose down命令执行事后，再执行启动命令才会进行初始化。

web

咱们的web工程在一个Dockerfile分为构建和运行两部份内容。分别使用node:8镜像做为前端构建的基础镜像和python:3.7做为django工程运行的基础镜像。比较有意思的点在于一份Dockerfile是能够分阶段构建的，也就是能够编写多个FROM而且用as给一个别名，后面的镜像能够经过这个别名获取该镜像的一些内容，好比COPY --from等方式。

前端

前端内容比较简单，就是将代码拷到工做目录下，配置一下淘宝的镜像代理，而后执行 npm run build 构建一下前端静态文件便可。

django

pip安装一下依赖，另外在安装一下gunicorn。因为若是在windows环境下进行开发，gunicorn是没法安装的，因此咱们这里单独放进Dockerfile中进行安装。使用的镜像是清华大学提供的镜像地址。依赖安装完成后，执行一下静态文件的收集指令便可。

nginx

准备一份配置文件，监听80端口并将接收到的请求所有转发给django工程。笔者准备了比较简单的一份配置文件。其余具体需求还需根据场景进行设置。

server {
    listen 80;
    server_name localhost;

    location / {
      proxy_pass http://web:8123;
    }
}
复制代码

ignore

编写 .dockerignore 文件忽略掉一些不须要打包的文件，如node_modules等。

docker-compose.yml

这份文件用来编排一个工程，主要内容是上面描述的web, nginx和postgres这3项。除此以外还有一些细节。

• nginx和postgres都须要将数据卷挂载到存放相应配置和数据的地方
• 数据库的相关信息用环境变量来读取，所以咱们准备一份.env文件，并经过env_file指定读取的环境变量文件。
• web中咱们对command进行了一些设定，延迟8秒是为了等待数据库启动完成。接着进行数据库的数据迁移，最后用gunicorn进行启动。
• 在镜像中配置depends_on或者links能够达到利用服务名称进行网络通讯的效果，另外depends_on还能够控制容器的启动顺序进行以来控制。

效果

访问 http://localhost/ 或 http://localhost/admin/ 能够查看最终起起来的效果。

代码地址

github.com/will4906/do…

参考连接

• stackoverflow.com/questions/3…
• docs.docker.com/v17.09/get-…
• www.cnblogs.com/yanshicheng…
• cloud.tencent.com/developer/a…