前提環境

Windows 10 Home: 2004 (Insider Preview)
Docker Desktop for WIndows: 2.3.00 edge
WSL2(Ubuntu): 20.04

構成

以下の構成でファイル作成する

docker-react-app  
├── docker  
│ └── node  
│     └── Dockerfile  
└── docker-compose.yml

Docker Composeの準備

Docker Composeとは

Docker Compose 概要 — Docker-docs-ja 17.06 ドキュメント

Compose とは、複数のコンテナを使う Docker アプリケーションを、定義・実行するツールです。Compose はアプリケーションのサービスの設定に、Compose ファイルを使います。そして、コマンドを１つ実行するだけで、設定した全てのサービスを作成・起動します

Dockerfile作成

Dockerfileとは

アプリケーションの環境を定義したファイル。 Dockerのイメージを作成する際に実行するコマンドをコード化して、一つのファイルにまとめたもの。

Dockerfile

FROM node:latest
WORKDIR /usr/src/app

Nodeをインストールし、マウント先のディレクトリに移動しておく

docker-compose.yml作成

docker-compose.ymlとは

アプリケーションを構成する各サービスを docker-compose.yml ファイルで定義します。そうすることで、独立した環境を一斉に実行できるようにします。

docker-compose.yml

version: "3"
services:
    node:
        build: ./docker/node
        environment:
            - NODE_ENV=production
        volumes:
            - ./:/usr/src/app
        ports:
            - "3000:3000"
        command: sh -c "cd react-sample && yarn start"
        stdin_open: true

version: docker-composeで使用するバージョン定義
services: アプリケーションを動かすための各要素
node: Node.js用のservice名
build: ComposeFileを実行し、ビルドされるときのpath
environment: 環境変数設定
NODE_ENV: 本番環境用の環境変数
volumes: ローカルフォルダからコンテナフォルダへのマウント＊ports: ホストからコンテナへのポートマッピング構成
command: コンテナ内でReactがインストールされているディレクトリに移動しyarn startコマンドによってReactの実行を行う
stdin_open: docker-compose upコマンド実行時、コンテナが終了してしまう問題の対処のため記述

[React-Scripts] v3.4.1 fails to start in Docker #8688

Dockerコンテナのビルド

docker-compose buildを実行

$ docker-compose build
Building node
Step 1/2 : FROM node:latest
latest: Pulling from library/node
99760bc62448: Pull complete
e3fa264a7a88: Pull complete
a222a2af289f: Pull complete
c1f89293f045: Pull complete
115b6fc5ace1: Pull complete
9eb516295c24: Pull complete
43fa65b67421: Pull complete
19479cb3bea7: Pull complete
0d1e452bea36: Pull complete
Digest: sha256:56cb8585b21a1da7250d0930d8221a1e35c528e51d937304131f0ea9233e756b
Status: Downloaded newer image for node:latest
 ---> eaeb579b2c99
Step 2/2 : WORKDIR /usr/src/app
 ---> Running in 87c754f2087d
Removing intermediate container 87c754f2087d
 ---> eb412b462971
Successfully built eb412b462971
Successfully tagged docker-react-app_node:latest

create-react-app実行、React実行

docker-compose run --rm node sh -c "yarn global add create-react-app && create-react-app react-sample --template typescript"

を実行する

docker-compose run: サービスに対して一度だけコマンドを実行する
--rm: コマンド終了後にコンテナを自動的に削除するオプション
node sh: Nodeコマンド
yarn global add create-react-app : create-react-appをインストール。npm i -g create-react-app:と同じ意味

実行後

$ docker-compose run --rm node sh -c "yarn global add create-react-app  && create-react-app react-sample --template typescript"
Creating network "docker-react-app_default" with the default driver
yarn global v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-react-app@3.4.1" with binaries:
      - create-react-app
Done in 18.70s.

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-typescript...

yarn add v1.22.4
[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.
success Saved 13 new dependencies.
info Direct dependencies
├─ cra-template-typescript@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.6
├─ @babel/preset-typescript@7.9.0
├─ babel-preset-react-app@9.1.2
├─ cra-template-typescript@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 123.15s.

Initialized a git repository.

Installing template dependencies using yarnpkg...
yarn add v1.22.4
[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 " > @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 23 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
├─ @types/jest@24.9.1
├─ @types/node@12.12.39
├─ @types/react-dom@16.9.8
├─ @types/react@16.9.35
├─ react-dom@16.13.1
├─ react@16.13.1
└─ typescript@3.7.5
info All dependencies
├─ @babel/runtime-corejs3@7.9.6
├─ @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/jest@24.9.1
├─ @types/node@12.12.39
├─ @types/prop-types@15.7.3
├─ @types/react-dom@16.9.8
├─ @types/react@16.9.35
├─ @types/testing-library__dom@7.0.2
├─ @types/testing-library__react@9.1.3
├─ css.escape@1.5.1
├─ csstype@2.6.10
├─ 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
├─ typescript@3.7.5
└─ wait-for-expect@3.0.2
Done in 61.78s.

We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

Removing template package using yarnpkg...

yarn remove v1.22.4
[1/2] Removing module cra-template-typescript...
[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".
success Uninstalled packages.
Done in 20.37s.
Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"
    at checkExecSyncError (child_process.js:611:11)
    at execSync (child_process.js:647:15)
    at tryGitCommit (/usr/src/app/react-sample/node_modules/react-scripts/scripts/init.js:62:5)
    at module.exports (/usr/src/app/react-sample/node_modules/react-scripts/scripts/init.js:334:25)
    at [eval]:3:14
    at Script.runInThisContext (vm.js:131:20)
    at Object.runInThisContext (vm.js:297:38)
    at Object.<anonymous> ([eval]-wrapper:10:26)
    at Module._compile (internal/modules/cjs/loader.js:1176:30)
    at evalScript (internal/process/execution.js:94:25) {
  status: 128,
  signal: null,
  output: [ null, null, null ],
  pid: 158,
  stdout: null,
  stderr: null
}
Removing .git directory...

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!

実行結果中、Git commit not created Error: Command failedが出ている。

Create React App doesn't create git repository with my template after recent update · Issue #8498 · facebook/create-react-app · GitHub

create-react-appのissuesで報告されているが、特に対応されずクローズされていた。

stackoverflow.com

stackoverflowでも回答なし。

非同期に CRUD する React/Redux アプリの学習（前編） : メモときどきマトメも

上記ブログで同様のエラーについて言及があった。

git config --global user.name "UserName" 及び git config --global user.email hoge@mail.com が設定されていないと、こんな感じの余計なエラーが出力されるかもしれません。

stackoverflowのコメントで、create-react-appは正常終了するというコメントがあるので、一旦置いておく。

I just got the same git commit issue with Ubuntu 20.04. But yarn start works fine. – Matt Janssen May 1 at 10:06

コンテナの起動とReactの実行

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.22.4
node_1  | $ react-scripts start
node_1  | ℹ ｢wds｣: Project is running at http://172.19.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  | Compiled successfully!
node_1  |
node_1  | You can now view react-sample in the browser.
node_1  |
node_1  |   Local:            http://localhost:3000
node_1  |   On Your Network:  http://172.19.0.2:3000
node_1  |
node_1  | Note that the development build is not optimized.
node_1  | To create a production build, use yarn build.
node_1  |