資訊專欄INFORMATION COLUMN
摘要：在使用的過程中，可以發現它提供了一系列基于的開發部署方式，如下圖。我們可以通過分別啟動單個鏡像，并把鏡像綁定到本地對應端口的形式進行部署，達到容器可通信的目的。但是為了更方便的管理多容器的情況，官方提供了的方式。
背景
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...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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 個...
閱讀 2972·2021-09-22 15:18
閱讀 3395·2019-08-30 15:54
閱讀 3274·2019-08-30 15:53
閱讀 589·2019-08-30 14:12
閱讀 814·2019-08-29 17:01
閱讀 2198·2019-08-29 14:04
閱讀 1379·2019-08-29 13:09
閱讀 862·2019-08-26 17:40
