WEB前端有必要学会docker吗?0基础-45分钟带你学会(包含视频笔记案例源代码)

简介: WEB前端有必要学会docker吗?0基础-45分钟带你学会(包含视频笔记案例源代码)

一、为什么要使用docker

docker提供了沙箱环境,能够隔绝物理环境,相当于是之前的虚拟机。而且docker内置了很多镜像可供使用。

Docker容器技术以及docker-compose容器编排技术能最大限度的保证您的项目在开发环境和生产环境上的一致表现。

要想在window系统或mac os中使用docker,需要先安装桌面版,其实相当于是在电脑安装了一个Linux内核+docker环境。

二、Windows10/11系统安装Docker Desktop

Windows10(无论专业版还是家庭版)都能方便安装Docker Desktop

  • 在Docker官网下载最新的Docker Desktop安装,下载地址:https://www.docker.com/
    下载安装包大约有585M,目前最新版是4.15.0安装时,默认C盘,大约3分钟,安装完毕:

  • Docker Desktop启动的时候,有可能弹框提示"WSL2 installations is incomplete",这是您的系统中没有安装WSL2内核的原因,打开https://aka.ms/wsl2kernel,在打开的页面中有一个Linux内核更新包"链接,点击下载,安装。
  • WSL2 Linux内核更新包安装后,重启Docker Desktop即可正常使用。您可在cmd或者PowerShell命令行中使用docker或者docker-compose等相关命令了。

PS: 如果您在安装WSL2的过程中遇到了问题,可能是您的系统版本较低等原因,您可按照https://aka.ms/wsl2kernel 页面的相关提示更新系统。该Docker Desktop的安装方法基于Windows10WSL2如果您的系统没有或者不能安装WSL2,可能不能使用该方法安装Docker Desktop

对于win11 家庭版,需要在win10的基础上多一个前置步骤,才能安装成功:

  1. win11 中打开启用或关闭window功能,看选项中是否有hyper-v

  2. 如果没有,则需要运行一个BAT脚本,以便激活该功能,将以下代码保存为bat文件,然后使用管理员方式运行。经过大约5分钟,自动重启电脑即可:
pushd "%~dp0"
dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum >hv.txt
for /f %%i in ('findstr /i . hv.txt 2^>nul') do dism /online /norestart /add-package:"%SystemRoot%\servicing\Packages\%%i"
del hv.txt
Dism /online /enable-feature /featurename:Microsoft-Hyper-V -All /LimitAccess /ALL
pause

三、如何判断电脑已经安装好docker

CMD输入 docker,如果有反应表示安装成功

四、docker前端应用实战:将vue项目打包为docker镜像运行

使用docker可以方便将其他人的项目直接运行,而不需要配置。

比如我这里已经有一个vue项目,接下来实操打包为镜像在本地运行或部署到docker镜像,只需要4步即可完成!

1、将vue的项目进行构建,输出dist

这个步骤就相当于是将vue的项目 npm run build 打包到服务器是一样的。

2、准备镜像内容

dist目录之上新建一个Dockerfile文件,该文件没有后缀,文件名即为此。然后输入如下内容:

FROM nginx:latest
LABEL Author imqdcn
COPY dist /usr/share/nginx/html

第一行:设置基础镜像,基础镜像使用nginx

第二行:作者信息

第三行:将dist文件夹下面的内容拷贝到/usr/share/nginx/html目录下面(nginx的默认项目路径),也就是我们Vue项目打包之后我们正常使用nginx是拷贝过去的文件夹。

3、制作镜像
docker build -t 镜像名字 .
# 比如:
docker build -t vue3project .

注意:后面的.不能省略,镜像创建成功之后使用docker images即可看到自己创建的镜像。

整个制作过程大概为1-5分钟。

4、启动镜像
docker run -d --name 镜像名字 -p 8888:80 vue3project

启动命令说明:

-d:容器在后台启动

—name : 镜像名称

-p 8888:80 :将nginx容器的80端口映射到主机的8888端口,我们访问时直接访问主机ip+映射到主机的端口,这里是8888,如果有路径,后面还要带上路径。 比如这里表示访问路径为:localhost:8888

vue3project: 我们刚刚创建的自己的镜像的名称,在创建时就要规划好名字

注意:

你制作完镜像后,就可以在自己的docker desktop看到镜像,并且在那里直接配置访问端口和将镜像放置在容器中运行。

容器:

至此,你就相当于是将本地的vue的项目打包为一个docker镜像,并且可以在本地运行查看了,就像你部署到了一台虚拟服务器中!

五、如何发布镜像到 docker Hub中,以便分享给其他人下载和运行

1、发布到docker Hub库中

发布指令,其实很简单,直接在命令行输入如下命令即可:

docker push imqdcn/xxx:latest
# docker push 注册用户名/镜像名:tag名

意味着,你需要先注册和登录docker-desktop

然后通过命令行,运行docer login 登录,看是否命令行也已经登录成功:

如果你的镜像名字在最开始时没起好名或与其他人发布的镜像名有冲突,可以通过如下方式改名:

docker tag xxx imqdcn/xxx
# 表示将xxx改名为 imqdcn/xxx,你也可以改为任意你喜欢的名字,比如imqdcn/vue3project

至于tag名,则可以通过docker images看到:

改名后:

以上都完成,就可以使用 第一条发布指令进行发布了。

你可以在docker-desktop通过搜索该镜像名字找到镜像地址,或打开https://hub.docker.com/查找你发布的镜像:

2、发布后,其他人如何下载和运行呢?

镜像作者发给你hub镜像地址后,上面有拉取指令:

可以在命令行中先通过执行 docker pull下载到本地:

docker pull imqdcn/xxx
# 如果后面没有写tagname,则使用默认的tagName:latest

运行以上指令,即可在docker desktop看到该镜像,并可运行该镜像。

六、前端有必要学会docker吗

目前大部分公司都会将项目通过docker的方式部署到测试、预演、生产环境中。

虽然这些工作基本上都是由后端开发、测试工程师或运维工程师来完成,并不需要前端参与。俗话说技多不压身,从目前趋势来看,docker学起来简单,用起来也不复杂,仅从个人技术提升和兴趣爱好方面也是有必要学会的。

笔记源码下载:imqd.cn/why-web-developer-should-study-docker.html

如果你对web前端开发、面试感兴趣的话可以加V:imqdcnn。群里有各种学习资源发放,免费答疑,更有行业深潜多年的技术牛人分析讲解。

祝你能成为一名优秀的WEB前端开发工程师

相关文章
|
1月前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
48 0
|
1月前
ssm使用全注解实现增删改查案例——web.xml
ssm使用全注解实现增删改查案例——web.xml
9 0
|
1月前
|
开发者 Docker Python
深入浅出:使用Docker容器化部署Python Web应用
在当今快速发展的软件开发领域,Docker作为一个开放平台,为开发者提供了将应用打包在轻量级、可移植的容器中的能力,从而简化了部署和管理应用程序的复杂性。本文将通过一个简单的Python Web应用示例,引导读者理解Docker的基本概念、容器化的优势以及如何使用Docker来容器化部署Python Web应用。我们将从零开始,逐步探索创建Dockerfile、构建镜像、运行容器等关键步骤,旨在为读者提供一个清晰、易于理解的指南,帮助他们掌握使用Docker容器化部署应用的技能。
|
23天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
91 0
|
30天前
|
前端开发 应用服务中间件 nginx
使用Docker快速搭建Web服务器Nginx
本文指导如何使用Docker快速搭建Nginx服务器。首先,通过`docker pull`命令获取Nginx镜像,然后以容器形式运行Nginx并映射端口。通过挂载目录实现本地文件与容器共享,便于自定义网页。使用`docker ps`检查运行状态,访问IP:8088确认部署成功。最后,介绍了停止、删除Nginx容器的命令,强调Docker简化了服务器部署和管理。
50 0
|
17小时前
|
存储 运维 Kubernetes
Docker+Kubernetes/K8s+Jenkins视频资料【干货分享】
Docker+Kubernetes/K8s+Jenkins视频资料【干货分享】
Docker+Kubernetes/K8s+Jenkins视频资料【干货分享】
|
1天前
|
测试技术 Linux Docker
【好玩的经典游戏】Docker部署FC-web游戏模拟器
【好玩的经典游戏】Docker部署FC-web游戏模拟器
8 1
|
7天前
|
测试技术 Linux 网络安全
【好玩的开源项目】使用Docker部署SyncTV视频同步和共享平台
【4月更文挑战第16天】使用Docker部署SyncTV视频同步和共享平台
47 1
|
10天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
1月前
|
监控 数据可视化 虚拟化
Docker容器常用命令笔记分享
Docker容器常用命令笔记分享
50 2