基於docker搭建前端環境

前言

    又是一年畢業季,見某大學生苦苦掙扎於搭建node環境而不能享受開發的樂趣,於心不忍.特做此文。
此前已有一文,用 Docker 快速配置前端開發環境
    而不一樣之處,本文會以step by step的形式幫助裝機工完成一次搭建,處處複製:)

    本文旨在於爲擺脫搭建開發環境的重複勞動,並保持開發的一致性,一些觀點並不是徹底正確,因此本文並不適合學習docker.

適用人羣

1. 公司內裝機到吐的裝機工,如今能夠只用吐一次啦

2. 厭煩了老是有小學妹環繞左右,如今能夠在本機搭建完後丟過去,就能夠叫他們滾啦

認識

1. 在DOCKER_ENV中搭建基礎環境,並保存

2. HOST持久化Items,並讓DOCKER_ENV讀取到Items.

3. 打通DOCKER_ENV與HOST的網絡鏈接

準備

systemWin10或者Mac
dcokerDocker CE
terminal任意
gui-toolKitematic

Win10如下不推薦,VirtualBox會卡!
DockerCE下載地址: https://www.docker.com/commun...
Kitematic下載地址: https://github.com/docker/kit...

1.搭建基礎環境DOCKER_ENV

安裝前DockerCE,若是是Win的同窗記得先開啓Hyper-V,須要他支持.
安裝完去設置下換個源,這提供一個 http://af9c260a.m.daocloud.io

拉一個系統鏡像,無腦centos.

docker pull daocloud.io/centos:7 //下載centos7

確認鏡像是否存在

docker images

而後就能夠打命令把鏡像載入跑起來了,儘可能不要用gui工具,會有些奇奇怪怪的BUG.
好比這一步他有個驗證不識別三方鏡像致使載入失敗

docker run -i -t --name m-centos daocloud.io/centos:7 /bin/bash //起centos

這時能夠打開Kitematic感覺一下剛剛起的一個container

能夠開始擼環境啦,用到什麼,一路yum install就行了.
我這須要node,npm,來一發

curl -sL https://rpm.nodesource.com/setup_7.x  | bash -

yum install -y nodejs

好了後就能夠把你的改動保存一下到鏡像了,其中7ca87爲你的容器ID,能夠直接在GUI工具查看.

docker save m-node -o D:\docker\m-node.tar //保存所有信息

到這一步環境搭建已經算完了,能夠雙擊打開這個文件確認是否能打開.

save能夠保存元信息,文件會稍微大一點,要是以爲過大,能夠自行tar.bz2壓縮,我這壓縮後就90MB

2.Items

因爲項目文件原來存在於HOST中某個文件夾,要將他mount到第一步搭建的執行環境中.

注:若是這一步報錯提示沒有shared,那就進docker的setting打開就好啦.

docker import D:\docker\m-node.tar m-node //從文件載入鏡像
docker run -it --name m-node -v /data m-node /bin/bash //鏡像起容器,並掛載data

上面未指定掛載目標,因此這裏須要指定下,我使用了GUI,嗯,仍是選着爽

最後獲得的m-node就能夠進行一些操做了,好比我這能夠進到/data/執行npm install | npm run dev

在這裏m-items的鏡像其實能夠經過commit獲得,不過爲了不過多的概念,很少作解釋.

3.網絡鏈接

由於環境實質上處於上一步m-node 中,因此須要讓HOST能訪問到其中,仍是用GUI工具點點鼠標就完事拉.


嗯,到這總算真正結束了.嘗試打開Dreamweaver改改文件,再訪問一下localhost,484很棒~

仍是有個小坑,webpack-dev-middlewave會檢測不到文件變化,暫時就poll了一下解決先

使用

由於第一步中中已經環境搭完了,因此將鏡像文件download後,你的小夥伴執行第二步和第三步操做就能用了哦

另外爲了便利,能夠本身嘗試將經常使用的命令寫成腳本,像我這隻要npm run comd就能開始搬磚了呢

"comd":"docker exec -it m-combination /bin/bash -c \"cd /data && npm run dev\""

總結

正如官網所說,保持團隊內開發環境一致也是頗有必要的,否則有的你痛苦的...若是像java,php想要這麼玩,也是大同小異.按着套路來就行了哦.嗯,好像還有個搗奈特...爲了省事不少操做用GUI完成了,還須要作的是將這些操做寫回命令就更方便了...