Docker 構建統一的前端開發環境

往事

15年剛來運滿滿，那個時候的前端團隊還只有2我的，尚未用到打包的相關工具，咱們重構了前端的開發流程，引入了vue作基礎開發框架，使用了fis3作項目打包，因爲項目快速迭代，公共庫的增長，咱們引入了webpack，配合npm進行基礎庫的拆分，方便維護和管理。同時也帶來了一個新的問題，那就是前端開發環境愈來愈複雜。

記得之前一個前端開發，那時候號稱一個記事本就能寫html。如今隨着項目複雜度提升，你須要安裝vscode，node，webpack等等爲了開發，打包等一系列工具。通常新來的員工咱們就會按照以下4步驟安裝相關環境。感覺下

1:下載node安裝
// 基礎庫
npm install yarn -g 
yarn global add nrm 
nrm use taobao
yarn global add cooking-cli@1.5.3 
yarn global add rmdir
yarn global add cross-env
yarn global add rimraf
cooking import autoprefixer
cooking import less
cooking import lint
cooking import vue
cooking import vue2 
//內部打包上傳發布工具
nrm add _131 http://xxx.xxx.xxx.xxx:4873
nrm use _131
yarn global add ymm_build 
// 老的fis3項目依賴包
yarn global add fis3@3.4.25
yarn global add fis3-hook-module@1.2.2
yarn global add fis3-hook-relative@1.0.7
yarn global add fis3-parser-less-2.x@0.1.4
yarn global add fis3-postpackager-loader@1.3.19

2:clone項目代碼
3:yarn install 安裝項目依賴
4：npm run dev運行開發項目
複製代碼

剛開始團隊規模小。新入成員速度也不快。幫助新員工進來安裝下環境還能促進溝通，一切感受都是挺好的。就這樣過了一年多。

隨着人愈來愈多，團隊成長速度愈來愈快，每位新進入的同窗都要這樣讓老司機帶着擼一次，原來快樂的事次數多了也就麻木了，要命的還有進來的人安裝環境的時間不同。致使有些全局的工具包是有小版本差別的。這在新進入的員工有時候碰到的一些莫名其妙的問題，最後查下來好多都是環境不統一致使的。這纔開始慢慢重視起來。之前npm是沒有鎖版本機制的。特別是一些全局的工具庫，每一個人都有本身的一套，線上環境的打包機器上也有一套。很多時候開發是好的，線上打包發佈的時候會出現和預期不同的狀況。痛的次數多了。

思考如何可以統一前端團隊的開發環境。下面上乾貨

使用

docker介紹

百度百科上的介紹： Docker 是一個開源的應用容器引擎，讓開發者能夠打包他們的應用以及依賴包到一個可移植的容器中，而後發佈到任何流行的 Linux機器上，也能夠實現虛擬化。容器是徹底使用沙箱機制，相互之間不會有任何接口

1. dockerClient客戶端
2. Docker Daemon守護進程
3. Docker Image鏡像
4. DockerContainer容器

一個命令就用到了上面4個部分，這個命令也是後面咱們最經常使用的。

docker run -v "$(PWD)":/data -p 8000:8000  harbor.ymmoa.com/h5/ymmbaseup npm run dev
複製代碼

經過dockerclient 發送run指令到 dockerDaemon,dockerDaemon 經過harbor.ymmoa.com/h5/ymmbaseup鏡像建立了一個容器去運行 npm run dev的命令。容器暴露了 8000端口，並關聯了$(PWD)(本地目錄)到容器裏面的/data 目錄

此次docker你能夠簡單理解爲 他能夠把 linux+node+npm裝的依賴包 打包成一個鏡像，而後其餘電腦安裝docker後，能夠快速下載這個鏡像到電腦中進行使用，如何使用咱們後面說。再簡單點，你就把你個docker打包好的鏡像當作一個應用程序，每一個電腦均可如下載下來而後運行他。 先這麼理解吧，若是以爲我說的不夠清楚的能夠找度娘。

docker安裝

推薦使用阿里雲作加速 https://dev.aliyun.com/search.html

按照上面的方法安裝好就行，加速配置好，否則下載鏡像很是慢。安裝細節就自行百度了。

docker製做鏡像

建立一個Dockerfile文件。

新建一個目錄，並在裏面建立Dockerfile文件。內容以下
複製代碼

## 指定這個鏡像的基礎是什麼，咱們選擇了node: 8.9.3這個版本做爲基礎鏡像
FROM node:8.9.3

MAINTAINER stoneship stoneship <258137678@qq.com>

##安裝node相關依賴
RUN \
npm install yarn -g \
yarn global add nrm && \
nrm use taobao &&\
yarn global add vue-cli &&\
yarn global add cross-env

## 安裝nginx

## 安裝數據庫...

## 建立一個目錄
RUN mkdir /data
## 指定命令運行的目錄
WORKDIR /data
複製代碼

特別說明的是，每條run指令在當前基礎鏡像執行，而且提交新鏡像。當命令比較長時，可使用「/」換行。這裏這個demo裏面咱們就打包了些node依賴的工具，你能夠本身添加本身的 run 命令達到你環境須要依賴。

build鏡像

在Dockerfile目錄運行下面的build命令， -t 參數指定了 建立好的鏡像的名稱

docker build -t dockerdemo .
複製代碼

build成功後能夠經過下面命令查詢你的鏡像列表

docker images
複製代碼

上傳到服務器

這個時候打包好的鏡像只是在你的電腦上。若是須要別人也能用到這個鏡像最方便的是上傳你的鏡像到服務器。經過下面命令進行上傳

docker push  dockerdemo:latest
複製代碼

使用以及打包好的鏡像

咱們在dockerdemo鏡像裏面打包了 vue-cli ，下面咱們嘗試經過deckerdemo鏡像裏面的 vue-cli來建立一個項目，注意有些網絡慢的。經過 vue init webpack-simple my-project 下載模板項目可能會失敗。這個只作演示說明如何使用docker去運行相關命令。你能夠嘗試運行其餘命令。

docker run -v "$(PWD)":/data dockerdemo vue init webpack-simple my-project
複製代碼

簡單解釋下：上面命令表示docker經過dockerdemo鏡像建立了一個容器，把當前目錄關聯到了容器的/data目錄，並在目錄中運行 vue init webpack-simple my-project 命令,一樣你能夠運行其餘命令。

改造已有項目進行適配

有了本身項目統一的環境鏡像後，也知道如何用docker來運行命令後，原來的項目開發打包經過 npm run 的。如今可用經過 docker來運行。命令入下

docker run -v "$(PWD)":/data dockerdemo npm run dev
docker run -v "$(PWD)":/data dockerdemo npm run dist 
....
複製代碼

對這些命令能夠結合makefile 或者 .bat 文件進行整合。如今運滿滿前端項目對 makefile進行了調整。以下能夠進行參考

如今咱們的項目打包的命令由原來的 npm run build_dist 變成了 make build_dist(win 上是 Makefile.bat build_dist),簡單的改變倒是換了另外的docker容器進行打包，環境統一了。經過docker的環境結構以下圖。能夠感覺下

總結

通過使用docker構建統一的前端開發環境後，新來的人安裝環境的步驟就變成以下3步，而且不會出現開發環境版本不一樣的問題，感覺下。

1. 安裝docker
2. clone代碼，安裝項目依賴
3. 而後直接經過docker容器運行項目或者打包項目

做者：王坤明