前端yarn工具打包时网络连接问题排查与解决

最近线上前端打包时提示 "There appears to be trouble with your network connection",以此文档记录下排查过程。

前端打包方式

  • docker启动临时容器打包,命令如下
bash 复制代码
docker run --rm -w /app -v `pwd`:/app alpine-node-common:v16.20-pro sh -c "yarn install && yarn build"
  • Dockfile如下:
dockerfile 复制代码
FROM alpine:3.16

RUN sed -i "s/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g" /etc/apk/repositories \
    && apk update && apk upgrade \
    && apk add --no-cache nodejs npm && npm install -g yarn \
    && npm config set registry https://registry.npmmirror.com \
    && yarn config set registry https://registry.npmmirror.com \
    && yarn config set ignore-engines true  \
    && yarn config set "strict-ssl" false -g \
    && rm -rf /var/cache/apk/* && rm -rf /tmp/*

CMD ["node"]

排查

  • 一开始想到是容器内的网络问题,容器的默认网络模式是桥接,遂改成主机模式,但仍然还是提示网络问题
bash 复制代码
docker run --rm --network=host -w /app -v `pwd`:/app alpine-node-common:v16.20-pro sh -c "yarn install && yarn build"
  • 然后就开始排查宿主机的问题,以为是容器内阿里云的镜像不生效,发现网络正常。
bash 复制代码
dev@localhost:~$ curl -I https://registry.npmmirror.com
HTTP/2 200 
server: Tengine
content-type: application/json; charset=utf-8
content-length: 1264
strict-transport-security: max-age=5184000
date: Fri, 20 Dec 2024 08:42:13 GMT
vary: Origin
....
  • 我又看了一遍报错信息,发现在yarn install的时候,读取的竟然是官方源地址: https://registry.yarnpkg.com,但我在dockerfile中修改了源为阿里云的镜像源。
bash 复制代码
yarn install v1.22.22
[1/4] Resolving packages...
warning unplugin-auto-import > magic-string > sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
error Error: https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz: ETIMEDOUT
    at Timeout._onTimeout (/usr/local/lib/node_modules/yarn/lib/cli.js:142070:19)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7)
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...

AI解惑

  • 我先看了项目的yarn.lock文件,发现也是官方源地址: https://registry.yarnpkg.com,此时报错差不多明白了。由于官方源站在国外,国内访问速度极慢,导致下载超市才会提示网络问题. 但我仍然不理解,设置了阿里云的源下载仍会去官方源地址下载,遂去问了AI。



解决

至此算是明白为何明明设置了阿里云镜像源,仍会打包失败了,遂让前端同事把yarn.lock文件的地址批量修改为阿里云镜像源地址即可,问题解决!

总结

关于yarn.lock文件中地址的访问流程:

  • 如果是第一次运行项目,yarn会读取yarn config list中设置的registry的地址来下载依赖,如果没设置则使用官方源地址。
  • 如果是已有项目安装依赖,有yarn.lock文件则直接读取,不会在读取yarn config list中设置的registry的地址了。
相关推荐
风清再凯3 分钟前
自动化工具ansible,以及playbook剧本
运维·自动化·ansible
深圳安锐科技有限公司6 分钟前
深圳安锐科技发布国内首款4G 索力仪!让斜拉桥索力自动化监测更精准高效
运维·安全·自动化·自动化监测·人工监测·桥梁监测·索力监测
猫头虎10 分钟前
猫头虎 AI工具分享:一个网页抓取、结构化数据提取、网页爬取、浏览器自动化操作工具:Hyperbrowser MCP
运维·人工智能·gpt·开源·自动化·文心一言·ai编程
墨菲安全29 分钟前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing30 分钟前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆30 分钟前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding2 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机2 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人2 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
cocologin2 小时前
RIP 技术深度解析
运维·网络·网络协议