Dockerfile位于compose/cloud目录时React项目镜像构建失败求助

错误根源分析 #

你的Dockerfile和构建方式存在两个核心问题：

1. RUN cd . . 是语法错误，且每个RUN指令都会启动独立的shell进程，前一个RUN的目录切换不会影响后续指令，这两行完全无效。
2. 构建上下文与COPY路径错误：在compose/cloud目录执行构建时，默认上下文是当前目录，无法获取项目根目录的package.json；同时原COPY命令将文件复制到容器内的/app/compose/cloud/，导致npm install找不到依赖配置文件。

正确Dockerfile编写 #

修改compose/cloud/Dockerfile内容如下：

# 构建阶段
FROM node:18-alpine as build-stage
WORKDIR /app

# 先复制依赖配置文件，利用Docker缓存
COPY package*.json ./
RUN npm install

# 复制项目所有源代码
COPY . ./
# 执行生产构建
RUN npm run build

# Nginx部署阶段
FROM nginx:alpine
# 清空默认静态文件目录
RUN rm -rf /usr/share/nginx/html/*
# 从构建阶段复制产物到Nginx目录
COPY --from=build-stage /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

正确镜像构建命令 #

必须将项目根目录作为构建上下文，通过-f参数指定Dockerfile路径：

方式1：在项目根目录执行 #

docker build -t react-app-image -f compose/cloud/Dockerfile .

方式2：在compose/cloud目录执行 #

cd compose/cloud
docker build -t react-app-image -f Dockerfile ../../

关键说明 #

• 构建上下文：docker build最后指定的路径（.或../../）是Docker daemon读取文件的来源，必须指定项目根目录才能获取package.json、src、public等核心文件。
• 分层优化：先复制package*.json再执行npm install，能复用Docker缓存，只有当依赖配置变更时才会重新安装依赖，提升构建效率。

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