Docker部署React项目时react-scripts未找到问题求助

核心原因分析 #

出现该错误主要有两个常见诱因：

1. 本地项目的node_modules被复制到容器中，覆盖了容器内通过yarn install安装的依赖——本地node_modules可能缺失react-scripts，或是适配本地系统的版本无法在Alpine容器中运行。
2. 项目package.json未正确声明react-scripts依赖（包含开发依赖）。

具体解决方案 #

1. 添加.dockerignore排除本地node_modules #

在项目根目录创建或修改.dockerignore文件，加入以下内容：

node_modules

这样执行COPY ./appreact .时，不会将本地的node_modules复制到容器内，确保容器依赖是基于Alpine环境全新安装的完整版本。

2. 确认package.json包含react-scripts依赖 #

检查appreact/package.json，确保react-scripts存在于dependencies或devDependencies中（create-react-app生成的项目默认在devDependencies）。如果缺失，在本地项目目录执行：

yarn add -D react-scripts

完成后重新执行docker-compose up -d --build。

3. 优化Dockerfile构建逻辑（可选） #

• 若为开发环境，可移除RUN yarn build步骤，减少构建耗时：

FROM node:20-alpine

WORKDIR /appreact

COPY ./appreact/package.json ./
COPY ./appreact/yarn.lock ./
RUN yarn install

COPY ./appreact .

EXPOSE 3000

CMD ["yarn", "start"]

• 若为生产环境，建议用静态文件服务器托管构建产物，而非运行开发服务器：

FROM node:20-alpine AS builder

WORKDIR /appreact

COPY ./appreact/package.json ./
COPY ./appreact/yarn.lock ./
RUN yarn install

COPY ./appreact .
RUN yarn build

# 使用nginx托管静态文件
FROM nginx:alpine
COPY --from=builder /appreact/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

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