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

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

前端打包方式

  • docker启动临时容器打包,命令如下
docker run --rm -w /app -v `pwd`:/app alpine-node-common:v16.20-pro sh -c "yarn install && yarn build"
  • Dockfile如下:
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"]

排查

  • 一开始想到是容器内的网络问题,容器的默认网络模式是桥接,遂改成主机模式,但仍然还是提示网络问题
docker run --rm --network=host -w /app -v `pwd`:/app alpine-node-common:v16.20-pro sh -c "yarn install && yarn build"
  • 然后就开始排查宿主机的问题,以为是容器内阿里云的镜像不生效,发现网络正常。
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中修改了源为阿里云的镜像源。
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的地址了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/940555.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

harmony UI组件学习(1)

Image 图片组件 string格式,通常用来加载网络图片,需要申请网络访问权限:ohos.permission.INTERNET Image(https://xxx.png) PixelMap格式,可以加载像素图,常用在图片编辑中 Image(pixelMapobject) Resource格式,加…

mac 安装graalvm

Download GraalVM 上面链接选择jdk的版本 以及系统的环境下载graalvm的tar包 解压tar包 tar -xzf graalvm-jdk-<version>_macos-<architecture>.tar.gz 移入java的文件夹目录 sudo mv graalvm-jdk-<version> /Library/Java/JavaVirtualMachines 设置环境变…

14-zookeeper环境搭建

0、环境 java&#xff1a;1.8zookeeper&#xff1a;3.5.6 1、下载 zookeeper下载点击这里。 2、安装 下载完成后解压&#xff0c;放到你想放的目录里。先看一下zookeeper的目录结构&#xff0c;如下图&#xff1a; 进入conf目录&#xff0c;复制zoo_sample.cfg&#xff0…

如何使用Python处理视频合成

使用 Python 处理视频合成可借助 MoviePy 库&#xff0c;以下是具体步骤&#xff1a; 安装 MoviePy 通过 pip 命令安装&#xff0c;即 pip install moviepy&#xff0c;需确保已安装 ffmpeg&#xff0c;并正确设置环境变量&#xff0c;因为 MoviePy 依赖它来处理视频. 基本合…

存储过程 与 存储函数的区别及用法 及 触发器 !!!

引言&#xff1a; 存储函数和存储过程&#xff0c;作为数据库中的预编译代码块&#xff0c;能够封装复杂的业务逻辑和数据处理流程&#xff0c;使得数据库操作更加简洁、易读和可维护。而触发器&#xff0c;则像是一个智能的守卫&#xff0c;能够在特定事件发生时自动执行预设的…

用nginx部署两个前端(超简单,三步!)

1.首先在nginx的html目录下创两个文件夹分别用于放两个前端打包好的静态资源&#xff0c;并且把静态资源各自放好&#xff1a; 2. 在nginx的配置文件里&#xff0c;写好两个server。如图&#xff0c;写好两个前端要用的端口以及刚才那两文件夹的路径&#xff1a; worker_proces…

level2逐笔委托查询接口

沪深逐笔委托队列查询 前置步骤 分配数据库服务器 查询模板 以下是沪深委托队列查询的请求模板&#xff1a; http://<数据库服务器>/sql?modeorder_book&code<股票代码>&offset<offset>&token<token>查询参数说明 参数名类型说明mo…

flask-admin的modelview 实现list列表视图中某个列字段值翻译

背景&#xff1a; flask-admin 开发中modelview视图是非常强大的&#xff0c;但文档写的很难受&#xff0c;只能通过源码慢慢摸索学习&#xff0c;一点点记录 材料&#xff1a; 可用的flask-admin 环境 制作&#xff1a; 样例代码&#xff1a; 1、modelview 视图代码 col…

打造基于 SSM 和 Vue 的卓越电脑测评系统:挖掘电脑潜力

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常适…

物联网:全面概述、架构、应用、仿真工具、挑战和未来方向

中文论文标题&#xff1a;物联网&#xff1a;全面概述、架构、应用、仿真工具、挑战和未来方向 英文论文标题&#xff1a;Internet of Things: a comprehensive overview, architectures, applications, simulation tools, challenges and future directions 作者信息&#x…

【AI学习】OpenAI推出o3,向AGI迈出关键一步

2024年12月21日&#xff0c;OpenAI在其为期12天发布会活动的最后一天&#xff0c;正式发布了备受期待的o3系列模型&#xff0c;包括o3和o3-mini。 o3 是一个非常强大的模型&#xff0c;在编码、数学以及 ARC-AGI 基准测试等多个基准上超过了 OpenAI 此前的 o1 模型&#xff08…

Oracle 中间件 Webcenter Portal服务器环境搭建

环境信息 服务器基本信息 如下表&#xff0c;本次安装总共使用2台服务器&#xff0c;具体信息如下&#xff1a; Webcenter1服务器 归类 SOA服务器 Ip Address 172.xx.xx.xx.xx HostName wcc01.xxxxxx.com Alias wccprd01 Webcenter2服务器 归类 OSB服务器 Ip Addr…

仿途唬养车系统汽修服务小程序修车店小程序源码

仿途唬养车系统汽修服务小程序修车店小程序源码 用户端&#xff0b;商家端&#xff0b;师傅端 也支持根据客户保养记录&#xff0c;系统自动推送 定期车检短信提醒 功能介绍: 支持下单上门服务、到店核销&#xff0c;支持单独选择项目、也支持选择服务人员、 和选择门店…

CAD xy坐标标注(跟随鼠标位置实时移动)——C#插件实现

效果如下&#xff1a; &#xff08;使用方法&#xff1a;命令行输入 “netload” 加载此dll插件&#xff0c;然后输入“xx”运行&#xff0c;选择文件夹即可。&#xff09; 部分代码如下&#xff1a; #if DEBUG using Autodesk.AutoCAD.DatabaseServices; using Autodesk.AutoC…

Java性能调优 - JVM性能监测及调优

JVM 内存模型概述 堆 堆是JVM内存中最大的一块内存空间&#xff0c;该内存被所有线程共享&#xff0c;几乎所有对象和数组都被分配到了堆内存中。堆被划分为新生代和老年代&#xff0c;新生代又被进一步划分为Eden和Survivor区&#xff0c;最后Survivor由From Survivor和To Su…

RK3588 , mpp硬编码yuv, 保存MP4视频文件.

RK3588 , mpp硬编码yuv, 保存MP4视频文件. ⚡️ 传送 ➡️ Ubuntu x64 架构, 交叉编译aarch64 FFmpeg mppRK3588, FFmpeg 拉流 RTSP, mpp 硬解码转RGBRk3588 FFmpeg 拉流 RTSP, 硬解码转RGBRK3588 , mpp硬编码yuv, 保存MP4视频文件.

【计算机网络2】计算机网络的性能能指标

目录 一 、计算机网络的性能指标 二、具体介绍 1、速 率 2、带 宽 3、吞 吐 量 4、时 延 5、时延带宽积 6、往 返 时 延 7、信道利用率 一 、计算机网络的性能指标 计算机网络的性能指标就是从不同方面度量计算机网络的性能&#xff0c;有如下7个指标&#xff1a; 速…

OpenAI 12天发布会(12 Days of OpenAI)总结

在OpenAI的“12 Days of OpenAI”活动中&#xff0c;每一天都会发布新的功能或技术&#xff0c;展示公司在AI领域的最新进展。首先展示下全部功能发布完成后&#xff0c;现在ChatGPT的界面&#xff1a; 以下是每一天的简要概述及其意义&#xff1a; 第1天 - 完整版O1模型 今天…

android:sharedUserId 应用进程声明介绍

背景 adb install 安装系统软件报错,原因是签名不一致,进程改变。 代码分析 AndroidManifest.xml 定义的 android:sharedUserId 应用归属进程不同,从phone切换到system。 初始配置 <manifest xmlns:android="http://schemas.android.com/apk/res/android"c…

Spark优化----Spark 性能调优

目录 常规性能调优 常规性能调优一&#xff1a;最优资源配置 常规性能调优二&#xff1a;RDD 优化 RDD 复用 RDD 持久化 RDD 尽可能早的 filter 操作 常规性能调优三&#xff1a;并行度调节 常规性能调优四&#xff1a;广播大变量 常规性能调优五&#xff1a;Kryo 序列化 常规性…