Docker构建Vue应用容器时无法找到package.json求助

尝试为Vue应用构建容器镜像，Dockerfile包含build、post checkout和post build钩子，post checkout执行成功，但构建时出现无法找到package.json文件的错误。

构建命令执行前运行ls -al查看镜像内容，输出为系统根目录结构：

0.496 drwxr-xr-x   1 root root 4096 Jul 22 13:58 .
0.496 drwxr-xr-x   1 root root 4096 Jul 22 13:58 ..
0.496 drwxr-xr-x   2 root root 4096 Jul  1 00:00 bin
0.496 drwxr-xr-x   2 root root 4096 Jun 19 21:20 boot
0.496 drwxr-xr-x   5 root root  340 Jul 22 13:58 dev
0.496 drwxr-xr-x   1 root root 4096 Jul 22 13:58 etc
0.496 drwxr-xr-x   1 root root 4096 Jul  9 16:49 home
0.496 drwxr-xr-x   8 root root 4096 Jul  1 00:00 lib
0.496 drwxr-xr-x   2 root root 4096 Jul  1 00:00 lib64
0.496 drwxr-xr-x   2 root root 4096 Jul  1 00:00 media
0.496 drwxr-xr-x   2 root root 4096 Jul  1 00:00 mnt
0.496 drwxr-xr-x   1 root root 4096 Jul  9 16:50 opt
0.496 dr-xr-xr-x 183 root root    0 Jul 22 13:58 proc
0.496 drwx------   2 root root 4096 Jul  1 00:00 root
0.496 drwxr-xr-x   3 root root 4096 Jul  1 00:00 run
0.496 drwxr-xr-x   2 root root 4096 Jul  1 00:00 sbin
0.496 drwxr-xr-x   2 root root 4096 Jul  1 00:00 srv
0.496 dr-xr-xr-x  13 root root    0 Jul 22 13:58 sys
0.496 drwxrwxrwt   1 root root 4096 Jul 22 13:58 tmp
0.496 drwxr-xr-x   1 root root 4096 Jul  1 00:00 usr
0.496 drwxr-xr-x   1 root root 4096 Jul  1 00:00 var

查看/usr/src目录，内容为空：

0.465 drwxr-xr-x 2 root root 4096 Jun 19 21:20 .
0.465 drwxr-xr-x 1 root root 4096 Jul  1 00:00 ..

使用的Dockerfile内容如下：

# base node image
FROM node:20-bullseye-slim as base

ARG NODE_ENV=staging
ARG DOTENV_KEY
ARG COMMIT_SHA
ARG RELEASE_SEMVER

# set for base and all layer that inherit from it
ENV LOG_LEVEL=debug
ENV DEBUG_API=true
ENV NODE_ENV ${NODE_ENV}
ENV DOTENV_KEY ${DOTENV_KEY}
ENV COMMIT_SHA ${COMMIT_SHA}
ENV RELEASE_SEMVER ${RELEASE_SEMVER}

RUN apt-get update && apt-get install -y curl tini

# Install all node_modules, including dev dependencies
FROM base as deps

WORKDIR /app

COPY package*.json ./

RUN npm install --include=dev

# Copy the rest of the application code
COPY . .

# Build the production image
FROM base as build

# WORKDIR /app
RUN ls -al /usr
ENV NODE_ENV staging

RUN npm run build

# Final image
FROM build as final

WORKDIR /app

EXPOSE 8080

CMD ["npm", "start"]

问题核心是Docker多阶段构建中，每个FROM指令会启动全新的镜像环境，不会自动继承之前阶段的文件。你的build阶段直接基于base镜像创建，没有复制任何项目代码或依赖，自然找不到package.json。

修改步骤如下：

1. 修复build阶段的文件复制逻辑：

   • 先在build阶段设置工作目录/app
   • 从deps阶段复制已安装好的node_modules（避免重复安装依赖）
   • 从本地上下文复制项目代码到容器内

2. 优化final阶段：

   • 如果是Vue静态应用，通常只需要复制构建后的dist目录，搭配Nginx等静态服务器；如果是SSR应用，则需要复制node_modules、构建产物和必要配置文件。

修改后的Dockerfile示例（Vue静态应用） #

# base node image
FROM node:20-bullseye-slim as base

ARG NODE_ENV=staging
ARG DOTENV_KEY
ARG COMMIT_SHA
ARG RELEASE_SEMVER

ENV LOG_LEVEL=debug
ENV DEBUG_API=true
ENV NODE_ENV ${NODE_ENV}
ENV DOTENV_KEY ${DOTENV_KEY}
ENV COMMIT_SHA ${COMMIT_SHA}
ENV RELEASE_SEMVER ${RELEASE_SEMVER}

RUN apt-get update && apt-get install -y curl tini

# Install all node_modules, including dev dependencies
FROM base as deps

WORKDIR /app

COPY package*.json ./
RUN npm install --include=dev

# Copy the rest of the application code
COPY . .

# Build the production image
FROM base as build

WORKDIR /app
# 从deps阶段复制依赖和代码
COPY --from=deps /app/node_modules ./node_modules
COPY --from=deps /app/ .

ENV NODE_ENV staging
RUN npm run build

# Final image 使用Nginx作为静态服务器（Vue静态应用推荐）
FROM nginx:alpine as final

# 复制Vue构建产物到Nginx默认静态目录
COPY --from=build /app/dist /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

若为Vue SSR应用，修改final阶段如下 #

# Final image
FROM base as final

WORKDIR /app

# 复制依赖（只保留生产依赖可进一步缩小镜像体积）
COPY --from=deps /app/node_modules ./node_modules
# 复制构建产物和必要文件
COPY --from=build /app/dist ./dist
COPY --from=build /app/package*.json ./

EXPOSE 8080
CMD ["npm", "start"]

关键说明 #

• 每个阶段的文件需要通过COPY --from=<阶段名> <源路径> <目标路径>显式复制
• 先复制package*.json再安装依赖，可利用Docker缓存层优化构建速度
• 静态应用优先使用Nginx镜像作为最终镜像，体积更小、性能更优

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