Ant Design Pro 的 Docker 部署方式

背景

Ant Design Pro是一个企业级中后台解决方案，在Ant Design组件库的基础上，提炼出典型模板/业务组件/通用页等，在此基础上可以使开发者快速的完成中后台应用的开发。

在使用Ant Design Pro的过程当中，能够发现它提供了一系列基于docker的开发部署方式，以下图。可是官方文档中并无具体的介绍，本文的主要目的就是解析Ant Design Pro中对于docker的使用。

docker相关

为何使用docker?

• 环境部署是全部团队都必须面对的问题，随着系统愈来愈大，依赖的服务也愈来愈多，例如：Web服务器 + MySql数据库 + Redis缓存等
• 依赖服务不少，本地搭建一套环境成本愈来愈高，初级人员很难解决环境部署中的一些问题
• 服务的版本差别及OS的差别均可能致使线上环境BUG，项目引入新的服务时全部人的环境须要从新配置

任何安装过Docker的机器均可以运行这个容器得到一样的结果, 同的容器，从而彻底消除了不一样环境，不一样版本可能引发的各类问题。例如，在前端开发中一般会遇到nodejs版本问题，就能够经过docker的方式进行解决。

docker中的概念

Docker有三个基本概念：镜像（image）,容器（container）,仓库（repository）。

• 镜像（image）: 镜像中包含有须要运行的文件。镜像用来建立container，一个镜像能够运行多个container；镜像能够经过Dockerfile建立，也能够从Docker hub/registry上下载。
• 容器（container）: 容器是Docker的运行组件，启动一个镜像就是一个容器，容器是一个隔离环境，多个容器之间不会相互影响，保证容器中的程序运行在一个相对安全的环境中。
• 仓库（repository）: 共享和管理Docker镜像，用户能够上传或者下载上面的镜像，官方地址为 registry.hub.docker.com/ （相似于github对源代码的管理），也能够搭建本身私有的Docker registry。

常见docker命令

• 使用当前目录Dockerfile建立镜像，标签为xxx:v1: docker build -t xxx:v1 .
• 建立新容器并运行: docker run --name mynginx -d nginx:latest
• 在容器中开启交互终端：docker exec -i -t container_id /bin/bash
• 启动容器：docker start container_name/container_id
• 中止容器：docker stop container_name/container_id
• 重启容器：docker restart container_name/container_id

什么是docker-compose?

实际项目中，不可能只单单依赖于一个服务，例如一个常见的Web项目可能依赖于: 静态文件服务器，应用服务器，Mysql数据库等。咱们能够经过分别启动单个镜像，并把镜像绑定到本地对应端口的形式进行部署，达到容器可通讯的目的。可是为了更方便的管理多容器的状况，官方提供了docker-compose的方式。docker-compose是Docker的一种编排服务，是一个用于在 Docker 上定义并运行复杂应用的工具，可让用户在集群中部署分布式应用。

compose中有两个重要的概念：

• 服务 (service)：一个应用的容器，实际上能够包括若干运行相同镜像的容器实例。
• 项目 (project)：由一组关联的应用容器组成的一个完整业务单元，在docker-compose.yml 文件中定义。

一个项目能够由多个服务（容器）关联而成，compose 面向项目进行管理，经过子命令对项目中的一组容器进行便捷地生命周期管理。

脚本解析

本地开发运行

npm run docker:dev该命令使用docker-compose up命令经过docker-compose.dev.yml模板启动相关容器。

docker-compose.dev.yml内容以下：

这个compose文件定义了一个服务：ant-design-pro_dev。该服务使用Dockerfile.dev构建了当前镜像。将该容器内部的8000端口映射到host的8000端口。为了容器和host的数据同步，该容器挂载三个数据卷：../src:/usr/src/app/src, ../config:/usr/src/app/config, ../mock:/usr/src/app/mock。它将主机目录映射到容器，这样容器内的三个目录能够跟host对应的三个目录作到数据同步。

Dockerfile.dev内容以下：

该容器使用 node:latest做为基础镜像，并设定 /usr/src/app做为工做目录。首先将 package.json文件复制到该目录，并安装相关的依赖包，以后复制该文件夹下全部内容到该目录下，并使用 npm run start启动应用。因为数据卷的存在，本地的三个文件夹下的任何修改均可以同步到容器中，达到更新的目的。

至此，整个开发环境搭建完成。

生产环境

npm run docker-pro:dev该命令使用docker-compose up命令经过docker-compose.yml模板启动相关容器。

docker-compose.yml内容以下：

这个compose文件定义了两个服务： ant-design-pro_build和 ant-design-pro_web。

ant-design-pro_build使用Dockerfile构建镜像。

Dockerfile内容以下：

该镜像实际只作了文件的构建（npm run build），构建的结果存放在/dist目录中，并经过数据卷共享该目录。由此看来，该容器只做为一个数据卷容器为其余镜像提供数据服务。

ant-design-pro_web使用nginx镜像，nginx容器的80端口绑定host的80端口，并将ant-design-pro_build的dist目录挂载到nginx服务器/usr/share/nginx/html目录，将nginx.conf挂载到/etc/nginx/conf.d/default.conf。

容器视图以下：

经过http://localhost:80就能够访问该部署了前端静态文件的nginx容器了。

生产镜像构建

npm run docker-hub:build命令经过docker build构建Dockerfile.hub定义的镜像。

Dockerfile.hub文件定义以下：

该Dockerfile使用了多阶段构建的方式，第一阶段构建出编译后的前端资源文件，第二阶段将第一阶段构建出来的前端资源文件复制到nginx的指定目录，构建出一个包含前端静态资源以及nginx.conf的镜像。

在指定服务器直接运行该镜像，即可以使用服务。

顺便提一句，这个Dockerfile.hub文件是由我提给官方并合并到master分支的，详情见：github.com/ant-design/… 。仍是有小小的激动的。

Reference

• Ant Design Pro: pro.ant.design/docs/gettin…