【前端工程化】Docker入门

news2024/11/17 13:23:01

背景

  • 当我们使用(开发)某个软件,可能得确保操作系统、依赖、环境变量相同的问题,这些配置可能就需要花费很多时间。
  • 使用虚拟机,可以解决上述部分问题,但是它又引发了其他问题:资源占用多、冗余步骤多、启动慢等问题,性能不好的笔记本跑起来真的是灾难。
  • 后来人们推出了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.com 或 cloud.docker.com 注册一个账户。然后,用下面的命令登录。

docker login

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

docker image push armouy/vue3-admin

拉取image文件

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

在这里插入图片描述

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

在这里插入图片描述

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

总结

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

参考

  • docker官网

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/696185.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

星辰秘典:揭示Python项目的宇宙奥秘——宇宙星空模拟器(改)

✨博主:命运之光 🌸专栏:Python星辰秘典 🐳专栏:web开发(html css js) ❤️专栏:Java经典程序设计 ☀️博主的其他文章:点击进入博主的主页 前言:你好&#x…

2.7C++基类和派生类转换

C 基类和派生类转换 C中基类与派生类之间的转换有两种方式: 1、向上转换 向上转换是将派生类的指针或引用转换为基类的指针或引用。 向上转换是安全的,因为基类是派生类的公共部分,可以保证派生类对象的所有成员都可以被基类指针或引用访…

Windows11 anaconda配置pytorch环境

生成 .condarc 文件,位于C:\Users\Admin\ conda config --set show_channel_urls yes 记事本打开 .condarc 文件,添加以下内容: channels: - https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/ - https://mirrors.tuna.tsingh…

北上广深共享办公室市场概览

在北上广深这四个城市,共享办公室已经成为一种日益流行的办公模式。随着经济的快速发展和科技创新的不断推进,越来越多的企业开始青睐共享办公室,以适应灵活办公和协作办公的需求。那么,2023年共享办公室市场的前景如何呢&#xf…

头条搜索精选 参数分析

本文所有教程及源码、软件仅为技术研究。不涉及计算机信息系统功能的删除、修改、增加、干扰,更不会影响计算机信息系统的正常运行。不得将代码用于非法用途,如侵立删!头条搜索精选 参数分析 环境 win10Python3.9Chrome抓包接口分析 主要是需要这一块的内容 通过抓包分析发…

一、机器学习概述

一、机器学习概述1.机器学习初步认识2.机器学习类型1)监督学习a.分类b.回归 2)无监督学习a.聚类b.降维 3.机器学习方法1)模型2)损失函数3)优化算法4)模型评估指标 4.开发流程 一、机器学习概述 1.机器学习初…

Openlayers图文版实战,vue项目从0到1做基础配置

Openlayers的实战教程 分为**图文版** 和 **视频版**, 这里的是图文版,包含基础知识介绍和*实战的源代码*,示例效果以gif动图的形式展现出来。 **视频版** 正在录制中,很快会上线,敬请期待~, 如有问题&am…

Java如何实现手动连接数据库(Mysql或Oracle) | 超级详细,建议收藏

👨‍🎓作者:bug菌 ✏️博客: CSDN、 掘金、 infoQ、 51CTO等 🎉简介:CSDN博客专家,C站历届博客之星Top50,掘金/InfoQ/51CTO等社区优质创作者,全网粉丝合计10w&#xff0c…

ant design vue 配置菜单外部打开

实现如下 菜单配置 前端项目地址:http://localhost:3000 菜单路径:dataCenter/HealthData 打开方式:外部 在项目中src-->config-->router.config.js文件 将需要再外部打开的菜单地址进行如下配置 菜单地址:/dataCenter/Hea…

软件测试面试题(完整版)

1、B/S架构和C/S架构区别 B/S 只需要有操作系统和浏览器就行,可以实现跨平台,客户端零维护,维护成本低,但是个性化能力低,响应速度较慢 C/S响应速度快,安全性强,一般应用于局域网中&#xff0c…

力姆泰克LBP滚珠丝杠电动推杆

LBP滚珠丝杠电动推杆 内含长寿命润滑脂,免维护 向下翻动查看更多 力姆泰克电动推杆 高强度/高耐磨材料选择,高精度的零部件加工,先进的壳体设计理念,造就高承载能力,抗冲击,低噪音,长寿命的优…

【AUTOSAR】BMS开发实际项目讲解(八)----BMS热管理冷却功能

热管理参数 项目 模式 BEV 进入条件(℃) 退出条件(℃) 目标水温(℃) 目标流速(L/min) 冷却 一级冷却 行车 T1_in35 T1_out28 20 20 快充 T1_in30 T1_out…

Vue3 刨析响应式 ref 原理

目标 了解 Vue ,手写一个方法,实现响应式,并读懂响应式 源码 class MyRef {constructor(value) {this._value value}// 访问器get value() {console.log(触发 getter 函数 访问);return this._value}// 读取器set value(newVal) {console.l…

微电网数字化系统硬件设备在储能行业中的应用

安科瑞虞佳豪 1如果说火爆的储能行业堪比新能源赛道上的皇冠,那么工商业储能就是皇冠上的明珠。 提及储能,人们习惯更多地关注源网侧储能电站(大储)身上,探讨发电侧配储、利用率、共享储能模式等话题,但其…

不一般!R型变压器直流电阻和绝缘电阻背后的秘密原来是这样!

一般来说,除了技术人员之外,我们可能不太清楚变压器的一些内部电阻,比如什么是R型变压器的直流电阻?事实上,这些都是变压器参数中的一些重要信息,通常与变压器的质量和使用有关。让我们和小r一起来看看什么…

AR项目问题汇总

1、unity使用URP 导致ARFoundation黑屏 (16条消息) unity使用URP 导致ARFoundation黑屏_arfoundation运行iphone黑屏_weixin_46813963的博客-CSDN博客https://blog.csdn.net/weixin_46813963/article/details/117509322Configuring the AR Camera background using a Scriptab…

Android Studio中App Inspection 或Profiler里网络请求数据显示中文乱码解决办法

如题,在Android开发时经常需要网络请求分析,但是Response 里面的中文经常乱码,用如下办法可解决 效果如下: 解决办法 Android studio在 Help中找到Edit Custom VM Options… 并打开文件,在文件中添加 -Dfile.encod…

记录一次 vite 配置别名路径 打包时出错的bug

vite多页应用,由于在vite.config.ts中define中配置的常量pages,而路径别名也有pages,所有导致打包时替换路径出错,将pages常量注释掉就好了 export default defineConfig({root: getRoot(), // 项目根路径base: "/", // 公共基础路径envDir: resolve(__dirname), /…

SpringBoot03:yaml配置注入

目录 一、yaml语法学习 1、配置文件 2、yaml概述 3、yaml基础语法 3.1、字面量:普通的值【数字、布尔值、字符串】 3.2、对象、Map(键值对) 3.3、行内写法: 3.4、数组(list、set) 二、注入配置文件 1、yaml注入配置文件…

selenium\webdriver\remote\errorhandler.py:242: SessionNotCreatedException问题解决

报错信息: raise exception_class(message, screen, stacktrace) E selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 112 E Current browser versi…