摘要：在使用的过程中，可以发现它提供了一系列基于的开发部署方式，如下图。我们可以通过分别启动单个镜像，并把镜像绑定到本地对应端口的形式进行部署，达到容器可通信的目的。但是为了更方便的管理多容器的情况，官方提供了的方式。
背景
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... 。还是有小小的激动的。
ReferenceAnt Design Pro: https://pro.ant.design/docs/g...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/27917.html
摘要：前言此项目是基于蚂蚁金服开源的之上，用全家桶的进行再次开发的，项目已经开源，项目地址在上。项目地址开源不易，如果觉得该项目不错或者对你有所帮助，欢迎到上给个，谢谢。 showImg(https://segmentfault.com/img/remote/1460000017116745); 前言 此 blog-react-admin 项目是基于 蚂蚁金服开源的 ant design p...
摘要：提交报错描述刚下载好的修改后，准备提交发现报如下错误，原因是引用做和脚本做和的语法纠正。 1.Ant Desing Pro git提交报错 1.1. 描述：刚下载好的ant design pro修改后，准备提交发现报如下错误， 1.2. 原因：是Ant Desing Pro 引用eslint做和stylelintrc脚本做js和css的语法纠正。而在每次git提交的时候触发这个脚本...
摘要：前言此项目是用于构建博客网站的，由三部分组成，包含前台展示管理后台和后端。体验地址网站主页网站首页管理后台计划这次是一个完整的全栈式开发，只要部署了这三个项目的代码，是完全可以搭建好博客网站的。 showImg(https://segmentfault.com/img/remote/1460000017095592); 前言 此项目是用于构建博客网站的，由三部分组成，包含前台展示、管理...
摘要：新增页面参考资料由于版本升级到所以重新做了一个分享，下面是目录地址一项目初始化二新增页面三设置代理四与服务端交互在下面的任意一个文件夹下面创建一个页面填写如下内容内容这是新页面内容将刚刚写的组件注册到路由里面，修改文件内容内容新页面添加后的 ant design pro 新增页面 ps:参考资料 1.ant design pro 2.由于pro版本升级到2.0,所以重新做了一个分享...
摘要：距离的上个版本发布已经过去了个月，也进行了许多的迭代，但是大部分更新仍然以修复为主。与此同时整个前端业界也在发生着变化，随着业务的复杂化，微前端已经呼之欲出。同时我们也带了新的项目创建方式，显著的减少了冗余的代码。 showImg(https://segmentfault.com/img/remote/1460000019349114); 距离 Pro 的上个版本发布已经过去了 8 个...
阅读 2971·2021-09-22 15:18
阅读 3393·2019-08-30 15:54
阅读 3272·2019-08-30 15:53
阅读 587·2019-08-30 14:12
阅读 812·2019-08-29 17:01
阅读 2197·2019-08-29 14:04
阅读 1377·2019-08-29 13:09
阅读 859·2019-08-26 17:40
