前端破圈用Docker开发项目

为什么要用 Docker 开发 🤔

直接在系统上开发不香吗？香，但是 Docker 有下面4香

1. 环境依赖管理：Docker 容器可以管理所有依赖项，例如前端里面的 node 和 npm 版本，不需要在本地安装和维护这些依赖项

2. 隔离：Docker 容器可以隔离应用程序和其运行环境，有助于防止应用程序之间的冲突，也能防止应用程序对主机系统产生意外的更改

3. 易于分发：任何时候都可以将应用程序分发给其他开发人员或测试人员，因为他们可以在任何其他设备上以相同的方式运行该应用程序，而无需进行任何配置，可以直接使用同一个 docker file 文件构建镜像，也可以拉取私有服务中的 docker image

4. 状态管理：如果应用程序是无状态的，可以使用 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:<version> 的方式下载对应的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

> vue3-project-01@0.0.0 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