成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Ant Design Pro 的 Docker 部署方式

wemallshop / 4068人閱讀

摘要：在使用的過(guò)程中，可以發(fā)現(xiàn)它提供了一系列基于的開(kāi)發(fā)部署方式，如下圖。我們可以通過(guò)分別啟動(dòng)單個(gè)鏡像，并把鏡像綁定到本地對(duì)應(yīng)端口的形式進(jìn)行部署，達(dá)到容器可通信的目的。但是為了更方便的管理多容器的情況，官方提供了的方式。

背景

Ant Design Pro是一個(gè)企業(yè)級(jí)中后臺(tái)解決方案，在Ant Design組件庫(kù)的基礎(chǔ)上，提煉出典型模板/業(yè)務(wù)組件/通用頁(yè)等，在此基礎(chǔ)上能夠使開(kāi)發(fā)者快速的完成中后臺(tái)應(yīng)用的開(kāi)發(fā)。

在使用Ant Design Pro的過(guò)程中，可以發(fā)現(xiàn)它提供了一系列基于docker的開(kāi)發(fā)部署方式，如下圖。但是官方文檔中并沒(méi)有具體的介紹，本文的主要目的就是解析Ant Design Pro中對(duì)于docker的使用。

docker相關(guān) 為什么使用docker?

環(huán)境部署是所有團(tuán)隊(duì)都必須面對(duì)的問(wèn)題，隨著系統(tǒng)越來(lái)越大，依賴的服務(wù)也越來(lái)越多，例如：Web服務(wù)器 + MySql數(shù)據(jù)庫(kù) + Redis緩存等

依賴服務(wù)很多，本地搭建一套環(huán)境成本越來(lái)越高，初級(jí)人員很難解決環(huán)境部署中的一些問(wèn)題

服務(wù)的版本差異及OS的差異都可能導(dǎo)致線上環(huán)境BUG，項(xiàng)目引入新的服務(wù)時(shí)所有人的環(huán)境需要重新配置

任何安裝過(guò)Docker的機(jī)器都可以運(yùn)行這個(gè)容器獲得同樣的結(jié)果, 同的容器，從而完全消除了不同環(huán)境，不同版本可能引起的各種問(wèn)題。例如，在前端開(kāi)發(fā)中通常會(huì)遇到nodejs版本問(wèn)題，就可以通過(guò)docker的方式進(jìn)行解決。

docker中的概念

Docker有三個(gè)基本概念：鏡像（image）,容器（container）,倉(cāng)庫(kù)（repository）。

鏡像（image）: 鏡像中包含有需要運(yùn)行的文件。鏡像用來(lái)創(chuàng)建container，一個(gè)鏡像可以運(yùn)行多個(gè)container；鏡像可以通過(guò)Dockerfile創(chuàng)建，也可以從Docker hub/registry上下載。

容器（container）: 容器是Docker的運(yùn)行組件，啟動(dòng)一個(gè)鏡像就是一個(gè)容器，容器是一個(gè)隔離環(huán)境，多個(gè)容器之間不會(huì)相互影響，保證容器中的程序運(yùn)行在一個(gè)相對(duì)安全的環(huán)境中。

倉(cāng)庫(kù)（repository）: 共享和管理Docker鏡像，用戶可以上傳或者下載上面的鏡像，官方地址為 https://registry.hub.docker.com/ （類似于github對(duì)源代碼的管理），也可以搭建自己私有的Docker registry。

常見(jiàn)docker命令

使用當(dāng)前目錄Dockerfile創(chuàng)建鏡像，標(biāo)簽為xxx:v1: docker build -t xxx:v1 .

創(chuàng)建新容器并運(yùn)行: docker run --name mynginx -d nginx:latest

在容器中開(kāi)啟交互終端：docker exec -i -t container_id /bin/bash

啟動(dòng)容器：docker start container_name/container_id

停止容器：docker stop container_name/container_id

重啟容器：docker restart container_name/container_id

什么是docker-compose?

實(shí)際項(xiàng)目中，不可能只單單依賴于一個(gè)服務(wù)，例如一個(gè)常見(jiàn)的Web項(xiàng)目可能依賴于: 靜態(tài)文件服務(wù)器，應(yīng)用服務(wù)器，Mysql數(shù)據(jù)庫(kù)等。我們可以通過(guò)分別啟動(dòng)單個(gè)鏡像，并把鏡像綁定到本地對(duì)應(yīng)端口的形式進(jìn)行部署，達(dá)到容器可通信的目的。但是為了更方便的管理多容器的情況，官方提供了docker-compose的方式。docker-compose是Docker的一種編排服務(wù)，是一個(gè)用于在 Docker 上定義并運(yùn)行復(fù)雜應(yīng)用的工具，可以讓用戶在集群中部署分布式應(yīng)用。

compose中有兩個(gè)重要的概念：

服務(wù) (service)：一個(gè)應(yīng)用的容器，實(shí)際上可以包括若干運(yùn)行相同鏡像的容器實(shí)例。

項(xiàng)目 (project)：由一組關(guān)聯(lián)的應(yīng)用容器組成的一個(gè)完整業(yè)務(wù)單元，在docker-compose.yml 文件中定義。

一個(gè)項(xiàng)目可以由多個(gè)服務(wù)（容器）關(guān)聯(lián)而成，compose 面向項(xiàng)目進(jìn)行管理，通過(guò)子命令對(duì)項(xiàng)目中的一組容器進(jìn)行便捷地生命周期管理。

腳本解析 本地開(kāi)發(fā)運(yùn)行

npm run docker:dev該命令使用docker-compose up命令通過(guò)docker-compose.dev.yml模板啟動(dòng)相關(guān)容器。

docker-compose.dev.yml內(nèi)容如下：

這個(gè)compose文件定義了一個(gè)服務(wù)：ant-design-pro_dev。該服務(wù)使用Dockerfile.dev構(gòu)建了當(dāng)前鏡像。將該容器內(nèi)部的8000端口映射到host的8000端口。為了容器和host的數(shù)據(jù)同步，該容器掛載三個(gè)數(shù)據(jù)卷：../src:/usr/src/app/src, ../config:/usr/src/app/config, ../mock:/usr/src/app/mock。它將主機(jī)目錄映射到容器，這樣容器內(nèi)的三個(gè)目錄可以跟host對(duì)應(yīng)的三個(gè)目錄做到數(shù)據(jù)同步。

Dockerfile.dev內(nèi)容如下：

該容器使用node:latest作為基礎(chǔ)鏡像，并設(shè)定/usr/src/app作為工作目錄。首先將package.json文件復(fù)制到該目錄，并安裝相關(guān)的依賴包，之后復(fù)制該文件夾下所有內(nèi)容到該目錄下，并使用npm run start啟動(dòng)應(yīng)用。由于數(shù)據(jù)卷的存在，本地的三個(gè)文件夾下的任何修改都可以同步到容器中，達(dá)到更新的目的。

至此，整個(gè)開(kāi)發(fā)環(huán)境搭建完成。

生產(chǎn)環(huán)境

npm run docker-pro:dev該命令使用docker-compose up命令通過(guò)docker-compose.yml模板啟動(dòng)相關(guān)容器。

docker-compose.yml內(nèi)容如下：

這個(gè)compose文件定義了兩個(gè)服務(wù)：ant-design-pro_build和ant-design-pro_web。

ant-design-pro_build使用Dockerfile構(gòu)建鏡像。

Dockerfile內(nèi)容如下：

該鏡像實(shí)際只做了文件的構(gòu)建（npm run build），構(gòu)建的結(jié)果存放在/dist目錄中，并通過(guò)數(shù)據(jù)卷共享該目錄。由此看來(lái)，該容器只作為一個(gè)數(shù)據(jù)卷容器為其他鏡像提供數(shù)據(jù)服務(wù)。

ant-design-pro_web使用nginx鏡像，nginx容器的80端口綁定host的80端口，并將ant-design-pro_build的dist目錄掛載到nginx服務(wù)器/usr/share/nginx/html目錄，將nginx.conf掛載到/etc/nginx/conf.d/default.conf。

容器視圖如下：

通過(guò)http://localhost:80就可以訪問(wèn)該部署了前端靜態(tài)文件的nginx容器了。

生產(chǎn)鏡像構(gòu)建

npm run docker-hub:build命令通過(guò)docker build構(gòu)建Dockerfile.hub定義的鏡像。

Dockerfile.hub文件定義如下：

該Dockerfile使用了多階段構(gòu)建的方式，第一階段構(gòu)建出編譯后的前端資源文件，第二階段將第一階段構(gòu)建出來(lái)的前端資源文件復(fù)制到nginx的指定目錄，構(gòu)建出一個(gè)包含前端靜態(tài)資源以及nginx.conf的鏡像。

在指定服務(wù)器直接運(yùn)行該鏡像，便可以使用服務(wù)。

順便提一句，這個(gè)Dockerfile.hub文件是由我提給官方并合并到master分支的，詳情見(jiàn)：https://github.com/ant-design... 。還是有小小的激動(dòng)的。

Reference

Ant Design Pro: https://pro.ant.design/docs/g...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/27917.html

相關(guān)文章

  • react + Ant Design 的 blog-react-admin 項(xiàng)目的項(xiàng)目文檔說(shuō)明

    摘要：前言此項(xiàng)目是基于螞蟻金服開(kāi)源的之上，用全家桶的進(jìn)行再次開(kāi)發(fā)的，項(xiàng)目已經(jīng)開(kāi)源，項(xiàng)目地址在上。項(xiàng)目地址開(kāi)源不易，如果覺(jué)得該項(xiàng)目不錯(cuò)或者對(duì)你有所幫助，歡迎到上給個(gè)，謝謝。 showImg(https://segmentfault.com/img/remote/1460000017116745); 前言 此 blog-react-admin 項(xiàng)目是基于 螞蟻金服開(kāi)源的 ant design p...

    chavesgu 評(píng)論0 收藏0

  • Ant Design Pro用小烏龜版的git提交時(shí)報(bào)錯(cuò)

    摘要：提交報(bào)錯(cuò)描述剛下載好的修改后，準(zhǔn)備提交發(fā)現(xiàn)報(bào)如下錯(cuò)誤，原因是引用做和腳本做和的語(yǔ)法糾正。 1.Ant Desing Pro git提交報(bào)錯(cuò) 1.1. 描述：剛下載好的ant design pro修改后，準(zhǔn)備提交發(fā)現(xiàn)報(bào)如下錯(cuò)誤， 1.2. 原因：是Ant Desing Pro 引用eslint做和stylelintrc腳本做js和css的語(yǔ)法糾正。而在每次git提交的時(shí)候觸發(fā)這個(gè)腳本...

    source 評(píng)論0 收藏0

  • react + node + express + ant + mongodb 的簡(jiǎn)潔兼時(shí)尚的博客網(wǎng)站

    摘要：前言此項(xiàng)目是用于構(gòu)建博客網(wǎng)站的，由三部分組成，包含前臺(tái)展示管理后臺(tái)和后端。體驗(yàn)地址網(wǎng)站主頁(yè)網(wǎng)站首頁(yè)管理后臺(tái)計(jì)劃這次是一個(gè)完整的全棧式開(kāi)發(fā)，只要部署了這三個(gè)項(xiàng)目的代碼，是完全可以搭建好博客網(wǎng)站的。 showImg(https://segmentfault.com/img/remote/1460000017095592); 前言 此項(xiàng)目是用于構(gòu)建博客網(wǎng)站的，由三部分組成，包含前臺(tái)展示、管理...

    fish 評(píng)論0 收藏0

  • ant design pro 新增頁(yè)面

    摘要：新增頁(yè)面參考資料由于版本升級(jí)到所以重新做了一個(gè)分享，下面是目錄地址一項(xiàng)目初始化二新增頁(yè)面三設(shè)置代理四與服務(wù)端交互在下面的任意一個(gè)文件夾下面創(chuàng)建一個(gè)頁(yè)面填寫如下內(nèi)容內(nèi)容這是新頁(yè)面內(nèi)容將剛剛寫的組件注冊(cè)到路由里面，修改文件內(nèi)容內(nèi)容新頁(yè)面添加后的 ant design pro 新增頁(yè)面 ps:參考資料 1.ant design pro 2.由于pro版本升級(jí)到2.0,所以重新做了一個(gè)分享...

    asoren 評(píng)論0 收藏0

  • Ant Design Pro v4 is Here

    摘要：距離的上個(gè)版本發(fā)布已經(jīng)過(guò)去了個(gè)月，也進(jìn)行了許多的迭代，但是大部分更新仍然以修復(fù)為主。與此同時(shí)整個(gè)前端業(yè)界也在發(fā)生著變化，隨著業(yè)務(wù)的復(fù)雜化，微前端已經(jīng)呼之欲出。同時(shí)我們也帶了新的項(xiàng)目創(chuàng)建方式，顯著的減少了冗余的代碼。 showImg(https://segmentfault.com/img/remote/1460000019349114); 距離 Pro 的上個(gè)版本發(fā)布已經(jīng)過(guò)去了 8 個(gè)...

    RebeccaZhong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<