⑴ 編寫前端開發環境的docker 鏡像並發布及使用教程
如果之前沒有接觸過docker,建議把 https://docs.docker.com/get-started/ 中的part1-part10看完並實現一遍再來看本篇文章。
製作一個docker 鏡像,其內置了Node v12.22、 npm源管理器nrm、單頁面腳手架wlg-cli、多頁面腳手架mp-cli-lc、browser-sync插件及curl、vim和git等,無需在主機中安裝且這樣統一了前端開發環境。
1、編寫Dockerfile文件
2、構建鏡像文件 docker image build -t front-end-env . (這里取鏡像名稱為front-end-env)
3、使用命令行登錄docker docker login -u 你的docker用戶名
4、打標簽 docker tag front-end-env 你的docker用戶名/front-end-env
5、 上傳至倉庫 docker push 你的docker用戶名/front-end-env
1、使用如下指令進入docker容器內部
docker container run -p 3000:3000 -it 你的用戶名/front-end-env /bin/bash
(-p 3000:3000將容器內的3000埠暴露給主機3000埠,下圖中我沒有加這個)
2、驗證docker容器內部的nrm是否安裝成功
上圖,可以看到我們成功的將主機的當前目錄及文件掛載綁定到docker容器內了,進入到docker容器內後我們創建一個文件夾,在主機也會同步的創建了相同的文件夾,因為此時他們是同步的。ps:如果使用vscode,可以試試Remote-Containers 插件,可以更簡單。(本人沒有親測過)
題外話:
1、藉助虛擬機和Vagrant也可以實現類似統一環境功能。
2、使用Docker Compose可以簡化上述操作
推薦資料:
1、 https://wurang.net/webpack_hmr/
2、 https://juejin.cn/post/6932808129189150734
3、 https://www.cnblogs.com/pomelott/p/13325328.html
4、docker中的expose https://blog.csdn.net/weixin_43944305/article/details/103116557