前言
作为程序员日常工作中不管是入职拿到新电脑，还是自己换了新机，工作之前第一件事就是要安装配置各种各样的开发环境；如前端开发需要安装 node、yarn、git 等；
为了使用某些工具或者包，可能还需要安装 python 或者 java 等（比如 jenkins 依赖了 java），时间久了，本机的环境会越来越多且非常乱；
使用 docker 做开发环境后，开发环境都配置在容器中，开发时只需要打开 docker，开发完后关闭 docker，本机不用再安装乱七八糟的环境，非常清爽。
docker 打造基础前端开发环境
docker安装请参考 docker 初识 这篇文章
本文使用 ubuntu 镜像作为基础镜像 来配置一个简单的自己的前端开发环境
如果文章对你有帮助，可以点赞、评论、收藏、转发互动支持哈 😀😀😀
点击链接 学习交流群(前端微信群) 加vx拉你进 前端学习交流群 让我们一起 好好学习（🐟🐟🐟）吧😎😎😎
获取基础镜像
首先启动docker服务，打开 cmd 终端拉取 ubuntu 镜像
bash
# 不输入版本号，默认获取 latest 即最新版
docker pull ubuntu
# 查看镜像
docker images
创建容器
-
以
ubuntu镜像为基础 创建并运行一个容器arduinodocker run -itd --name web-dev 'xxx镜像id' /bin/bash-itd 是 -i -t -d 的合写，-d 是在后台中运行容器，相当于新建时一并启动容器 ，这样就不用使用 docker start 命令了；
/bin/bash 作用是因为docker后台必须运行一个进程，否则容器就会退出，在这里表示启动容器后启动bash；查看docker运行中的容器
docker ps
发现当前容器状态为 Up 启动成功后面为了方便操作我们使用编辑器打开容器，这里先关闭运行的容器
docker stop 容器 -
vscode中打开容器
首先在终端启动一个容器
docker run -itd -p 6000:9000 --name web-dev-ctr sisi001/web-dev:0.0.1vscode安装 Dev Containers 插件
点击左下角->选择
"Attach to Running Container"会出现正在运行的容器列表，选择容器进入，添加一个 bash 终端，就可以进入我们刚刚上面命令行模式了也就是当前容器内部了
在vscode 中打开目录，这时发现打开的不再是本机的目录，而是刚创建的容器中的目录
更新ubuntu系统
ubuntu 镜像非常纯净（大小只有 72m），只具备最基本的能力，为了后续方便使用，我们先更新一下系统
-
更换阿里源
更新前为了速度快一点，先换到阿里的源，用 vscode 打开容器，打开
/etc/apt/sources.list文件，将内容改为：bashdeb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse deb http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse deb-src http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiver -
更新系统
sqlapt-get update apt-get upgrade -
安装 sudo
apt-get sudo -
安装 wget（wget 是个下载工具，需要用它来下载其他软件包）
arduinoapt-get install wget为了后续方便管理项目和软件包，我们在
/home目录中创建两个文件夹:
projects用于存放项目
packages用于存放软件包bashcd /home mkdir projects mkdir packages
linux中安装node（不推荐）
需要下载其它版本修改版本号即可，推荐使用nvm去管理node
wget https://nodejs.org/dist/v14.18.0/node-v14.18.0-linux-x64.tar
-
解压文件：
bashtar -xvf node-v14.18.0-linux-x64.tar # 删除安装包 rm node-v14.18.0-linux-x64.tar # 改个名字，方便以后切换 node 版本 mv node-v14.18.0-linux-x64 node配置环境变量后，使用
node -v查看是否成功
linux安装nvm管理node（推荐）
通过指令安装nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
or
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
如果网络不佳、可直接去官网下载压缩包上传linux指定目录后解压使用 nvm-sh/nvm · GitHub
-
配置 nvm 环境变量：
bash# root目录下新建 .bash_profile 文件内容如下： export NVM_DIR="/home/packages/nvm-0.39.2" # 这里路径一定要写对不然后面找不到nvm [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm # 更更换nvm源为淘宝 export NVM_NODEJS_ORG_MIRROR=http://npm.taobao.org/mirrors/node export NVM_IOJS_ORG_MIRROR=http://npm.taobao.org/mirrors/iojs打开
.bashrc文件新增：source ~/.bash_profile在终端编译
.bashrc文件，使其生效：source ~/.bashrc然后就可以使用 nvm 了
nvm -v查看是否成功 -
bash: nvm: command not found 问题
检查上述环境变量配置的路径、如果是vscode里打开终端，修改配置文件后需要关闭终端重新打开才生效
-
安装 nrm，并切npm换到 taobao 源
nvm安装成功后就可以使用nvm安装node了，node安装成功后安装 nrm切换源
perlnpm install nrm -g nrm use taobao
liunx安装nginx
参考链接 ubuntu安装nginx的两种方式
-
安装成功后启动nginx
service start nginx
访问 localhost:80 熟悉的页面出来了
-
新增nginx配置文件
bash# 修改为自己的配置 server { listen 9000; server_name localhost; location / { # 修改为自己的路径 root /home/test; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }重启nginx服务：
service nginx reload设置容器启动时nginx服务自启（失败，待解决）
参考链接 docker设置容器启动时nginx、thingsboard、postgresql等服务自启动
开启新的容器测试
docker run -itd -p 2023:9000 --name web-dev-ctr3 fed-image:0.0.2 /bin/bash ./start.sh/bin/bash必须加！ 意思是用/bin/bash 执行./start.sh 脚本 例如：
docker run -itd -p 2023:9000 --name web-dev-ctr3 fed-image:0.0.2 /bin/bash ./start.sh容器启动时nginx自启 （此方法失败）
参考链接： Ubuntu 环境下配置 Nginx 开机自启
-
设置liunx开机自启nginx
update-rc.d nginx defaults报错如下：
bashperl: warning: Setting locale failed. perl: warning: Please check that your locale settings: LANGUAGE = (unset), LC_ALL = (unset), LANG = "en_US.UTF-8" are supported and installed on your system. perl: warning: Falling back to the standard locale ("C").原因是本地化语言配置缺失，需要安装，比如
zh_CN.UTF-8请执行：
apt-get install language-pack-zh-hans打开
.bashrc添加export LC_ALL=C重载生效：
source ~/.bashrc再次执行：
update-rc.d nginx defaults发现不报错了 -
关闭开机自启
update-rc.d -f nginx remove
-
容器打包为镜像
上面我们通过
ubuntu为基础镜像 创建了一个容器，进行自定义配置了一个基础的前端开发环境，为了复用这个环境 ，我们需要将该容器打包成镜像并推送到dockerhub仓库中；（本次是上传私有仓库，免费用户默认只能有一个私有仓库）
-
容器打包为镜像
指令：
docker commit -a="my_name" -m="测试" container01 new_image:tag-a：提交的镜像作者；
-c：使用 Dockerfile 指令来创建镜像；
-m：提交时的说明文字；
-p：在 commit 时，将容器暂停；现在把我们安装好环境的容器打包为一个新的镜像 ，把他上传到
dockerhub之后复用这个新的镜像去创建新的容器就可以直接使用刚刚上面安装的软件包了，而不用每个容器再去安装了。容器打包为新的镜像 ：
docker commit web-dev-ctr fed-image:0.0.1fed（表示 front end development）
-
为镜像打tag
修改本地镜像的名字和标签，一定要打上tag，并带上
dockerhub的账号，不然没办法上传到dockerhub上的，这里我们先打包为私有仓库镜像打tag格式为：
docker tag 本地镜像id或者名称 用户名/hub仓库名:仓库版本号如果这里仓库名称不是对应私有仓库，会变成公共镜像
docker images查看当前镜像
首先修改需要上传的镜像为规范的镜像名称 ：
docker tag ubuntu:latest xxx/web-dev:0.0.1ubuntu:latest是当前本地用户的镜像 的 "名字:TAG"xxx 是自己的
dockerhub账号web-dev:0.0.1 是自己
dockerhub仓库名称和版本号
上传推送 docker hub
-
注册账号 首先去docker官网 注册账号，并且创建一个仓库，后续推送镜像时使用。
-
终端登录docker官方
docker login输入用户名和密码
docker logout登出出现下图为登录成功
-
推送镜像到仓库
docker images
将打好tag的镜像推送到 dockerhub私有仓库，因为我们提前按格式改好了镜像名称所以现在可以直接push:
docker push 用户名/仓库名称:0.0.1
push成功后登录
dockerhub查看对应的仓库就可以看到我们刚刚提交的镜像了
在新机器上拉取该镜像
- 拉取镜像
docker pull 用户名/仓库名称:0.0.1 - 启动容器：
docker run -itd -p 2000:9000 --name ctr1 xxxx - 从终端进入容器（其实就是进入linux）
docker exec -it 容器id /bin/bash启动nginx服务， 就可以通过宿主机2000访问容器9000端口映射的内容了
注意事项
-
如果要将镜像推送到
dockerhub，不要将重要的信息保存到镜像中，因为镜像是共享的，避免重要信息泄露。 -
千万不要在容器中存任何重要的文件或信息，因为容器一旦误删这些文件也就没了。
-
如果在容器中开发项目，记得每天提交代码到远程仓库，避免容器误删后代码丢失。
总结
至此我们使用 docker 搭建了一个自定义的前端基础环境的镜像，且发布到了 dockerhub 私有仓库，现在可以在不同机器（电脑）、不同系统中拉取共享这个镜像，然后创建容器使用。从而达到了快速配置开发环境的目的。