目錄
- 用前端姿勢玩docker【一】Docker通俗理解常用功能彙總與操作埋坑
- 用前端姿勢玩docker【二】dockerfile定製映象初體驗
- 用前端姿勢玩docker【三】基於nvm的前端環境構建技巧
- 用前端姿勢玩docker【四】基於docker快速構建webpack的開發與生產環境
- 用前端姿勢玩docker【五】快速構建中類Unix系統與Windows系統的差異化處理
跨平臺相容性問題解決
前端開發工作中,主流的還是windows和mac,我們的目的是在windows和mac下能夠儘可能地實現一致性。這個一致性體現在:
- docker的安裝與初始化
- docker 容器的使用
- 開發中的各種操作過程
安裝
-
Mac直接看官方文件
-
windows 上安裝docker分為兩種:
-
docker for windows
此方式要求windows系統必須能夠啟動 hyperV服務,而如果能夠啟動hyperV,基本上意味著都要是windows專業版,印象當中即便是家庭版也對版本有要求。優點:方便,快捷
缺點:對系統有要求,不能做到任意機器均可使用
-
使用docker-toolbox通過docker-machine建立docker虛擬機器
此方式通過使用 docker quickstart terminal快速建立docker虛擬機器,然後通過docker-machine控制虛擬機器,並在虛擬機器中跑docker服務。優點:門檻低
缺點:官方文件說明已經不建議使用此方法;配置較為複雜
總結
類Unix系統上,docker使用都很方便。關鍵是windows上需要斟酌考慮:
-
如果需要滿足老舊的機器快速構建環境,不想去考慮各種系統型別(專業版、家庭版)、版本等問題。則建議使用docker-machine建立docker虛擬機器的方法。
-
如果是在單一機器上使用docker,且長期固定使用同一臺機器,那麼docker for windows一定是最佳選擇。
關於mac與windows啟動便利性上,可以編寫相應的.sh與.bat檔案做啟動檔案。
windows docker-toolbox 安裝docker問題彙總
- 無法使用私庫:若配合映象私庫使用,則需要修改docker-toolbox下的sart.sh在docker-machine create那一行增加引數:
"${DOCKER_MACHINE}" create -d virtualbox --virtualbox-no-vtx-check $PROXY_ENV --engine-registry-mirror http://hub-mirror.c.163.com --engine-insecure-registry 私庫域名或ip "${VM}"
-
進入docker容器後無法ping通外網
若可ping同域名,無法ping同ip:則需要新增dns,在
/var/lib/boot2docker/profile
檔案中增加--dns=8.8.8.8
,注意此處有 = 號域名ip均無法ping通:在上文中同樣的檔案中新增bip配置
--bip 172.17.5.0/24
,注意此時無等號 -
windows VirtualBox軟連結錯誤: symlink(): Read-only file system
需要使用VBoxManage開啟軟連線功能,步驟如下:
- 關閉VirtualBox
- 為VirtualBox增加環境變數
- 啟動軟鏈功能:執行命令: VBoxManage.exe setextradata default VBoxInternal2/SharedFoldersEnableSymlinksCreate//mnt/project 1 其中default為虛擬機器名稱,/mnt/project 為啟動軟鏈功能的目錄
- 檢視是否啟動成功: 執行命令:VBoxManage.exe getextradata default enumerate ,能看到存在以下內容即為開啟成功:Key: VBoxInternal2/SharedFoldersEnableSymlinksCreate//mnt/project, Value: 1
-
windows中通過VirtualBox開啟docker虛擬機器,啟動容器後,在容器內啟動webpack-dev-server,外網無法訪問:
docker-machine ssh
進入docker虛擬機器後,ip addr
檢視192網段的ip,並通過此ip加埠在宿主機訪問即可。 -
啟動容器後,開啟dev-server,修改程式碼後,宿主機瀏覽器無法熱更新:
在VirtualBox中的檔案系統下,webpack無法自動開啟熱更,需要手動新增watchOptions開啟輪詢:具體時間根據個人機器情況決定
watchOptions: { poll: 1500 }