本地npm run build正常，Docker构建Vite React应用失败求助

我尝试将基础Vite React应用容器化，采用多阶段构建Dockerfile（以node:alpine为构建镜像，最终用Nginx部署），但执行npm run build时失败。报错显示esbuild的Host版本"0.18.15"与binary版本"0.18.16"不匹配，无法加载vite.config.ts导致构建终止。本地执行npm run build正常，当前使用Node 19.1.0，尝试过不同Node镜像，此前在WSL构建也遇到其他问题，不知如何解决。

报错信息 #

=> [builder 4/6] RUN npm install                                                                                 37.6s
 => [builder 5/6] COPY . .                                                                                         0.5s
 => ERROR [builder 6/6] RUN npm run build                                                                          1.5s
------
 > [builder 6/6] RUN npm run build:
0.589
0.589 > frontend@0.0.0 build
0.589 > tsc && vite build
0.589
1.529 ✘ [ERROR] Cannot start service: Host version "0.18.15" does not match binary version "0.18.16"
1.529
1.529 1 error
1.534 failed to load config from /app/vite.config.ts
1.534 error during build:
1.534 Error: The service was stopped: write EPIPE
1.534     at /app/node_modules/esbuild/lib/main.js:1083:25
1.534     at responseCallbacks.<computed> (/app/node_modules/esbuild/lib/main.js:703:9)
1.534     at afterClose (/app/node_modules/esbuild/lib/main.js:693:28)
1.534     at /app/node_modules/esbuild/lib/main.js:2142:11
1.534     at onwriteError (node:internal/streams/writable:418:3)
1.534     at process.processTicksAndRejections (node:internal/process/task_queues:84:21)
------
Dockerfile:6
--------------------
   4 |     RUN npm install
   5 |     COPY . .
   6 | >>> RUN npm run build
   7 |
   8 |     FROM nginx
--------------------
ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1

原始Dockerfile #

FROM node:alpine as builder
WORKDIR '/app'
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

FROM nginx
COPY --from=builder /app/build /usr/share/nginx/html

解决方案 #

• 锁定依赖版本与本地一致：复制package-lock.json（或yarn.lock）到镜像中，使用npm ci严格按照lock文件安装依赖，避免版本漂移，修改后的Dockerfile如下：

  FROM node:19.1.0-alpine as builder
  WORKDIR '/app'
  COPY package.json package-lock.json ./
  RUN npm ci
  COPY . .
  RUN npm run build
  
  FROM nginx
  COPY --from=builder /app/build /usr/share/nginx/html
  

• 统一esbuild版本：如果上述方法无效，可在构建阶段强制安装指定版本的esbuild，确保Host与binary版本一致：

  FROM node:19.1.0-alpine as builder
  WORKDIR '/app'
  COPY package.json package-lock.json ./
  RUN npm ci && npm install esbuild@0.18.15
  COPY . .
  RUN npm run build
  
  FROM nginx
  COPY --from=builder /app/build /usr/share/nginx/html
  

• 禁用esbuild缓存：在构建命令前添加环境变量，避免缓存导致的版本冲突：

  FROM node:19.1.0-alpine as builder
  WORKDIR '/app'
  COPY package.json package-lock.json ./
  RUN npm ci
  COPY . .
  ENV ESBUILD_DISABLE_CACHE=1
  RUN npm run build
  
  FROM nginx
  COPY --from=builder /app/build /usr/share/nginx/html
  

• 清理本地依赖后重新构建：本地先执行以下命令，确保本地依赖无版本冲突，再重新构建镜像：

  rm -rf node_modules package-lock.json
  npm install
  

内容的提问来源于stack exchange，提问作者therearedoors