前端破圈用Docker开发项目

前端破圈用Docker开发项目_第1张图片

为什么要用 Docker 开发

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

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

  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 镜像就下载好了,默认是下载的 latestnode 最新版,对于生产环境来讲这是不稳定的,我们需要控制生产环境的版本,使用 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

容器中查看环境

查看当前 nodenpm 版本

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/

运行成功了,浏览器访问如下效果,到这里就可以在容器中开发前端项目了

前端破圈用Docker开发项目_第2张图片

注意⚠

如果出现在容器中项目运行成功,但是在页面上无法访问的情况,需要检查创建容器时端口是否正确映射以及端口是否被防火墙拦截

前端破圈用Docker开发项目_第3张图片

打包项目

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

你可能感兴趣的:(用工程师思维解决实际问题,前端,docker,容器)