Spring Boot+React+Docker部署后前端路由404问题求助

问题场景 #

使用Docker Compose和Nginx部署Spring Boot后端与React前端，后端可正常接收请求，但直接访问http://localhost:5173/about这类前端路由时，浏览器及Postman均返回404 Not Found。相关配置文件如下：

docker-compose.yaml #

version: "3"

services:
  mysqldb:
    image: mysql:5.7
    container_name: mysql-db-container
    restart: always
    environment:
      - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
      - MYSQL_USER=${MYSQL_USER}
      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
      - MYSQL_DATABASE=${MYSQL_DATABASE}
    ports:
      - "3307:3306"

  internet-speed-backend:
    build:
      context: .
      dockerfile: server/Dockerfile
    container_name: backend-service-container
    ports:
      - "8080:8080"
    depends_on:
      - mysqldb

  react-ui:
    build:
      context: .
      dockerfile: client/Dockerfile
    container_name: react-service-container
    restart: always
    ports:
      - "5173:80"
    depends_on:
    - internet-speed-backend

原前端Nginx配置 #

events {}

http {
  upstream backend {
    server internet-speed-backend:8080;
  }

  server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html index.htm;

    location / {
      try_files $uri $uri/ =404;  
    }
    
    location @backend {
      proxy_pass http://backend$request_uri;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header Host $http_host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
  }
}

前端及Nginx的Dockerfile #

#### Stage 1: Build the react application
FROM node as build

WORKDIR /usr/src/app

COPY client/package.json client/package-lock.json ./

RUN npm install

COPY client/ ./

RUN npm run build

#### Stage 2: serve the react application from Nginx for production environment
FROM nginx

COPY --from=build /usr/src/app/dist /usr/share/nginx/html
COPY client/nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["nginx","-g", "daemon off;"]

解决方案 #

核心原因 #

React是单页应用（SPA），所有路由逻辑由前端JavaScript处理。当直接访问/about这类路径时，Nginx会在服务器文件系统中寻找对应文件，找不到则返回404，需配置Nginx将所有未匹配到文件的请求重定向到index.html，交由前端路由处理。

修改后的Nginx配置 #

events {}

http {
  upstream backend {
    server internet-speed-backend:8080;
  }

  server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html index.htm;

    # 处理前端路由：未匹配到文件时返回index.html，由前端接管路由
    location / {
      try_files $uri $uri/ /index.html;  
    }
    
    # 代理后端接口（建议用/api前缀区分，避免与前端路由冲突）
    location /api {
      proxy_pass http://backend;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header Host $http_host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
  }
}

关键修改点 #

1. 前端路由处理：将location /中的try_files $uri $uri/ =404;改为try_files $uri $uri/ /index.html;，确保所有未找到的路径都返回React入口文件。
2. 后端接口代理优化：原配置中@backend命名规则未被触发，改为用/api前缀匹配后端请求，避免与前端路由冲突，同时逻辑更清晰。

额外验证步骤 #

1. 确认React路由模式：若使用BrowserRouter（默认），必须配置上述Nginx规则；若使用HashRouter，URL会带#，不会出现此问题。
2. 检查构建产物：确认dist目录下存在index.html，且静态资源引用路径正确（查看index.html中CSS/JS的路径是否为相对路径或正确的绝对路径）。
3. 重启容器：修改配置后，需重新构建并启动React容器：

   docker-compose down
   docker-compose up --build react-ui
   

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