Docker環境でcreate-react-appしたアプリのdevelopment serverがすぐに終了してしまう

Question

前提・実現したいこと

localhostからreactのdevelopment serverにアクセスしたいです。

Docker環境でReactを触ろうとして下記のリンクを参考にVS CodeでReactのプロジェクトを作成しました。
https://blog.web.nifty.com/engineer/2714

リンク先の概要は

• 下記のようなディレクトリ、ファイルを作成する

docker-react-app
├── Dockerfile_node
└── docker-compose.yml

Dockerfile_node

FROM node:8.16.0-alpine　(更新後→node:13.12-alpine)
WORKDIR /usr/src/app

docker-compose.yml

version: '3'

services:
  node:
    build:
      context: .
      dockerfile: Dockerfile_node
    volumes:
    - ./:/usr/src/app
    command: sh -c "cd react-sample && yarn start"
    ports:
    - "3000:3000"

• 下記コマンドを実行する

docker-compose build
docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app react-sample"
docker-compose up

のみです。これを実行するとファイルなどは作成されるのですがいざdocker-compose upを実行しても下記のようなメッセージが表示されます。

Creating docker-react-app_node_1 ... done
Attaching to docker-react-app_node_1
node_1  | yarn run v1.15.2
node_1  | $ react-scripts start
node_1  | ℹ ｢wds｣: Project is running at http://172.26.0.2/
node_1  | ℹ ｢wds｣: webpack output is served from 
node_1  | ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/react-sample/public
node_1  | ℹ ｢wds｣: 404s will fallback to /
node_1  | Starting the development server...
node_1  | 
node_1  | Done in 25.97s.
docker-react-app_node_1 exited with code 0

そしてコンテナが終了してしまいます。

Nodeのイメージを最新のものに変更しても

Starting docker-react-app_node_1 ... done
Attaching to docker-react-app_node_1
node_1  | yarn run v1.22.4
node_1  | $ react-scripts start
node_1  | ℹ ｢wds｣: Project is running at http://172.26.0.2/
node_1  | ℹ ｢wds｣: webpack output is served from 
node_1  | ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/react-sample/public
node_1  | ℹ ｢wds｣: 404s will fallback to /
node_1  | Starting the development server...
node_1  | 
node_1  | Done in 25.46s.
docker-react-app_node_1 exited with code 0

ほぼ変わらずです。

該当のソースコード

Dockerfile_node

FROM node:8.16.0-alpine　(更新後→node:13.12-alpine)
WORKDIR /usr/src/app

docker-compose.yml

version: '3'

services:
  node:
    build:
      context: .
      dockerfile: Dockerfile_node
    volumes:
    - ./:/usr/src/app
    command: sh -c "cd react-sample && yarn start"
    ports:
    - "3000:3000"

reate-react-app時の全メッセージ

Creating network "docker-react-app_default" with the default driver
npm WARN deprecated mkdirp@0.5.4: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@3.4.1
added 99 packages from 47 contributors in 16.806s

Creating a new React app in /usr/src/app/react-sample.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.15.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.12: The platform "linux" is incompatible with this module.
info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.2: The platform "linux" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.22.4", while you're on "1.15.2".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
success Saved 13 new dependencies.
info Direct dependencies
├─ cra-template@1.0.3
├─ react-dom@16.13.1
├─ react-scripts@3.4.1
└─ react@16.13.1
info All dependencies
├─ @babel/plugin-transform-flow-strip-types@7.9.0
├─ @babel/plugin-transform-runtime@7.9.0
├─ @babel/plugin-transform-typescript@7.9.4
├─ @babel/preset-typescript@7.9.0
├─ babel-preset-react-app@9.1.2
├─ cra-template@1.0.3
├─ eslint-config-react-app@5.2.1
├─ react-dev-utils@10.2.1
├─ react-dom@16.13.1
├─ react-error-overlay@6.0.7
├─ react-scripts@3.4.1
├─ react@16.13.1
└─ scheduler@0.19.1
Done in 311.04s.
Git repo not initialized { Error: Command failed: git --version
    at checkExecSyncError (child_process.js:607:13)
    at execSync (child_process.js:647:13)
    at tryGitInit (/usr/src/app/react-sample/node_modules/react-scripts/scripts/init.js:46:5)
    at module.exports (/usr/src/app/react-sample/node_modules/react-scripts/scripts/init.js:266:7)
    at [eval]:3:14
    at ContextifyScript.Script.runInThisContext (vm.js:50:33)
    at Object.runInThisContext (vm.js:139:38)
    at Object.<anonymous> ([eval]-wrapper:6:22)
    at Module._compile (module.js:653:30)
    at evalScript (bootstrap_node.js:479:27)
  error: null,
  cmd: 'git --version',
  file: '/bin/sh',
  args: [ '/bin/sh', '-c', 'git --version' ],
  options: 
   { stdio: [ [Object], [Object], [Object] ],
     shell: true,
     file: '/bin/sh',
     args: [ '/bin/sh', '-c', 'git --version' ],
     envPairs: 
      [ 'NODE_VERSION=8.16.0',
        'HOSTNAME=7e66cb3dbede',
        'YARN_VERSION=1.15.2',
        'SHLVL=2',
        'HOME=/root',
        'TERM=xterm',
        'PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin',
        'PWD=/usr/src/app' ],
     killSignal: undefined },
  envPairs: 
   [ 'NODE_VERSION=8.16.0',
     'HOSTNAME=7e66cb3dbede',
     'YARN_VERSION=1.15.2',
     'SHLVL=2',
     'HOME=/root',
     'TERM=xterm',
     'PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin',
     'PWD=/usr/src/app' ],
  stderr: null,
  stdout: null,
  pid: 82,
  output: [ null, null, null ],
  signal: null,
  status: 127 }

Installing template dependencies using yarnpkg...
yarn add v1.15.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.2: The platform "linux" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.12: The platform "linux" is incompatible with this module.
info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 20 new dependencies.
info Direct dependencies
├─ @testing-library/jest-dom@4.2.4
├─ @testing-library/react@9.5.0
├─ @testing-library/user-event@7.2.1
├─ react-dom@16.13.1
└─ react@16.13.1
info All dependencies
├─ @babel/runtime-corejs3@7.9.2
├─ @sheerun/mutationobserver-shim@0.3.3
├─ @testing-library/dom@6.16.0
├─ @testing-library/jest-dom@4.2.4
├─ @testing-library/react@9.5.0
├─ @testing-library/user-event@7.2.1
├─ @types/prop-types@15.7.3
├─ @types/react-dom@16.9.5
├─ @types/react@16.9.26
├─ @types/testing-library__dom@7.0.0
├─ @types/testing-library__react@9.1.3
├─ css.escape@1.5.1
├─ csstype@2.6.9
├─ dom-accessibility-api@0.3.0
├─ min-indent@1.0.0
├─ react-dom@16.13.1
├─ react@16.13.1
├─ redent@3.0.0
├─ strip-indent@3.0.0
└─ wait-for-expect@3.0.2
Done in 383.17s.
Removing template package using yarnpkg...

yarn remove v1.15.2
[1/2] Removing module cra-template...
[2/2] Regenerating lockfile and installing missing dependencies...
info fsevents@2.1.2: The platform "linux" is incompatible with this module.
info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.12: The platform "linux" is incompatible with this module.
info "fsevents@1.2.12" is an optional dependency and failed compatibility check. Excluding it from installation.
warning " > @testing-library/user-event@7.2.1" has unmet peer dependency "@testing-library/dom@>=5".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
success Uninstalled packages.
Done in 316.95s.

Success! Created react-sample at /usr/src/app/react-sample
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-sample
  yarn start

Happy hacking!

試したこと

Nodeのイメージのバージョン変更
containerの再起動
containerの削除
imageの削除
PC再起動

補足情報（FW/ツールのバージョンなど）

OS: MacOS Mojave 10.14.6
docker desktop: 2.2.0.4
VS Code: 1.43.1

Comments

[hoshi-takanori]

つまらない質問で恐縮ですが、react の開発に docker を使う利点って何かあるのでしょうか？
（私が時代についていけてないだけという気がしないでもないですが…。）

[san_you]

ほんとはRailsと一緒にコンテナにしたいんですよね。
Railsは動いたんですけどReactは単体でも動かないので質問しました。

Answer 1

docker-compose.yml に stdin_open: true を追加するといいようです。
参考: https://github.com/facebook/create-react-app/issues/8688

services:
  node:
    # 略
    stdin_open: true

Comments

[san_you]

解決しました。ありがとうございます。

自分でもかなり検索したつもりだったのですぐにこんなにぴったりなページが見つかって非常に驚いています。

もしお時間あればどうやってそこまでたどり着いたのか教えて頂けると非常に嬉しいです。

公式のissueを最初に見られたのでしょうか。

[hoshi-takanori]

たしか「docker exits react」あたりで検索したような…。

[san_you]

あーじゃあ僕の検索の仕方が悪かったんですね...

有難う御座います。