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鏡像，用戶能夠上傳或者下載上面的鏡像，官方地址爲 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...