先日、Windows10 HomeにWSL2、Docker Desktop for WIndowsをプレビュー版でお試しインストールしてみた。
【備忘録】Windows10 Home（Insider Preview）にWSL2、Docker Desktop for Windowsをインストールした - 愛と幻想のアジャイル
続いてお試しで、WSL2・Docker Desktop for Windowsを使ってReact環境を構築してみる。
- 前提環境
- 構成
- Docker Composeの準備
- Dockerfile作成
- docker-compose.yml作成
- Dockerコンテナのビルド
- create-react-app実行、React実行
- コンテナの起動とReactの実行
- 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 ファイルを使います。そして、コマンドを１つ実行するだけで、設定した全てのサービスを作成・起動します
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のissuesで報告されているが、特に対応されずクローズされていた。
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/ にアクセス。
次のような画面が表示されれば成功。
以上。
参考記事
Docker環境内でcreate-react-app - Qiita
