关于前端:给前端的docker-10分钟真-快速入门指南

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 -v

4 实战：部署vue2和vue3我的项目

装置好docker后，咱们当初来实战了，搓搓手

咱们要让电脑同时运行nodejs10和nodejs12多个版本

ps: 咱先疾速入门，咱们临时先把不同版本的mysql装置放一边哈

4.1 筹备vue2 、 vue3我的项目

先跟着一起做，咱前面再解释

当初新建一个文件放咱们的我的项目：命名为 :my-repository

装置vue2+webpack我的项目

# 0 命令行进入到该文件夹的地位： cd /你的电脑具体的文件门路/my-repository# 1.当初装置vue-clinpm 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 开启hostexport 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        └── components

4.2 创立运行docker容器

# 0 先进入咱们方才装置了vue我的项目的文件夹地位cd my-repository# 1 执行pwd能够获取以后文件夹在电脑的相对目录pwd# /Users/eric/my-repository# 2 运行创立docker容器1：承载 vue2+webpack+nodejs10docker 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+nodejs12docker 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 myvue2

5 罕用操作命令

罕用的操作命令表一栏，须要先珍藏

镜像操作命令：

# 搜寻镜像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的应用