本地Docker镜像启动的React应用无法正常加载问题

• 依赖安装缺失：配置中提前设置NODE_ENV=production，npm在该环境变量下执行npm install会默认跳过devDependencies下的所有依赖，而React项目启动、构建必需的react-scripts包默认存放在devDependencies中，直接导致启动时报错找不到执行命令。
• 端口映射不匹配：npm start启动的是Create React App内置的开发服务器，默认监听容器内3000端口，你执行run命令时配置的端口映射为4001:4001，容器内无服务监听4001端口，外部请求无法到达应用。
• 部署逻辑不符合生产要求：react-scripts start提供的开发服务器仅适配本地开发场景，存在性能差、安全漏洞多、资源未压缩等问题，完全不适合生产环境部署，生产环境应提前编译静态资源后用专用Web服务器托管。

可根据实际使用场景选择对应方案：

场景1：本地开发调试用容器运行 #

如果只是想在容器内跑开发环境方便调试，修改Dockerfile如下即可：

FROM node:alpine

WORKDIR /app

COPY ["package.json", "package-lock.json", "./"]
# 显式指定安装全量依赖（包含开发依赖），避免生产环境变量导致依赖缺失
RUN npm install --production=false

COPY . .
# 指定开发服务器监听端口为4001，和端口映射配置对应
ENV PORT=4001
EXPOSE 4001

CMD [ "npm", "start"]

构建镜像后执行原有运行命令docker run -it -d -p 4001:4001 react-app:test2即可正常访问。

场景2：生产环境正式部署（推荐） #

生产环境建议使用多阶段构建，大幅减小镜像体积，同时用Nginx托管静态资源提升性能和稳定性，Dockerfile配置如下：

# 第一阶段：构建阶段，仅用于编译打包静态资源
FROM node:alpine AS builder
WORKDIR /app
COPY ["package.json", "package-lock.json", "./"]
RUN npm install
COPY . .
# 执行编译命令，生成的静态资源存放在app/build目录下
RUN npm run build

# 第二阶段：运行阶段，基于轻量Nginx镜像托管静态资源
FROM nginx:alpine
# 将构建阶段生成的静态资源复制到Nginx默认静态资源目录
COPY --from=builder /app/build /usr/share/nginx/html
# （可选）如果使用react-router做前端路由，添加自定义Nginx配置解决刷新404问题
# COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

如果需要解决前端路由刷新404的问题，在Dockerfile同级目录新建nginx.conf文件，内容如下：

server {
    listen 80;
    server_name localhost;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        # 单页应用路由重写规则，所有找不到的路径都返回index.html
        try_files $uri $uri/ /index.html;
    }
}

构建生产镜像后，运行命令需要调整端口映射（Nginx默认监听80端口）：
docker run -it -d -p 4001:80 react-app:prod
执行后访问本地4001端口即可正常加载应用。

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