一、前言
如果之前沒有接觸過docker，建議把 https://docs.docker.com/get-started/ 中的part1-part10看完并實(shí)現(xiàn)一遍再來看本篇文章。
二、目標(biāo)
制作一個(gè)docker 鏡像，其內(nèi)置了Node v12.22、 npm源管理器nrm、單頁面腳手架wlg-cli、多頁面腳手架mp-cli-lc、browser-sync插件及curl、vim和git等，無需在主機(jī)中安裝且這樣統(tǒng)一了前端開發(fā)環(huán)境。
三、編寫docker 鏡像并發(fā)布
1、編寫Dockerfile文件
FROM node:12.22-slim
RUN apt-get update && apt-get install -y curl && apt-get install -y vim && apt-get install -y git
#CMD curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
#CMD source ~/.bashrc
#RUN apt-get update && apt-get install -y vim && apt-get install -y git
RUN npm install -g nrm
RUN npm install -g browser-sync
#RUN npm install -g gulp@3.9.1
RUN npm install -g mp-cli-lc
RUN npm install -g wlg-cli
#RUN npm install -g nodemon
ENV CHOKIDAR_USEPOLLING=true
#EXPOSE 3000 可以通過container link，被其他link的container訪問到
COPY . ./customConfig
WORKDIR /customConfig
# CMD node index.js
2、構(gòu)建鏡像文件 docker image build -t front-end-env . （這里取鏡像名稱為front-end-env）
3、使用命令行登錄docker docker login -u 你的docker用戶名
4、打標(biāo)簽 docker tag front-end-env 你的docker用戶名/front-end-env
5、 上傳至倉庫 docker push 你的docker用戶名/front-end-env
四、使用已發(fā)布的docker 鏡像
1、使用如下指令進(jìn)入docker容器內(nèi)部
docker container run -p 3000:3000 -it 你的用戶名/front-end-env /bin/bash
（-p 3000:3000將容器內(nèi)的3000端口暴露給主機(jī)3000端口,下圖中我沒有加這個(gè)）
可以看到，執(zhí)行上述指令后，會(huì)進(jìn)入了我們配置好的customConfig文件夾里了
2、驗(yàn)證docker容器內(nèi)部的nrm是否安裝成功
可以看到我們可以直接使用了nrm等工具了
3、docker容器內(nèi)部啟動(dòng)一個(gè)前端頁面服務(wù)，
http://localhost:3000，在主機(jī)上如何訪問呢？其實(shí)，因?yàn)閱?dòng)時(shí)帶了
-p 3000:3000
，因此通過訪問主機(jī)的
http://localhost:3000也就可以訪問到docker鏡像內(nèi)部的http://localhost:3000前端頁面了4、如果想把主機(jī)的當(dāng)前目錄、文件等綁定掛載到docker容器內(nèi)，以便在主機(jī)中使用docker容器內(nèi)部的工具該怎么做呢？
如果在docker容器內(nèi)，則使用
exit退出docker容器，然后在PowerShell （windows操作系統(tǒng)）執(zhí)行下面的指令：
docker container run -v "$(pwd):/fromHostDir" -p 3000:3000 -it front-end-env /bin/bash
上圖，可以看到我們成功的將主機(jī)的當(dāng)前目錄及文件掛載綁定到docker容器內(nèi)了，進(jìn)入到docker容器內(nèi)后我們創(chuàng)建一個(gè)文件夾，在主機(jī)也會(huì)同步的創(chuàng)建了相同的文件夾，因?yàn)榇藭r(shí)他們是同步的。ps:如果使用vscode，可以試試Remote-Containers 插件，可以更簡(jiǎn)單。（本人沒有親測(cè)過）
題外話：
1、借助虛擬機(jī)和Vagrant也可以實(shí)現(xiàn)類似統(tǒng)一環(huán)境功能。
2、使用Docker Compose可以簡(jiǎn)化上述操作
推薦資料：
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
