前端破圈用Docker开发项目
为什么要用 Docker 开发
直接在系统上开发不香吗？香，但是 Docker 有下面4香
-
环境依赖管理：
Docker容器可以管理所有依赖项，例如前端里面的node和npm版本，不需要在本地安装和维护这些依赖项 -
隔离：
Docker容器可以隔离应用程序和其运行环境，有助于防止应用程序之间的冲突，也能防止应用程序对主机系统产生意外的更改 -
易于分发：任何时候都可以将应用程序分发给其他开发人员或测试人员，因为他们可以在任何其他设备上以相同的方式运行该应用程序，而无需进行任何配置，可以直接使用同一个
docker file文件构建镜像，也可以拉取私有服务中的docker image -
状态管理：如果应用程序是无状态的，可以使用
Docker Compose来创建开发和调试环境，并轻松地在不同的环境中部署应用程序。
整体来看使用 Docker 开发应用程序可以提高开发效率，简化部署和分发过程，同时保证应用程序的运行环境和稳定性。
主要还是遇到了实际问题需要处理
遇到的问题
前端开发的项目在本地运行，打包没问题，然后发布到对应的测试环境和线上环境的时候，然后线上打包异常，线上打包使用 DevOps 平台进行的发布，经排查似乎是 Docker 容器中出的问题。
具体场景描述可以看这篇文章 DevOps发版失败，发版仿佛回到了石器时代
解决思路
由于没有 DevOps 服务的操作权限，尝试本地安装 Docker 拉取 node 镜像搭建前端环境容器，先在本地 Docker 容器中测试前端项目，如果运行打包都没问题，把本地的 Docker 容器环境导出来，再发给对应有权限的人帮忙到 DevOps 对应的服务器中再次测试
安装Docker
官网下载
官网地址: https://www.docker.com/
本地系统为 Windows11, 直接下载安装对应的 exe 文件即可, 运行后桌面右下角会出现鲸鱼小图标
也可以在 命令提示符 或 Windows PowerShell 里面执行 docker -v 查看否是安装成功，后面所有的命令操作全部是在 Windows PowerShell 中执行的
拉取镜像
前端环境标配 node 环境，有的会搭配 yarn 等其他工具, 这里先拉取一个 node 镜像
docker pull node
镜像默认是从 Docker Hub 上拉取的，默认拉取的是 latest 最新版本，也可以指定 node 版本
docker pull node:<version>
关于 node 官方镜像详细描述，可以查看如下链接
node - Official Image | Docker Hub
注意⚠
如果遇到WSL相关报错，可能需要更新WSL，可以参考如下链接解决
https://learn.microsoft.com/zh-cn/windows/wsl/install-manual#step-4—download-the-linux-kernel-update-package
安装结束后重启系统
协议超时
再次执行 docker pull node，出现报错，提示 net/http: TLS handshake timeout，TLS握手协议超时，可能镜像服务响应太慢在国外导致的
> docker pull node
Using default tag: latest
Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: TLS handshake timeout
检查 VPN 的配置，发现是 Rule 模式，调整为 Global 模式，重试，好了
> docker pull node
Using default tag: latest
latest: Pulling from library/node
d52e4f012db1: Pull complete
6e5565e0ba8d: Downloading [====> ] 19.85MB/211MB
...
如果没有装 VPN ，也可以配置镜像加速器解决镜像拉取失败的问题，国内很多云服务商都提供了国内加速器服务
科大镜像：https://docker.mirrors.ustc.edu.cn/
网易：https://hub-mirror.c.163.com/
阿里云：https://<你的ID>.mirror.aliyuncs.com
七牛云：https://reg-mirror.qiniu.com
几分钟后最新版的 node 镜像就下载好了，默认是下载的 latest 是 node 最新版，对于生产环境来讲这是不稳定的，我们需要控制生产环境的版本，使用 docker pull node: 的方式下载对应的node版本，使用 docker pull node:16.17.0 下载对应版本 node 镜像，和本地系统上的环境保持一致
下载结束后，使用 docker images 命令检查是否镜像下载成功
> docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
node latest b098c9ebef91 13 days ago 1.1GB
node 16.17.0 e90654c39524 10 months ago 911MB
创建容器
在 Windows PowerShell 中的执行 docker run -ti --name node-16.17.0 -p 8080:8080 -v ${pwd}://workspace node:16.17.0 bash 启动命令，创建一个容器
PS D:\Code> docker run -ti --name node-16.17.0 -p 8080:8080 -v ${pwd}://workspace node:16.17.0 bash
root@4f786e914624:/# ls
bin boot dev etc home lib lib64 media mnt opt proc root run sbin srv sys tmp usr var workspace
注意脚本运行位置
PS D:\Code> 这里是电脑系统里面的代码目录，里面是代码仓库文件
创建交互模式容器
docker run -ti --name <容器名> -p 端口号:端口号 -v ${pwd}://<自定义工作区> <镜像名> bash
命令参数
docker run -ti --name node-16.17.0 -p 8080:8080 -v ${pwd}://workspace node:16.17.0 bash 当前命令各个参数的含义
run: 根据镜像创建并运行一个容器
-ti bash: 输入(交互)模式创建一个容器, 并进入容器bash
--name node-16.17.0: 定义容器名称，这里的容器名称为 node-16.17.0
-v ${pwd}://workspace: 把当前目录目录结构映射到容器中的 workspace 目录下，这里映射的是 D:\Code> 目录下的内容
-p 8080:8080: 端口映射，容器内部的 8080 端口对应外部系统的 8080 端口，因为接下运行的前端项目端口是 8080，如果项目是其他端口，按需修改即可
root@4f786e914624:/# ls
bin boot dev etc home lib lib64 media mnt opt proc root run sbin srv sys tmp usr var workspace
root@4f786e914624:/# cd workspace
root@4f786e914624:/workspace# ls
vue3-project-01
root@4f786e914624:/workspace/vue3-project-01# ls
README.md cypress.config.ts index.html package.json src tsconfig.json tsconfig.vitest.json vitest.config.ts
cypress env.d.ts package-lock.json public tsconfig.app.json tsconfig.node.json vite.config.ts
vue3-project-01 是一个 vue3 前端项目，在系统的 D:\Code> 目录下，接下来使用这个项目在容器中安装依赖，运行，打包等操作
项目地址: https://github.com/gywgithub/vue3-project-01
容器中查看环境
查看当前 node 和 npm 版本
root@4f786e914624:/# node -v
v16.17.0
root@4f786e914624:/# npm -v
8.15.0
这时候容器中为我们需要的 node 版本, 接下来开始测试项目运行情况
容器中运行前端项目
安装项目依赖
进入 workspace 目录中的 vue3-project-01 前端项目，根目录执行 npm i 命令安装前端依赖
root@4f786e914624:/workspace# cd vue3-project-01/
root@4f786e914624:/workspace/vue3-project-01# npm i
added 612 packages, and audited 613 packages in 4m
...
root@4f786e914624:/workspace/vue3-project-01#
前端项目的依赖包安装完成
运行项目
npm run dev 运行前端项目
root@4f786e914624:/workspace/vue3-project-01# npm run dev
> [email protected] dev
> vite
VITE v4.3.9 ready in 3573 ms
➜ Local: http://localhost:8080/
运行成功了，浏览器访问如下效果，到这里就可以在容器中开发前端项目了
注意⚠
如果出现在容器中项目运行成功，但是在页面上无法访问的情况，需要检查创建容器时端口是否正确映射以及端口是否被防火墙拦截
打包项目
npm run build 打包前端项目，也正常没有报错，也正确生成了 dist 文件
root@4f786e914624:/workspace/vue3-project-01# npm run build
...
✓ built in 2.32s
root@59e1b6a61772:/workspace/vue3-project-01# ls
README.md cypress.config.ts env.d.ts node_modules package.json src tsconfig.json tsconfig.vitest.json vitest.config.ts
cypress dist index.html package-lock.json public tsconfig.app.json tsconfig.node.json vite.config.ts
总结回顾
目前来看，使用 vue3-project-01 这个前端项目在 Docker 中开发所有模式都没问题。回到最初的目的，使用 Docker 也是排查公司的项目在 DevOps 中打包失败的原因，那么按照这个流程模式，把出问题的项目地址和端口重新创建对应的容器，然后在容器中进行复现对应的问题点就行了
欢迎大家讨论交流，如果文章感觉有用，随手点个赞再走呗
^_^微信公众号：草帽Lufei