ReactJS应用Docker Compose启动即停止，单独运行镜像正常求助

问题描述 #

尝试将React应用容器化，单独运行镜像时正常，但通过Docker Compose启动后容器立即停止，无明显报错。相关配置及日志如下：

docker-compose.yml #

frontend:
    build:
      context: ../frontend
      dockerfile: Dockerfile.react
    ports:
      - "3000:3000"  # Map port 3000 on the host to 3000 in the container
    volumes:
      - ../frontend:/react-app
    environment:
      - REACT_APP_API_URL=http://localhost:3030
    depends_on:
      - apiserver
    networks:
      - mynetwork  # Connect this service to the custom network
networks:
  mynetwork:

Dockerfile.react #

FROM node:latest
WORKDIR /react-app

COPY package.json package.json
COPY public/ public
COPY src/ src

RUN npm install

EXPOSE 3000

CMD ["npm", "start"]

容器日志 #

2023-09-23 02:51:14 
2023-09-23 02:51:14 > frontend@0.1.0 start
2023-09-23 02:51:14 > react-scripts start
2023-09-23 02:51:14

解决方案 #

1. 修复卷挂载导致的依赖丢失问题 #

你在docker-compose.yml中挂载了本地../frontend目录到容器内的/react-app，这会直接覆盖容器中通过RUN npm install安装的node_modules目录。如果本地目录没有node_modules，或者本地依赖与容器环境（如Node版本）不兼容，就会导致react-scripts start无法正常执行，进程直接退出。

解决方法二选一：

• 保留代码热重载需求：添加一个匿名卷保护容器内的node_modules，避免被本地目录覆盖：

  volumes:
    - ../frontend:/react-app
    - /react-app/node_modules  # 新增此条，隔离容器内的node_modules
  

• 不需要热重载：直接移除../frontend:/react-app挂载，因为Dockerfile已经将代码拷贝到镜像中，容器运行时使用镜像内的代码即可。

2. 确保React开发服务器绑定正确地址 #

默认情况下，react-scripts start会绑定localhost，但容器内的localhost无法被宿主或其他容器访问，可能导致进程因无法接收请求而异常退出。在environment中添加HOST=0.0.0.0，让服务器绑定到容器的所有网络接口：

environment:
  - REACT_APP_API_URL=http://localhost:3030
  - HOST=0.0.0.0  # 新增此条

验证步骤 #

1. 重新构建镜像：

   docker-compose build frontend
   

2. 启动服务：

   docker-compose up frontend
   

观察日志是否继续输出服务器启动的后续信息，容器是否保持运行状态。

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