《拿下奇怪的前端报错》：nvm不可用报错`GLIBC_2.27‘‘GLIBCXX_3.4.20‘not Found？+ 使用docker构建多个前端项目实践

25-03-07 23:03

12160

blog.csdn.net

id="article_content" class="article_content clearfix"> id="content_views" class="htmledit_views">

有些前端的小伙伴可能会好奇，nvm是什么？这里接简单介绍下，它是一个Nodejs版本管理工具。为什么需要它呢？当然是需要多个Nodejs版本的时候，那什么时候需要多个Nodejs版本？那肯定是在有点年头的公司了，例如vue2的很多依赖都是在Nodejs14年代的，如果你升级到Node20，那很可能会报错。如果你用vite创建新项目，那也肯定是没法在Node14下运行。（如果你问为啥要Nodejs，欢迎留言，或者看一部它的纪录片哈）

迭代过快虽然能够享受到各种新科技，但对于很多公司来说，去适配nodejs版本也是不太值得投入的成本。ε=(´ο｀*)))唉，想想前端就累呀

报错信息具体内容

 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1">

class="hljs-ln-code"> class="hljs-ln-line"># node -v

class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2">

 class="hljs-ln-code"> class="hljs-ln-line">node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node) class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line">node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line">node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)

class="hljs-button signin active add_def" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

nodejs都不可用，更别说构建了，如果构建不出东西，在这个依赖框架的年代，就相当于白干啊！突然怀念jquery的时代了，(#^.^#)

触发场景

有老的vue项目，需要nodejs14 （这个必须的，18+就构建不了！）
有新的vue3项目，需要nodejs20+ （vite需要的，ε=(´ο｀*)))唉，自己开发是挺爽，但没想到CI这里出问题了哈）
必须要jenkins上部署和构建（jenkins跑在linux上，之前我被windows server版docker搞的头发掉了一大撮）
构建物必须是一个docker镜像，这几个项目放在一个镜像（就是要一次构建多个项目）

好像上面是这个时代比较通用的了，于是便很自然的安装了nvm，构建不同项目之前，用nvm切换下。

问题分析

但是，当我构建vue3项目是，就遇到上面的报错了。呃，搜索一通，么得什么头绪，我发现切回去node16就可以了，啊，竟然是版本问题，后面发现是宿主机的centos版本太低了，我的天！我没想到一个前端竟然遇到这个问题，也算是长姿势了！

于是这时候就有个解决办法了，那就是让运维的部署点高版本的centos吧！提了个需求，但不知道何时才能实现，等等等

解决办法

看到这里，问题大概就是找到了，也可以解决了：那就是升级centos版本

解决问题思路扩展

在docker容器内构建项目

但是我从第一性原理开始想，为啥我需要安装这个Nodejs呢？既然产出物是前端代码，部署又不需要这个nodejs（只需要一个nginx镜像+那些构建物），构建的时候能不能使用Docker构建，只要用不同的镜像去构建，不就可以了？说干就干。

下面是Dockerfile构建脚本：阶段1构建，注意不同的项目修改自己node:版本（这里用到了docker的多阶段构建，想了解的可以自己去研究，或许后期我会抽空介绍它的好处）

 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line"># 构建阶段
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">FROM node:20.16-alpine as builder
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line"> 
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line"># 设置工作目录
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">WORKDIR /app
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line"> 
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line"># 复制package.json和package-lock.json（如果存在）
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line">COPY package*.json ./
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line"> 
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line"># 安装项目依赖
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line">RUN npm install
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line"> 
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line"># 复制项目文件到工作目录
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line">COPY . .
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line"> 
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line"># 构建应用
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line">RUN npm run build class="hide-preCode-box"> class="hljs-button signin active add_def" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

这个构建的产出物在镜像内的/app/dist，如果是直接docker部署，可以使用第二个stage直接复制到新的镜像中，但此时为考虑到某些场景需要提取出这个目录，就需要一个辅助的nodejs方法：

1. 构建

2. 启动容器

3. 复制到目标目录

启动临时容器复制到宿主机目录

一个全功能辅助的nodejs脚本

下面这个方法是一个build.cjs脚本内容，构建的时候，定义好需要构建的模块，然后node build.cjs就可以了，这里不展开。

 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">function buildRunCopy(imageName, dockerfileDir, containerDist, outputDir) {
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">  // 生成容器名称
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">  const containerName = `container-${imageName}`;
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line"> 
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">  // 构建 Dockerfile 路径和输出目录的绝对路径
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line">  const dockerfilePath = path.resolve(dockerfileDir, "Dockerfile");
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">  const hostDir = path.resolve(outputDir);
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line"> 
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"> class="hljs-ln-code"> class="hljs-ln-line">  try {
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"> class="hljs-ln-code"> class="hljs-ln-line">    // 创建宿主机目录（如果不存在的话）
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"> class="hljs-ln-code"> class="hljs-ln-line">    if (!fs.existsSync(hostDir)) {
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"> class="hljs-ln-code"> class="hljs-ln-line">      fs.mkdirSync(hostDir, { recursive: true });
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"> class="hljs-ln-code"> class="hljs-ln-line">    }
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"> class="hljs-ln-code"> class="hljs-ln-line"> 
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"> class="hljs-ln-code"> class="hljs-ln-line">    // 构建 Docker 镜像
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"> class="hljs-ln-code"> class="hljs-ln-line">    console.log("Building Docker image...");
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"> class="hljs-ln-code"> class="hljs-ln-line">    execSync(
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"> class="hljs-ln-code"> class="hljs-ln-line">      `docker build -t ${imageName} -f ${dockerfilePath} ${dockerfileDir}`,
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"> class="hljs-ln-code"> class="hljs-ln-line">      {
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"> class="hljs-ln-code"> class="hljs-ln-line">        stdio: "inherit",
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="21"> class="hljs-ln-code"> class="hljs-ln-line">        cwd: dockerfileDir,
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="22"> class="hljs-ln-code"> class="hljs-ln-line">      }
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="23"> class="hljs-ln-code"> class="hljs-ln-line">    );
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="24"> class="hljs-ln-code"> class="hljs-ln-line">    console.log("Docker image built successfully.");
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="25"> class="hljs-ln-code"> class="hljs-ln-line"> 
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="26"> class="hljs-ln-code"> class="hljs-ln-line">    // 运行 Docker 容器
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="27"> class="hljs-ln-code"> class="hljs-ln-line">    console.log("Running Docker container...");
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="28"> class="hljs-ln-code"> class="hljs-ln-line">    execSync(`docker run --name ${containerName} -d ${imageName}`);
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="29"> class="hljs-ln-code"> class="hljs-ln-line">    console.log("Docker container started successfully.");
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="30"> class="hljs-ln-code"> class="hljs-ln-line"> 
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="31"> class="hljs-ln-code"> class="hljs-ln-line"> 
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="32"> class="hljs-ln-code"> class="hljs-ln-line">    // 复制容器内的目录到宿主机目录
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="33"> class="hljs-ln-code"> class="hljs-ln-line">    execSync(`docker cp ${containerName}:/${containerDist} ${hostDir}`);
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="34"> class="hljs-ln-code"> class="hljs-ln-line">    console.log("Files copied successfully.");
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="35"> class="hljs-ln-code"> class="hljs-ln-line">  } catch (error) {
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="36"> class="hljs-ln-code"> class="hljs-ln-line">    console.error(`Error: ${error.message}`);
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="37"> class="hljs-ln-code"> class="hljs-ln-line">    throw error;
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="38"> class="hljs-ln-code"> class="hljs-ln-line">  } finally {
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="39"> class="hljs-ln-code"> class="hljs-ln-line">    // 停止并移除 Docker 容器
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="40"> class="hljs-ln-code"> class="hljs-ln-line">    try {
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="41"> class="hljs-ln-code"> class="hljs-ln-line">      console.log("Removing Docker container...");
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="42"> class="hljs-ln-code"> class="hljs-ln-line">      execSync(`docker rm -f ${containerName}`);
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="43"> class="hljs-ln-code"> class="hljs-ln-line">      console.log("Docker container removed successfully.");
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="44"> class="hljs-ln-code"> class="hljs-ln-line">    } catch (removeError) {
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="45"> class="hljs-ln-code"> class="hljs-ln-line">      console.error(`Error removing Docker container: ${removeError.message}`);
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="46"> class="hljs-ln-code"> class="hljs-ln-line">    }
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="47"> class="hljs-ln-code"> class="hljs-ln-line">  }
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="48"> class="hljs-ln-code"> class="hljs-ln-line">} class="hide-preCode-box"> class="hljs-button signin active add_def" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

脚本函数用法举例

下面就是一个例子：将项目某个test-app下面的项目进行构建，并将其构建物从/app/dist复制到原项目下面的dist目录

 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">// 构建 build.cjs 
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">  const basePath = path.join(projectsBasePath, "test-app");
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">  const tmpDistFolder = path.join(basePath, "dist");
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line">  console.info(`清理构建临时目录`);
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">  fs.rmSync(tmpDistFolder, { recursive: true, force: true });
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line">  buildRunCopy("test-app", basePath, "/app/dist", basePath); class="hljs-button signin active add_def" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

然后就可以实现使用docker构建项目了，宿主机的nodejs只需要跑这个脚本，构建过程用到的nodejs是来自于容器内的，想用啥版本直接修改Dockerfile文件就可了

看完记得活动下脖子，这算是我今天的前3.5个小时的总结了...

注：本文转载自blog.csdn.net的余生H的文章"https://blog.csdn.net/m0_38015699/article/details/142327130"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。

复制链接

发表评论

/ 登录

评论记录：

未查询到任何数据！