質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2628閲覧

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

san_you

総合スコア14

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/03/28 02:57

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2020/03/28 04:19

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

2020/03/28 04:36

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

回答1

0

ベストアンサー

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

services: node: # 略 stdin_open: true

投稿2020/03/28 05:11

hoshi-takanori

総合スコア7893

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

san_you

2020/03/28 11:06

解決しました。ありがとうございます。 自分でもかなり検索したつもりだったのですぐにこんなにぴったりなページが見つかって非常に驚いています。 もしお時間あればどうやってそこまでたどり着いたのか教えて頂けると非常に嬉しいです。 公式のissueを最初に見られたのでしょうか。
hoshi-takanori

2020/03/28 15:09

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

2020/03/28 16:11

あーじゃあ僕の検索の仕方が悪かったんですね... 有難う御座います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問