Docker化Vue+PHP应用时出现路径错误问题求助

项目文件结构 #

项目根目录
├── backend/          # PHP后端代码
├── frontend/         # Vue前端代码
├── docker/
│   ├── nginx/
│   │   └── Dockerfile
│   ├── php/
│   │   └── Dockerfile
│   └── vue/
│       └── Dockerfile
└── docker-compose.yml

我是Docker新手，正在尝试将应用完全Docker化，目前服务器和后端运行正常，但添加前端后出现错误，提示找不到依赖文件：

npm ERR! path /sunday_league_frontend/package.json

现有配置文件 #

Nginx Dockerfile #

FROM nginx:1.17.8-alpine

# Copy the public directory
COPY . /app/

# Copy the nginx config file
COPY ./docker/nginx/nginx.conf /etc/nginx/conf.d/default.conf

PHP Dockerfile #

FROM php:7.4.3-fpm-alpine3.11

RUN docker-php-ext-install pdo pdo_mysql

COPY ./sunday_league_backend/ /app

VOLUME ["/app"]

初始Vue Dockerfile #

FROM node:14.5.0-alpine

WORKDIR /sunday_league_frontend

# Install VueCLI
RUN npm install -g @vue/cli

# Copy project files
COPY . sunday_league_frontend

# Install dependencies
RUN npm install

# Expose the app port
EXPOSE 8080

# Start the app
CMD ["npm", "run", "serve"]

docker-compose.yml #

version: '3'
services:
  web:
    build:
      context: .
      dockerfile: docker/nginx/Dockerfile
    ports:
      - '8080:80'
    volumes:
      - .:/app/
    links:
      - php
      - vue

  php:
    build:
      context: .
      dockerfile: docker/php/Dockerfile
    volumes:
      - .:/app/

  vue:
    build:
      context: .
      dockerfile: docker/vue/Dockerfile
    ports:
      - '8081:8080'
    volumes:
      - .:/app/

已尝试的调整 #

我修改了Vue的Dockerfile：

FROM node:14.5.0-alpine

RUN mkdir -p /app
WORKDIR /app

# Install VueCLI
RUN npm install -g @vue/cli

# Copy project files
COPY . /app/

# Install dependencies
RUN npm install

# Expose the app port
EXPOSE 8080

# Start the app
CMD ["npm", "run", "serve"]

并将frontend目录下的所有文件移动到项目根目录，此时服务可正常运行，但这破坏了原有的文件架构。请问问题出在哪里？

问题根源与解决方案 #

核心原因 #

你的Vue服务构建上下文是项目根目录（.），但package.json实际在frontend目录下。初始Dockerfile的工作目录和文件复制路径没有指向正确的前端代码目录，导致npm找不到依赖文件。

具体修复步骤 #

1. 修正Vue Dockerfile

无需移动前端文件，直接让Dockerfile定位到frontend目录：

FROM node:14.5.0-alpine

# 设置容器内的工作目录为前端代码路径
WORKDIR /app/frontend

# 若项目无需全局VueCLI可删除该行，通常项目依赖包含本地CLI
RUN npm install -g @vue/cli

# 仅复制frontend目录的文件到容器对应路径，减少镜像体积
COPY ./frontend/ /app/frontend/

# 安装项目依赖
RUN npm install

EXPOSE 8080

CMD ["npm", "run", "serve"]

2. 调整docker-compose.yml中Vue服务的卷挂载

确保本地前端文件能同步到容器的对应路径，避免挂载整个项目根目录：

version: '3'
services:
  web:
    build:
      context: .
      dockerfile: docker/nginx/Dockerfile
    ports:
      - '8080:80'
    volumes:
      - .:/app/
    links:
      - php
      - vue

  php:
    build:
      context: .
      dockerfile: docker/php/Dockerfile
    volumes:
      - .:/app/

  vue:
    build:
      context: .
      dockerfile: docker/vue/Dockerfile
    ports:
      - '8081:8080'
    # 仅挂载本地frontend目录到容器的工作路径
    volumes:
      - ./frontend:/app/frontend

额外提示

• 之前移动文件到根目录能运行，是因为COPY . /app/把package.json复制到了容器的/app目录，npm可以找到它，但这违反了目录结构规范。
• 尽量避免复制整个项目根目录到Vue容器，只复制必要的frontend目录，能有效减少镜像体积，避免无关文件干扰构建过程。

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