Docker部署React应用出现ERR_EMPTY_RESPONSE错误的求助

我的应用结构如下：

react-client
server
docker-compose.yaml

Golang服务能在Docker中正常启动，但React应用在Docker里运行时出问题。以下是react-client目录下的Dockerfile：

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

我的docker-compose配置文件内容：

version: '3'

services:
    postgres:
        image: postgres:12
        restart: always
        ports:
            - '5432:5432'    
        volumes:
            - ./db_data:/var/lib/postgresql/data
            - ./server/scripts/init.sql:/docker-entrypoint-initdb.d/create_tables.sql
        env_file:
            - ./server/config/.env    
        healthcheck:
            test: [ "CMD", "pg_isready", "-q", "-d", "devdb", "-U","postgres" ]
            timeout: 45s
            interval: 10s
            retries: 10
    redis:
        image: redis:6.2
        volumes:
          - /var/run/docker.sock:/var/run/docker.sock      
        ports:
          - 6379:6379 
    prometheus:
        image: "prom/prometheus:v2.21.0"
        ports:
          - "9090:9090"
        command:
          - "--config.file=/etc/prometheus/prometheus.yml"
        volumes:
          - "./server/metrics/prometheus.yml:/etc/prometheus/prometheus.yml:ro"
    grafana:
        image: grafana/grafana:6.1.6
        environment:
          - GF_AUTH_DISABLE_LOGIN_FORM=true
          - GF_AUTH_ANONYMOUS_ENABLED=true
          - GF_AUTH_ANONYMOUS_ORG_NAME=Main Org.
          - GF_AUTH_ANONYMOUS_ORG_ROLE=Admin
          - GF_USERS_ALLOW_SIGN_UP=false
        ports:
          - "3000:3000"
        volumes:
          - ./grafana/provisioning:/etc/grafana/provisioning
          - ./grafana/dashboards:/var/lib/grafana/dashboards
    web-client:
        build:
          context: ./react-client
          dockerfile: Dockerfile
        ports:
          - "3001:3001"
    app:
        build: 
          context: ./server
          dockerfile: Dockerfile
        ports:
          - 8080:8080
        depends_on:
          - postgres
          - redis

启动Docker后，访问localhost:3001时出现错误：ERR_EMPTY_RESPONSE。直接用npm start运行React应用一切正常，怀疑是不是项目文件没完整复制到容器里？

补充说明：
我试过修改web-client的端口配置为：

web-client:
        build:
          context: ./react-client
          dockerfile: Dockerfile
        ports:
          - "127.0.0.1:3001:3001"

但问题依旧。单独在3000端口运行React应用能正常启动，看来在3001端口启动时出了问题，但找不到具体原因。

1. 修正React开发服务器的监听地址 #

React默认npm start会把开发服务器绑定到容器内部的localhost，外部主机根本访问不到。必须让服务器监听0.0.0.0，才能接受容器外的请求。

两种修改方式：

• 直接改package.json的启动命令：

  "scripts": {
    "start": "HOST=0.0.0.0 PORT=3001 react-scripts start"
  }
  

• 在react-client根目录创建.env文件，添加：

  HOST=0.0.0.0
  PORT=3001
  

2. 验证容器内文件完整性 #

进入web-client容器检查文件是否齐全：

# 先查容器ID
docker ps
# 进入容器终端
docker exec -it <web-client容器ID> sh
# 查看目录文件
ls /app/react

如果文件缺失，简化Dockerfile的复制步骤（避免路径错误）：

FROM node:alpine
WORKDIR /app/react
COPY package*.json ./
RUN npm i
COPY . .
EXPOSE 3001
CMD ["npm", "run", "start"]

3. 查看容器日志找启动错误 #

直接看web-client的启动日志，大部分问题都会在这里暴露：

docker logs <web-client容器ID>

比如依赖安装失败、端口冲突这类问题，日志里会有明确提示。

4. 检查主机端口占用情况 #

确认主机的3001端口没被其他进程占用：

# Linux/macOS
lsof -i :3001
# Windows
netstat -ano | findstr :3001

如果端口被占，要么杀掉对应进程，要么修改React应用的端口。

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