共计 5109 个字符，预计需要花费 13 分钟才能阅读完成。
2022 年了，咱前端花点工夫学点 docker，不吃亏不受骗
还没有理解过 docker 吗，没关系，咱模仿几个场景，两分钟就给你搞明确它是什么，咱们什么时候须要它
接着咱们拿剩下的七八分钟用 docker 来同时部署 vue2、vue3 两个我的项目，对就是这么快！
1 docker 是什么
场景模仿 1：单机
在公司勤勤恳恳的你很快失去了领导的认可，这天他让你接手这上面几个新我的项目，你须要将它们装置在本人的电脑上
慧眼的你发现，这里有多个不同版本的 nodejs 和 mysql：还行，对我来说小意思
场景模仿 2：多机
此时公司新来了 3 个前端实习生和新人，领导要你把这几个我的项目也给他们装置在本地电脑运行
因为公司历史等起因，临时只能给他们配置了不同操作系统的电脑：win7、win10、OSX 等等
当初你须要把这几个我的项目别离装置在几台电脑的不同操作系统上，看图
机智的你发现，你的头当初一个比两个大
“装置麻烦费时间，新来的人做我的项目的时候，还得针对不同我的项目去切换匹配的版本来用，容易犯错这也给主机环境造成净化这也给主机环境造成净化，一想到将来还有更多的我的项目要这么搞，这时候可能有人曾经想跑路了”
辛辛苦苦装置实现后，看你这么给力，领导又让你在公司内网的两台小服务器上部署一下这几个我的项目，做公共的开发和测试环境，哦对这两台服务器是 linux 的，你是不是筹备开始百度如何在 linux 装置 node 和 mysql 了？而且还是要装置多个版本的。要是这两台服务器的 linux 零碎还不同呢？
当初到轮到你想提桶了吧
3 docker 出场
别慌，这时候 docker 出场了，它能帮你抹平不同零碎的利用程序安装差别
等等，那为啥不必虚拟机？
因为虚拟机启动慢、损耗大、占用资源多，在不同零碎上的迁徙 / 拓展比较复杂
然而 docker 它不会啊，它启动是秒级的，占用资源少，香不香，跨平台还不便复制
写好配置后，它一个命令就在电脑上同时装置不同版本的 nodej、msyql、nginx 等而且是相互隔离独立同时运行，这时候还不须要你手动来回切换
下面的问题不就轻松解决了吗，当初你对 docker 感兴趣了没
2 docker 根底
当初咱们开始来理解一下 docker 的根底吧
docker 分几个概念：镜像、容器、仓库
镜像：就是像是咱们装机时候须要的系统盘或者零碎镜像文件，这里它负责创立 docker 容器的，有很多官网现成的镜像：node、mysql、monogo、nginx 能够从近程仓库下载
容器：能够比较成一个迷你的零碎，例如一个只装置 mysql5.7 的 linux 最小零碎，当然你喜爱也能够把 mysql、node 装置在同一个容器中，记住，容器与容器，容器和主机都是相互隔离的
仓库：仓库就像是 github 那样的，咱们能够制作镜像而后 push 提交到云端的仓库，也能够从仓库 pull 下载镜像
3 装置
docker 的装置很简略，win、osx 都是图形界面装置，linux 的也几行命令, 当初的 mac 的 m1 芯片系列也反对了，这里咱们先略过装置步骤，要快！先看完！
ps: 在 m1 芯片的 docker 上装置 mysql 须要稍加点配置
装置好运行下方代码查看
docker -v4 实战：部署 vue2 和 vue3 我的项目
装置好 docker 后，咱们当初来实战了，搓搓手
咱们要让电脑同时运行 nodejs10 和 nodejs12 多个版本
ps: 咱先疾速入门，咱们临时先把不同版本的 mysql 装置放一边哈
4.1 筹备 vue2、vue3 我的项目
先跟着一起做，咱前面再解释
当初新建一个文件放咱们的我的项目：命名 为 :my-repository
装置 vue2+webpack 我的项目
# 0 命令行进入到该文件夹的地位：cd / 你的电脑具体的文件门路 /my-repository
# 1. 当初装置 vue-cli
npm install -g @vue/cli
# 2. 查看 vue-cli 装置胜利否
vue --version
#我这里是 @vue/cli 4.5.15
# 3. 用 vue-cli 疾速创立我的项目, 装置选项咱们如下
# > ❯ Default ([Vue 2] babel, eslint)
# > ❯ npm 包治理
vue create my-app-vue2
装置 vue3+vite 我的项目
# 先装置 vite 最新版
npm init vite@latest
# 创立 vue3 我的项目
npm init vite@latest my-app-vue3 --template vue
//vite 须要开启网络拜访
//vite.config.js 开启 host
export default defineConfig({plugins: [vue()],
+ server: {
+ host: '0.0.0.0',
+ },
});# 装置实现后咱们的目录是这样的
my-repository
├── my-app-vue2
│ ├── public
│ └── src
│ ├── assets
│ └── components
└── my-app-vue3
├── public
└── src
├── assets
└── components4.2 创立运行 docker 容器
# 0 先进入咱们方才装置了 vue 我的项目的文件夹地位
cd my-repository
# 1 执行 pwd 能够获取以后文件夹在电脑的相对目录
pwd
# /Users/eric/my-repository
# 2 运行创立 docker 容器 1：承载 vue2+webpack+nodejs10
docker run -it -d --name myvue2 --privileged -p 8081:8080 -v /Users/eric/my-repository/my-app-vue2:/app/vue node:10.16.2 /bin/bash -c "cd /app/vue && node -v && npm install && npm run serve"
# 3 运行创立 docker 容器 2：承载 vue3+vite+nodejs12
docker run -it -d --name myvue3 --privileged -p 8080:3000 -v /Users/eric/my-repository/my-app-vue3:/app/vue node:12.22.6 /bin/bash -c "cd /app/vue && node -v && npm install && npm run dev"
#运行胜利后 查看容器运行状况
docker ps -a
胜利运行后会呈现
咱们能够看到容器的启动状态、端口映射、容器名字
关上浏览器，咱们拜访 localhost:8080 和localhost:8081能够看到
如果出错可看上面第三点：调试：运行如下命令查看起因
docker logs -f container_id/containe_name下面那一坨docker run xxxxx 的代码到底是啥，当初咱们就来捋顺
首先这个docker run 是能够用来创立同时启动运行容器
先换行来看 : shell 脚本太长的时候咱们能够用 “\” 把一行命令分成多行
docker run \
-it \
-d \
--name myvue2 \
--privileged \
-p 8081:8080 \
-v /Users/eric/my-repository/my-app-vue2:/app/vue \
node:10.16.2 \
/bin/bash -c "cd /app/vue2 && node -v && npm install && npm run serve"这里咱们应用 docker run 命令能够 下载镜像 -> 通过镜像创立容器 -> 启动运行容器
参数解析：
| 参数 | 形容 |
|---|---|
| -d | 以守护过程的形式让容器在后盾运行，在这您之 前可能应用的是 pm2 来守护过程 |
| -it | 这里是 - i 和 - t 的缩写 -i： 通知 Docker 容器放弃规范输出流对容器凋谢, 即便容器没有终端连贯 通知 Docker 为容器调配一个虚构终端 |
| –name myvue2 | 将容器命名为 myvue2，这样拜访和操作容 器等就不须要输出一大串的容器 ID |
| –privileged | 让容器的用户在容器内能获取齐全 root 权限 |
| -p 8081:8080 | 将容器的 8080 端口映射到宿主机的 8081 端口上 这样咱们拜访本机的 localhost:8081, 就是拜访到容器的 8080 端口 因为容器都是独立运行相互隔离的，容器与容器各自的 8080 端口、容器跟主机各自的 8080 端口都不是一个货色，主机只有在这给端口做映射能力拜访到容器端口 |
| -v /Users/eric/my-repository/my-app-vue2:/app/vue | 将主机的 my-app-vue2 目录 (命令行这里只能写绝对路径哈) 下的内容挂载到容器的目录 /app/vue 内， 如果容器的指定目录有文件 / 文件夹，将被清空 挂载后，容器批改 /app/vue 目录的内容，也是在批改主机目录 /Users/eric/my-repository/my-app-vue2 内容 |
| node:10.16.2 | 这里是指定 nodejs，版本为 10.16.2 的镜像来创立容器 如果不指定版本，会默认下载以后镜像的最新版本 |
| /bin/bash -c “cd /app/vue2 && node -v && npm install && npm run serve” | /bin/bash：是在让容器调配的虚构终端以 bash 模式执行命令 -c “”cd /app/vue2 && node -v && npm install && npm run serve：只能执行一条 shell 命令，须要多个命令按需用 &&、 |
docker run 的运行示意图
下面代码运行胜利后咱们的电脑就会有两个相互隔离独立运行的 docker 容器
4.3 调试
罕用的调试命令 1
# 运行后按 ctrl + c 可退出
docker logs -f contianer_name/container_id当然容器内正在进行编译或者产生谬误甚至退出的时候，咱们可用此命令查看终端输入的信息
🌰：运行胜利后，查看 myvue 容器的 npm run serve 在终端上的实时输入信息
# 查看 docker container 的终端输入信息
docker logs -f myvue2罕用的调试命令 2
# 打印出容器的端口映射、目录挂载、网络等等
docker inspect myvue25 罕用操作命令
罕用的操作命令表一栏，须要先珍藏
镜像操作命令：
# 搜寻镜像
docker search [images_name:tag]
# 下载镜像（：指定版本）docker pull [images_name:tag]
# 查看本地下载的镜像
docker images
# 本人构建镜像
# 依据 dockerfile 的门路或者 url 构建镜像
docker build [OPTIONS] PATH|URL|-
# 查看镜像的构建历史
docker history [images_name]
# 删除镜像
# 须要先删除以此镜像为根底的容器
docker rmi [images_name]容器操作命令
# 查看运行中的容器
# 能够查看容器 ID、根底镜像、容器名称、运行状态、端口映射等
docker ps
# 查看所有容器：包含进行的
docker ps -a
# 查看容器的信息
# 例如端口号的映射、目录挂载
docker inspect [images_name/images_id]
# 启动和进行容器
docker start/stop [container_name/container_id]
# 重启容器
# 应用场景实例：# 在退出新的 npm 包依赖须要从新编译的时候应用重启运行编译
# nginx 容器的配置更新后须要重启失效
docker restart [container_name/container_id]
# 进入容器
# ps: 有些容器没有 bash, 须要改成 /bin/sh，例如 mysq、mongodb 的
# 退出人容器输出 exit 回车键
docker exec -it [container_name/container_id] /bin/bash
# 删除容器
# 在容器进行的状态能力删
docker rm [container_name/container_id]
# 容器主机文件拷
# 将容器文件拷贝到主机
docker cp [container_id/container_name] : [文件目录] [主机目录]
# 将主机的目录拷贝到容器
docker cp [主机目录] [container_id/container_name] : [文件目录]
6 进阶
如果没有适合的镜像，咱们通常用 Dockerfile 来构建自定义镜像
发现没，下面的 docker run 只能创立启动一个 docker 容器，咱们能够用docker-compose 来一次启动多个容器，罕用于单机下装置多个服务
慢点再来更新，大家有趣味也能够先看到我用 docker 部署的 Jenkins 自动化部署 CI/CD 环境 外面也有 docker-compose 的应用