愛と幻想のアジャイル

道産子ソフトウェアエンジニアの技術メモ

【備忘録】DockerにReact環境を構築(Windows10 Home 2004 Insider Previewにて)

先日、Windows10 HomeにWSL2、Docker Desktop for WIndowsをプレビュー版でお試しインストールしてみた。

【備忘録】Windows10 Home(Insider Preview)にWSL2、Docker Desktop for Windowsをインストールした - 愛と幻想のアジャイル

続いてお試しで、WSL2・Docker Desktop for Windowsを使ってReact環境を構築してみる。

前提環境

構成

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

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

Docker Composeの準備

Docker Composeとは

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

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

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  |

React起動確認

http://localhost:3000/ にアクセス。

次のような画面が表示されれば成功。

f:id:k1take:20200513193348p:plain

以上。

参考記事

Docker環境内でcreate-react-app - Qiita

Reactの開発環境をDockerで構築してみた | ニフティものづくりブログ

DockerにReact環境を構築する - Qiita

Adding TypeScript

yarn add | Yarn

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

node.js - Error creating react application > Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App" - Stack Overflow

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