Docker+Nginx反向代理+React(Webpack)环境下404问题排查与优化

我在Docker部署Node+React（Webpack构建）应用时，遇到了BrowserRouter直接导航404的问题：访问localhost:3050/SomePage时Nginx返回404，原因是Nginx无法识别React的前端路由。

通用解决方案是把React构建产物放到/usr/share/nginx/html，并通过try_files指令回退到index.html。我已经配置了将Webpack生成的dist目录复制到该路径，但构建流程仍有问题。

另外我还想了解：兼顾生产就绪与本地开发友好的最佳实践是什么？是否不应该使用Webpack-CLI？

补充：怀疑问题源于Docker层缓存，已经尝试无缓存重建，但问题依旧。

相关配置文件 #

Nginx default.conf #

upstream client {
  server client:3000;
}

upstream api {
  server api:3001;
}

server {
  listen 80;

  location / {
      proxy_pass http://client;
      # root   /usr/share/nginx/html;
      # index  index.html index.htm;
      try_files $uri $uri/ /index.html;
  }

  location /sockjs-node {
      proxy_pass http://client;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
  }
  
  location /api {
      rewrite /api/(.*) /$1 break;
      proxy_pass http://api;
  }
}

Nginx Dockerfile #

FROM nginx
COPY ./default.conf /etc/nginx/conf.d/default.conf

Client package.json（关键部分） #

"scripts": {
    "start": "webpack serve --config webpack.config.js --mode development",
    "build": "webpack --config webpack.config.js --mode development"
....

  "devDependencies": {
    "webpack-cli": "^5.1.4"
  }

Client Dockerfile（尝试1：开发模式） #

FROM node:alpine

# Set NODE_ENV to 'production' by default
ENV NODE_ENV=development

WORKDIR /app
COPY package.json ./
COPY package-lock.json ./

COPY ./ ./
RUN npm i
CMD ["npm", "run", "start"]

Client Dockerfile（尝试2：多阶段构建） #

# Stage 0: Build React app
FROM node:alpine as build-stage

# Set NODE_ENV to 'production' by default
ENV NODE_ENV=development

WORKDIR /app
COPY package*.json ./

# Install app dependencies
RUN npm install webpack-cli && \
    npm install

COPY ./ ./
RUN npm run build

# Stage 1: Final image
FROM nginx
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY --from=build-stage ../nginx/default.conf /etc/nginx/conf.d/default.conf

Server Dockerfile #

FROM node:alpine
WORKDIR /app
COPY package.json ./
COPY package-lock.json ./
COPY ./ ./
RUN npm i
CMD ["npm", "run", "dev"]

docker-compose.yml #

version: '3.8'

services:
  nginx:
    depends_on:
      - api
      - client
    restart: always
    build:
      dockerfile: Dockerfile
      context: ./nginx
    ports:
      - "3050:80"

  api:
    build:
      dockerfile: Dockerfile
      context: "./server"
    volumes:
      - /app/node_modules
      - ./server:/app
    env_file:
      - ./server/keys/dev.env

  client:
    stdin_open: true
    environment:
      - CHOKIDAR_USEPOLLING=true
      - NODE_ENV=development
    build:
      dockerfile: Dockerfile
      context: ./client
    volumes:
      - /app/node_modules
      - ./client:/app

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