如何在公网环境下使用镜像编译前端项目

最近用内网在devops流水线跑前端项目，有个前端模块在构建的时候一直报各种依赖缺失或者工具缺失的问题（也尝试了各种办法==），最后打算换过一种方式，就是先用本地的环境编译好这个前端模块，即使用本地公网环境+使用之前在devops平台上编译前端服务的镜像包，而且在公网的情况下，拉依赖或者安装工具会更方便些。

前提：电脑安装了docker环境，本人电脑是安装了docker-desktop，然后用xshell连接

（参考的是xshell连接windows10中的docker_xshell连接windows docker-优快云博客）

需要注意的是，要以管理员的身份打开命令行窗口

我这里就大概讲述一下我如何操作的。。。

1、先获取到镜像包，以我的node14-v2.tar为例，执行

docker load -i node14-v2.tar

• docker load：

  • 用于加载一个从 docker save 命令保存的 Docker 镜像文件。

  • 这个命令会将 tar 文件中的镜像数据解压到 Docker 的镜像存储中。

• -i：

  • 指定输入文件的路径。如果不使用 -i，Docker 会尝试从标准输入（stdin）读取数据。

  • 在这个例子中，-i 后面跟的是 node14-v2.tar，表示从当前目录下的 node14-v2.tar 文件加载镜像。

• node14-v2.tar：

  • 这是一个 tar 归档文件，通常由 docker save 命令生成。

  • 它包含了 Docker 镜像的所有层（layers）和元数据（metadata）。

命令的作用

这个命令的作用是从 node14-v2.tar 文件中加载一个 Docker 镜像。执行后，这个镜像将被加载到你的 Docker 环境中，你可以使用 docker images 查看所有可用的镜像，以本人为例，最后获取的是关于cmgii-devops.io/public/node:14.17.6-bullseye-slim-v8的镜像信息。

2、使用使用 cmgii-devops.io/public/node:14.17.6-bullseye-slim-v8 镜像编译和打包本地前端项目（地址为D:\xxx\xxx\Codes\Frontend\xxx-xxx-web）。

如果你的前端项目位于 D:\xxx\xxx\Codes\Frontend\xxx-xxx-web，并且你希望使用 cmgii-devops.io/public/node:14.17.6-bullseye-slim-v8 镜像来编译和打包项目，可以通过以下步骤实现：

步骤 1：确保 Docker 在 Windows 上正确运行

确保你的 Docker 守护进程正在运行，并且你的用户属于 docker 用户组。你可以通过以下命令检查 Docker 服务状态：

docker info

步骤 2：挂载项目目录到 Docker 容器

使用 docker run 命令启动一个容器，并将你的项目目录挂载到容器中。这样，容器可以访问你的项目代码。

步骤 3：运行容器并执行构建命令

在容器中运行 npm install 和 npm run build 命令来安装依赖并编译项目。

具体操作

1. 打开命令提示符（CMD）

确保你以管理员权限运行命令提示符。

2. 运行 Docker 容器并挂载项目目录

docker run -it --rm -v D:/xxx/xxx/Codes/Frontend/xxx-xxx-web:/app cmgii-devops.io/public/node:14.17.6-bullseye-slim-v8 /bin/bash

• -it：以交互模式运行容器。

• --rm：容器退出后自动删除。

• -v D:\xxx\xxx\Codes\Frontend\xxx-xxx-web:/app：将本地项目目录挂载到容器的 /app 目录。

• cmgii-devops.io/public/node:14.17.6-bullseye-slim-v8：指定使用的镜像。

• /bin/bash：启动容器后进入 bash shell。

3. 在容器中安装依赖并构建项目

容器启动后，你将进入容器的 bash shell。运行以下命令：

cd /app
npm install
npm run build

• cd /app：切换到挂载的项目目录。

• npm install：安装项目依赖。

• npm run build：运行构建脚本，生成打包文件。

4. 验证打包结果

构建完成后，打包生成的文件通常位于项目的 dist 或 build 目录中。你可以通过以下命令查看打包结果：

ls dist

注意事项

1. 路径格式：

   • 在 Windows 上，路径分隔符是 \，但在 Docker 命令中，路径需要使用 /。例如，D:\xxx\xxx\Codes\Frontend\xxx-xxx-web 应写为 D:/xxx/xxx/Codes/Frontend/xxx-xxx-web。

2. 权限问题：

   • 确保你有权限访问 D:\xxx\xxx\Codes\Frontend\xxx-xxx-web 目录。

3. Docker 守护进程：

   • 确保 Docker 守护进程正在运行。如果守护进程未运行，你会看到错误信息：

     Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?

通过上述步骤，你可以使用 cmgii-devops.io/public/node:14.17.6-bullseye-slim-v8 镜像来编译和打包你的前端项目。

==================================================================================

（需要注意的是，如果在使用npm run build构建的时候，还是报了些类似于依赖的问题，可以清理缓存）

具体就是

1. 删除 node_modules/.cache 目录：

   rm -rf node_modules/.cache

2. 重新安装依赖：

   删除 node_modules 目录和 package-lock.json 文件：

   rm -rf node_modules package-lock.json

   重新安装依赖：

   npm install

   以下就是我本地成功编译好的，哈哈~

如果想将现有的 Docker 镜像 （以我为例 cmgii-devops.io/public/node:14.17.6-bullseye-slim-v8)，并且希望基于这个镜像创建一个新的镜像 ，可参考我的下一篇将当前的环境（包括所有依赖和配置）重新打包为一个新的 Docker 镜像-优快云博客