基于docker搭建前端環境

Cristalven 發布于2019-06-28 15:47 / 2274人閱讀

摘要：前言又是一年畢業季見某大學生苦苦掙扎于搭建環境而不能享受開發的樂趣于心不忍特作此文。

前言

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

????本文旨在于為擺脫搭建開發環境的重復勞動,并保持開發的一致性,一些觀點并非完全正確,所以本文并不適合學習docker.

適用人群

公司內裝機到吐的裝機工,現在可以只用吐一次啦

厭煩了總是有小學妹環繞左右,現在可以在本機搭建完后丟過去,就可以叫他們滾啦

認識

在DOCKER_ENV中搭建基礎環境,并保存

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

打通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:dockerm-node.tar //保存全部信息

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

save可以保存元信息,文件會稍微大一點,要是覺得過大,可以自行tar.bz2壓縮,我這壓縮后就90MB

2.Items

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

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

docker import D:dockerm-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完成了,還需要做的是將這些操作寫回命令就更方便了...

GPU云服務器云服務器 docker環境搭建 docker搭建開發環境 docker搭建java環境 docker搭建php環境

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/26906.html

基于docker搭建前端環境

摘要：前言又是一年畢業季見某大學生苦苦掙扎于搭建環境而不能享受開發的樂趣于心不忍特作此文。前言 ????又是一年畢業季,見某大學生苦苦掙扎于搭建node環境而不能享受開發的樂趣,于心不忍.特作此文。此前已有一文,用 Docker 快速配置前端開發環境????而不同之處,本文會以step by step的形式幫助裝機工完成一次搭建,到處復制:) ????本文旨在于為擺脫搭建開發環境的重復勞動...

jay_tian 2019-08-21 15:49 評論0 收藏0
PHP開發環境03 - 使用KFKDock搭建PHP項目環境

摘要：基于快速搭建服務根據自定義配置文件快速搭建環境。目錄此項目能做什么地址視頻教程包含軟件項目目錄結構快速運行運行服務運行項目運行前端服務此項目能做什么搭建開發生產環境。搭建開發生產環境。基于Docker快速搭建Web服務根據自定義配置文件快速搭建Web環境。目錄此項目能做什么 GItHub地址、視頻教程包含軟件項目目錄結構快速運行KFKDock 運行PHP服務運行L...

Zhuxy 2019-06-28 16:14 評論0 收藏0
PHP開發環境03 - 使用KFKDock搭建PHP項目環境

摘要：基于快速搭建服務根據自定義配置文件快速搭建環境。目錄此項目能做什么地址視頻教程包含軟件項目目錄結構快速運行運行服務運行項目運行前端服務此項目能做什么搭建開發生產環境。搭建開發生產環境。基于Docker快速搭建Web服務根據自定義配置文件快速搭建Web環境。目錄此項目能做什么 GItHub地址、視頻教程包含軟件項目目錄結構快速運行KFKDock 運行PHP服務運行L...

yagami 2019-06-28 18:17 評論0 收藏0