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

文章目录

一、为什么要使用docker
二、Windows10/11系统安装Docker Desktop
三、如何判断电脑已经安装好docker
四、docker前端应用实战：将vue项目打包为docker镜像运行
- 1、将vue的项目进行构建，输出dist
- 2、准备镜像内容
- 3、制作镜像
- 4、启动镜像
五、如何发布镜像到 docker Hub中，以便分享给其他人下载和运行
- 1、发布到docker Hub库中
- 2、发布后，其他人如何下载和运行呢？
六、前端有必要学会docker吗

一、为什么要使用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的安装方法基于Windows10的WSL2如果您的系统没有或者不能安装WSL2，可能不能使用该方法安装Docker Desktop。

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

在win11 中打开启用或关闭window功能，看选项中是否有hyper-v：

如果没有，则需要运行一个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前端开发工程师！