【前端工程化】Docker入门

背景

  • 当我们使用(开发)某个软件,可能得确保操作系统、依赖、环境变量相同的问题,这些配置可能就需要花费很多时间。
  • 使用虚拟机,可以解决上述部分问题,但是它又引发了其他问题:资源占用多、冗余步骤多、启动慢等问题,性能不好的笔记本跑起来真的是灾难。
  • 后来人们推出了Linux容器,它对进程进行隔离,接触到的各种资源都是虚拟的,实现了与底层系统的隔离,使用起来:启动快、资源占有少、体积小。

定义

docker就是Linux容器的一种封装,提供了简单易用的容器使用接口。

我们可以用docker将应用程序进行打包,生成一个文件(即镜像),运行这个文件,就会生成一个虚拟容器。程序在这个虚拟容器运行,就跟在真实的物理机上运行一样,不用再担心环境问题。

安装

要想在window系统或mac os中使用docker,需要先安装桌面版,其实相当于是在电脑安装了一个Linux内核+docker环境。所以先移步docker官网进行下载,安装步骤很简单~

安装成功之后,可以直接打开软件,或者使用下列命令判断是否安装成功~

docker version

image文件

这里这种文件可以称为镜像。Docker把依赖程序及其依赖,打包在image文件里面。通过这个文件,才可以生成Docker容器。同一个image文件,可以有多个容器实例。

# 可以使用这个命令查看image文件
docker image ls

或者在桌面端软件查看:

在这里插入图片描述

在这里我们来实践一下如何将我们的后台管理系统打包成一个docker image文件~

现在项目目录中新建.dockerignore

.git
node_modules
npm-debug.log

以上这些文件是我们不需要打包成镜像的。

新建Dockerfile

# FROM 依赖包,这里我们需要node 
# as 代表这个任务的别名
FROM node:16.20.0 as builder
# 拷贝当前目录到/var/web
COPY . /var/web
# 指定命令行在/var/web文件下执行
WORKDIR /var/web
# 安装依赖并执行打包
RUN npm install --registry=https://registry.npm.taobao.org \
    && npm run build

# FROM 依赖包,这里我们需要nginx来预览构建好的项目
FROM nginx:1.24.0 as prod
# 预览的端口号是3000
EXPOSE 3000
# 将打包好的文件复制到nginx中
COPY --from=0 /var/web/dist /usr/share/nginx/html
# 相当于打开了 CMD 的终端,然后输入对应的命令
CMD [ "nginx", "-g", "daemon off;" ]

这里需要注意的是run命令在image文件的构建阶段执行,执行的结果都会打包进image文件,CMD命令则是在容器启动后执行,一个Dockerfile可以包含多个RUN命令,只能有一个CMD命令。

接下来进行镜像构建:

# -t 指的是镜像名字,建议前面加入空间名,以防发布的时候跟别人装车
# . 这个不能省略,代表当前目录
docker build -t armouy/vue3-admin .

# 查看
docker image ls

看桌面端,确实也有这个镜像啦:

在这里插入图片描述

Container文件

这种文件即容器,用来运行image文件的。一个image文件可以被多个容器运行。如果你用过虚拟机的话,可以立即成VMware是容器,可以运行多个镜像,如CentOS等镜像,

输入命令,创建一个镜像:

# -d代表后台运行,启动一次就够了
# -p 后面是端口映射80端口映射到本机的8080, 3000端口映射到本机的9999
# --name即容器名字
docker run -d -p 8080:80 --name vue3-admin-container armouy/vue3-admin 

也可以在桌面端操作:

在这里插入图片描述

在这里插入图片描述

创建成功的话:

在这里插入图片描述

访问http://localhost:8080/#/login即会显示:

在这里插入图片描述

发布image文件

先去 hub.docker.comcloud.docker.com 注册一个账户。然后,用下面的命令登录。

docker login

如果还没打包,按照上面的方式打包一个image,然后进行发布:

docker image push armouy/vue3-admin

拉取image文件

上述镜像发布成功之后,我们可以删除本地的镜像和容器,搜索一下我们发布的镜像:

在这里插入图片描述

点击pull进行拉取,这样就拉到了我们上传的镜像:

在这里插入图片描述

创建容器跑一遍,确实木有问题~~

总结

了解了Docker的作用和相关概念,将已有的项目做成了镜像并使用。

参考


如有错误欢迎指出,感谢阅读~

猜你喜欢

转载自blog.csdn.net/qq_34086980/article/details/131434449
今日推荐