Docker化React应用无法通过localhost:3000访问的求助

Docker化React应用后，无法通过localhost:3000访问。Firefox提示「连接已重置」，Chrome/Edge显示「localhost未发送任何数据，ERR_EMPTY_RESPONSE」。所有容器正常运行无报错，但停止前端容器后，本地用npm start启动React应用可正常使用，后端与数据库容器工作完全正常，推测问题出在前端容器配置。

相关截图 #

• 文件夹结构：
• Docker容器运行状态：
• 端口3000访问信息：

前端Dockerfile #

FROM --platform=$BUILDPLATFORM node:lts AS development

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

RUN npm ci --legacy-peer-deps
COPY . /code

ENV CI=false
ENV PORT=3000

FROM development AS dev-envs
RUN <<EOF
apt-get update
apt-get install -y git
EOF

RUN <<EOF
useradd -s /bin/bash -m vscode
groupadd docker
usermod -aG docker vscode
EOF
# install Docker tools (cli, buildx, compose)
COPY --from=gloursdocker/docker / /

FROM development AS build

RUN ["npm", "run", "build"]

FROM nginx:1.13-alpine

COPY --from=build /code/build /usr/share/nginx/html

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

后端Dockerfile #

FROM --platform=$BUILDPLATFORM maven:3.8.6-eclipse-temurin-19 AS builder
WORKDIR /workdir/server
COPY pom.xml /workdir/server/pom.xml
RUN mvn dependency:go-offline

COPY src /workdir/server/src
RUN mvn install clean package -DskipTests

FROM builder AS dev-envs
RUN <<EOF
apt-get update
apt-get install -y --no-install-recommends git
EOF

RUN <<EOF
useradd -s /bin/bash -m vscode
groupadd docker
usermod -aG docker vscode
EOF
# install Docker tools (cli, buildx, compose)
COPY --from=gloursdocker/docker / /
CMD ["mvn", "spring-boot:run"]

FROM builder as prepare-production
RUN mkdir -p target/dependency
WORKDIR /workdir/server/target/dependency
RUN jar -xf ../*.jar

FROM eclipse-temurin:19-jre-focal

EXPOSE 8080
VOLUME /tmp
ARG DEPENDENCY=/workdir/server/target/dependency
COPY --from=prepare-production ${DEPENDENCY}/BOOT-INF/lib /app/lib
COPY --from=prepare-production ${DEPENDENCY}/META-INF /app/META-INF
COPY --from=prepare-production ${DEPENDENCY}/BOOT-INF/classes /app
ENTRYPOINT ["java","-cp","app:app/lib/*","com.issue.tracker.IssueTrackerApplication"]

compose.yaml #

services:

  backend:
    build:
      context: ./tracker
      dockerfile: Dockerfile
    ports:
      - 8080:8080
    environment:
      - POSTGRES_DB=example
    networks:
      - spring-postgres
    depends_on:
      - db

  db:
    image: postgres
    restart: always
    secrets:
      - db-password
    volumes:
      - db-data:/var/lib/postgresql/data
    networks:
      - spring-postgres
    environment:
      - POSTGRES_DB=example
      - POSTGRES_PASSWORD_FILE=/run/secrets/db-password
    expose:
      - 5432

  frontend:
    build:
      context: ./tracker_frontend
      dockerfile: Dockerfile
    ports:
      - 3000:3000
    volumes:
      - /project/node_modules
    networks:
      - react-spring
    depends_on:
      - backend
    expose:
      - 3306
      - 33060

volumes:
  db-data:

secrets:
  db-password:
    file: db/password.txt

networks:
  react-spring:
  spring-postgres:

核心问题与修复方案 #

1. 端口映射不匹配（最关键） #

前端容器最终使用Nginx镜像，Nginx默认监听80端口，但当前compose将主机3000端口映射到容器3000端口，容器内没有服务在3000端口提供响应，导致连接失败。

2. 网络隔离问题 #

前端容器在react-spring网络，后端在spring-postgres网络，两者无法直接通信，前端请求后端会失败。

3. 无用配置冗余 #

前端容器expose的3306、33060端口与React应用无关，属于无效配置。

修正后的compose.yaml前端服务配置 #

frontend:
  build:
    context: ./tracker_frontend
    dockerfile: Dockerfile
  ports:
    - 3000:80  # 主机3000映射到容器Nginx默认的80端口
  networks:
    - react-spring
    - spring-postgres  # 加入后端所在网络，确保前后端通信
  depends_on:
    - backend

可选：添加React SPA路由支持 #

在前端项目根目录创建nginx.conf：

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

  # 处理React单页应用路由，刷新页面不会404
  location / {
    try_files $uri $uri/ /index.html;
  }
}

修改前端Dockerfile，复制配置到Nginx：

FROM nginx:1.13-alpine

COPY nginx.conf /etc/nginx/conf.d/default.conf  # 新增这行
COPY --from=build /code/build /usr/share/nginx/html

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

重新构建启动 #

docker-compose down
docker-compose build frontend
docker-compose up -d

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