背景
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镜像,用户可以上传或者下载上面的镜像,官方地址为 https://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分支的,详情见:https://github.com/ant-design... 。还是有小小的激动的。
Reference
- Ant Design Pro: https://pro.ant.design/docs/g...