react-scripts start exiting in docker foreground cmd

Question

How can I debug react-scripts start?

This was working fine, I have no idea what changed (I did not change anything)

It appears react-scripts start isn't able to stay up as the foreground process.

My Dockerfile:

FROM centos:7

EXPOSE 3000/tcp

RUN yum update -y && yum install -y unzip wget nano epel-release yum-utils http://rpms.remirepo.net/enterprise/remi-release-7.rpm wget nano yum-utils http://rpms.remirepo.net/enterprise/remi-release-7.rpm

RUN curl -sL https://rpm.nodesource.com/setup_13.x | bash -
RUN yum install -y nodejs

RUN mkdir /data
COPY ./src /data

COPY ./docker-entrypoint.sh ./docker-entrypoint.sh
ENTRYPOINT ["./docker-entrypoint.sh"]

CMD ["npm", "run", "start"]

docker-entrypoint.sh:

#!/bin/bash
set -e
#rm -f /usr/sbin/suexec
cd /data;npm install

exec "$@"

package.json

    {
  "name": "my-gui",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.9.7",
    "@material-ui/icons": "^4.9.1",
    "@types/lodash": "^4.14.149",
    "@types/react": "^16.9.25",
    "@types/react-dom": "^16.9.5",
    "@types/validator": "^12.0.1",
    "axios": "^0.19.2",
    "date-fns": "^2.11.0",
    "lodash": "^4.17.15",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1",
    "typescript": "^3.8.3",
    "validator": "^12.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

docker-compose.yml

version: '3'
services:

  gui:
    build: ./gui/
    ports:
      - "3000:3000"
    volumes:
      - ./gui/src:/data
      - node_modules:/data/node_modules
volumes:  
  node_modules: {}

When i try to bring docker-compose up, I get below output:

Recreating myapp_gui_1 ... 
Recreating myapp_gui_1 ... done
Attaching to myapp_gui_1
gui_1  | npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules/fsevents):
gui_1  | npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
gui_1  | npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules/webpack-dev-server/node_modules/fsevents):
gui_1  | npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
gui_1  | npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules/watchpack/node_modules/fsevents):
gui_1  | npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
gui_1  | npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules/jest-haste-map/node_modules/fsevents):
gui_1  | npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
gui_1  | 
gui_1  | audited 930195 packages in 7.762s
gui_1  | 
gui_1  | 59 packages are looking for funding
gui_1  |   run `npm fund` for details
gui_1  | 
gui_1  | found 2 low severity vulnerabilities
gui_1  |   run `npm audit fix` to fix them, or `npm audit` for details
gui_1  | 
gui_1  | > iso-form-gui@0.0.0 start /data
gui_1  | > react-scripts start
gui_1  | 
gui_1  | ? ?wds?: Project is running at http://172.20.0.2/
gui_1  | ? ?wds?: webpack output is served from 
gui_1  | ? ?wds?: Content not from webpack is served from /data/public
gui_1  | ? ?wds?: 404s will fallback to /
gui_1  | Starting the development server...
gui_1  | 
myapp_gui_1 exited with code 0

If I run the react-scripts start (npm start) outside of docker, it works fine.

Answer 1

我遇到了同样的问题。我的解决方法是将 stdin_open: true 添加到我的 docker-compose.yml

version: "3"
services:
  web:
    build: 
        context: .
        dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - /app/node_modules
      - .:/app
    stdin_open: true

Answer 2

根据https://github.com/facebook/create-react-app/issues/8688 你只需要添加 env 变量CI=true

所以对于你来说docker-compose.yml它将是：

  gui:
    build: ./gui/
    ports:
      - "3000:3000"
    volumes:
      - ./gui/src:/data
      - node_modules:/data/node_modules
    environment:
      - CI=true