愛と幻想のアジャイル

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

【備忘録】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 アプリの学習(前編) : メモときどきマトメも

【備忘録】Windows10 Home(Insider Preview)にWSL2、Docker Desktop for Windowsをインストールした

Windows10 Home(Insider Preview) に「WSL2(Windows Subysytstem for Linux)」と「Docker Desktop for Windows」を入れてみただけの備忘録です。

発端 forest.watch.impress.co.jp

前提環境

  • Windows 10 Home: 1903
  • WSLは未インストール

Windows 10 Insider Previewビルドをインストールする

MS公式の手順に従い、Insider Previewをインストール。 最新の Windows 機能を入手する | Windows 10 Insider Preview のインストール

  • スタート > [設定]> [更新とセキュリティ] > [Windows Insider Program] 
  • Windows Insider Program を開始する。
  • プレビュービルドを受け取る頻度は「スロー」を選択
  • PC再起動(数回?)  

WSLを有効化する

WSLのディストリビューション(Ubuntu)をインストール

下記の手順を実施する。

  • Microsoft Storeを起動
  • 検索ボックスに「WSL」と入力
  • 検索結果から「Ubuntu」を選択
  • 「入手」ボタンをクリックでインストール実行
  • インストール完了まで待つ
  • インストール後、Ubuntu用のユーザ名、パスワードを聞かれるので入力

Ubuntuのターミナルのログ

Installing, this may take a few minutes…
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: xxxx    ←★ユーザ名入力
New password:xxxxxxxx                 ←★パスワード入力
Retype new password:xxxxxxxx      ←★パスワード再入力
passwd: password updated successfully
Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

Welcome to Ubuntu 20.04 LTS (GNU/Linux 4.4.0-19041-Microsoft x86_64)

WSLのディストリビューションのバージョンを確認

WSLのディストリビューションのバージョン確認を行う。

コマンド

wsl -l -v
  NAME                   STATE           VERSION
* Ubuntu                 Running         1

UbuntuのVERSIONが 1 となっているので、 2 にアップグレードする

コマンド

wsl --set-version Ubuntu 2

再度確認し、VERSIONが 2 に変わっていればOK。

Docker Desktop for Windowsのインストール

Docker Hubの公式HPからダウンロードする

Docker Hub

  • 「Get Docker Desktop for Windows (Edge)」を選択してダウンロード
  • ダウンロード後、Dockerのインストーラ実行
  • 再起動(が必要なはず)
  • デスクトップアイコンから、Docker Desktopを実行

Docker Desktopのバージョン確認

コマンドプロンプトから下記コマンドを実行。

wsl -l -v
  NAME                   STATE           VERSION
* Ubuntu                 Running         2
  docker-desktop-data    Running         2
  docker-desktop         Running         2

VERSIONが 2 になっていればOK。  

Docker Desktopの設定

下記の設定を行う。 * Docker Desktop→Settings→General→「Use the WSL 2 based engine」をチェック * Docker Desktop→Settings→Resource→WSL INTEGRATION→UbuntuをON * Apply &  Restartボタンをクリック

Dockerの動作確認

wslのターミナルから、適当なコンテナが動くことを確認する。 ここでは hello-worldコンテナを起動させる

  • wsl.exeを実行し、ターミナルを表示させる
  • コマンド docker run hello-world を実行
  • Hello from Docker! がターミナルに表示されればOK
xxxx@XXXXX:/mnt/c/WINDOWS/system32$ docker run hello-world

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker .exedaemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/

 以上。

参考記事

Windows 10 Home 対応の Docker Desktop for Windows を一足早く試してみました|TechRacho(テックラッチョ)〜エンジニアの「?」を「!」に〜|BPS株式会社

【WSL入門】第1回 Windows 10標準Linux環境WSLを始めよう:ITの教室 - @IT

Docker Desktop を WSL2 で使う (Windows 10) | エンジニアの何でもメモ帳

「心理的安全」が何故システム開発で必要不可欠なのか

どもです。竹田です。

 
f:id:k1take:20170907125546j:image

心理的安全」という言葉をご存じでしょうか?

 

続きを読む

内閣府ポケモン注意喚起に見る、伝わるデザインと伝わらないデザイン

内閣府セキュリティセンターから

ポケモンGOトレーナー向けの注意喚起の資料が出た。
 
最初に思ったのは
「これじゃ伝わらない」
だ。