当前位置：首页 > article >正文

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

article 2024/11/15 4:42:35

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

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

报错信息具体内容

# node -v
node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)

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的多阶段构建，想了解的可以自己去研究，或许后期我会抽空介绍它的好处）

# 构建阶段
FROM node:20.16-alpine as builder

# 设置工作目录
WORKDIR /app

# 复制package.json和package-lock.json（如果存在）
COPY package*.json ./

# 安装项目依赖
RUN npm install

# 复制项目文件到工作目录
COPY . .

# 构建应用
RUN npm run build

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

1. 构建

2. 启动容器

3. 复制到目标目录

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

一个全功能辅助的nodejs脚本

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

function buildRunCopy(imageName, dockerfileDir, containerDist, outputDir) {
  // 生成容器名称
  const containerName = `container-${imageName}`;

  // 构建 Dockerfile 路径和输出目录的绝对路径
  const dockerfilePath = path.resolve(dockerfileDir, "Dockerfile");
  const hostDir = path.resolve(outputDir);

  try {
    // 创建宿主机目录（如果不存在的话）
    if (!fs.existsSync(hostDir)) {
      fs.mkdirSync(hostDir, { recursive: true });
    }

    // 构建 Docker 镜像
    console.log("Building Docker image...");
    execSync(
      `docker build -t ${imageName} -f ${dockerfilePath} ${dockerfileDir}`,
      {
        stdio: "inherit",
        cwd: dockerfileDir,
      }
    );
    console.log("Docker image built successfully.");

    // 运行 Docker 容器
    console.log("Running Docker container...");
    execSync(`docker run --name ${containerName} -d ${imageName}`);
    console.log("Docker container started successfully.");


    // 复制容器内的目录到宿主机目录
    execSync(`docker cp ${containerName}:/${containerDist} ${hostDir}`);
    console.log("Files copied successfully.");
  } catch (error) {
    console.error(`Error: ${error.message}`);
    throw error;
  } finally {
    // 停止并移除 Docker 容器
    try {
      console.log("Removing Docker container...");
      execSync(`docker rm -f ${containerName}`);
      console.log("Docker container removed successfully.");
    } catch (removeError) {
      console.error(`Error removing Docker container: ${removeError.message}`);
    }
  }
}

脚本函数用法举例

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

// 构建 build.cjs 
  const basePath = path.join(projectsBasePath, "test-app");
  const tmpDistFolder = path.join(basePath, "dist");
  console.info(`清理构建临时目录`);
  fs.rmSync(tmpDistFolder, { recursive: true, force: true });
  buildRunCopy("test-app", basePath, "/app/dist", basePath);

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