Docker构建Angular生产镜像时‘文件不存在’错误求助

执行docker compose构建镜像时出现报错，完整过程如下：

WARNING: The Docker Engine you're using is running in swarm mode.

Compose does not use swarm mode to deploy services to multiple nodes in a swarm. All containers will be scheduled on the current node.

To deploy your application across the swarm, use `docker stack deploy`.

Building linking-front
Sending build context to Docker daemon  425.6MB
Step 1/9 : FROM node:16.19.0 AS build
 ---> b22f8aab05da
Step 2/9 : WORKDIR /usr/src/app
 ---> Using cache
 ---> 5e2431455b65
Step 3/9 : COPY package.json package-lock.json ./
 ---> Using cache
 ---> 11d677269b0e
Step 4/9 : RUN npm install
 ---> Using cache
 ---> b5544be9159b
Step 5/9 : COPY . .
 ---> Using cache
 ---> 3403bfda57ca
Step 6/9 : RUN npm run build
 ---> Using cache
 ---> ae8e7960ac33
Step 7/9 : FROM nginx:1.23.3-alpine
 ---> 2bc7edbc3cf2
Step 8/9 : COPY nginx.conf /etc/nginx/nginx.conf
 ---> Using cache
 ---> beca38c7be94
Step 9/9 : COPY --from=build /usr/src/app/dist/linkingEducationSecurity-front /usr/share/nginx/html
COPY failed: stat usr/src/app/dist/linkingEducationSecurity-front: file does not exist
ERROR: Service 'linking-front' failed to build : Build failed

我的Dockerfile内容： #

### STAGE 1: Build ###
FROM node:16.19.0 AS build
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

### STAGE 2: Run ###
FROM nginx:1.23.3-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/src/app/dist/linkingEducationSecurity-front /usr/share/nginx/html

我的docker-compose.yml内容： #

version: '3.9'

services:

  linking-front:
    build: ./linkingEducationSecurity-front/
    ports:
      - "8080:80"
    volumes:
      - type: bind
        source: ./linkingEducationSecurity-front/src/
        target: /app/src

1. 确认Angular构建产物的实际路径 #

Docker报错核心是找不到指定的构建目录，先本地执行一次npm run build，查看项目根目录下dist文件夹里的子目录名称。Angular的构建产物路径由angular.json中projects -> [项目名] -> architect -> build -> options -> outputPath配置，可能你配置的路径和Dockerfile中写的linkingEducationSecurity-front不一致。

2. 清除Docker构建缓存重新构建 #

从日志可见RUN npm run build步骤使用了缓存，可能缓存里的构建产物路径有误。执行以下命令强制重新构建，确保生成最新的构建产物：

docker-compose build --no-cache linking-front

3. 验证构建阶段的产物 #

临时修改Dockerfile，在构建阶段添加查看目录的命令，确认dist目录下的实际内容：

### STAGE 1: Build ###
FROM node:16.19.0 AS build
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
# 添加该行查看dist目录内容
RUN ls -la /usr/src/app/dist/

### STAGE 2: Run ###
FROM nginx:1.23.3-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/src/app/dist/linkingEducationSecurity-front /usr/share/nginx/html

重新构建时就能看到dist目录下的子目录名称，以此修正Dockerfile中的路径。

4. 修正Dockerfile中的路径 #

如果实际构建产物的目录名不是linkingEducationSecurity-front，将Dockerfile最后一行的路径替换为实际目录名：

COPY --from=build /usr/src/app/dist/[实际目录名] /usr/share/nginx/html

5. 检查构建上下文路径 #

确认docker-compose.yml中build: ./linkingEducationSecurity-front/指定的目录下，包含完整的Angular项目文件（angular.json、src等），且Dockerfile确实位于该目录下（若不在同一目录，需通过dockerfile字段指定正确路径）。

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