Docker化React客户端无法通过localhost访问的问题求助

问题背景 #

我为服务端和React客户端编写了以下Docker配置文件，执行docker-compose up --build后服务端可通过localhost:8080正常访问，但React客户端无法通过localhost:3000访问，求解决方法：

服务端Dockerfile #

FROM node:18.13.0
WORKDIR /app
COPY package*.json .
RUN npm install
COPY . .
EXPOSE 8080    
CMD [ "npm", "run", "start"]

客户端Dockerfile #

FROM node:18.13.0
WORKDIR /app
COPY package*.json .
RUN npm install
COPY . .
EXPOSE 3000    
CMD ["npm", "start"]

docker-compose.yml #

version: "3.8"

services:
  server:
    build: ./server
    container_name: e_commerce_server_container
    ports:
      - 8080:8080
    volumes:
      - ./server:/app
      - /app/node_modules

  client:
    build: ./client
    container_name: e_commerce_client_container
    ports:
      - 3000:3000
    volumes:
      - ./client:/app
      - /app/node_modules
    # stdin_open: true
    # tty: true

解决步骤 #

• 启用交互式终端配置
  React开发服务器需要交互式终端支持，取消docker-compose.yml中客户端服务的stdin_open: true和tty: true注释：

  client:
    build: ./client
    container_name: e_commerce_client_container
    ports:
      - 3000:3000
    volumes:
      - ./client:/app
      - /app/node_modules
    stdin_open: true
    tty: true
  

• 修改React服务器绑定地址
  React默认开发服务器仅绑定容器内部的localhost，无法被宿主机访问，需修改启动命令让服务器监听所有网络接口：
  方案1：修改客户端package.json的start脚本：

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

  方案2：直接在客户端Dockerfile中修改CMD：

  CMD ["npm", "start", "--", "--host", "0.0.0.0"]
  

• 查看容器日志排查错误
  执行命令查看客户端容器的运行日志，定位启动失败原因：

  docker logs e_commerce_client_container
  

  常见问题包括依赖安装失败、端口冲突、代码语法错误等，根据日志提示修复。

• 验证端口映射状态
  执行命令检查容器端口是否正确映射到宿主机：

  docker ps
  

  确认客户端容器的PORTS列显示0.0.0.0:3000->3000/tcp或:::3000->3000/tcp。

• 清理缓存后重新构建
  旧容器缓存可能导致异常，执行以下命令清理后重新构建：

  docker-compose down -v
  docker-compose up --build
  

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