create-react-appでの失敗記録


# 事象 : Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"
- 環境
    - macOS Ventura 13.4.1
    - Docker version 20.10.22, build 3a2c30b
    - Docker Compose version v2.15.1

```bash:ディレクトリは問題なく作成されているけれど・・・なんかエラーが出ている。
$ docker-compose run --rm node sh -c 'npx create-react-app reactapp --template typescript'
# ...省略...
Initialized a git repository.
# ...省略...
Run `npm audit` for details.
Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"
    at checkExecSyncError (node:child_process:885:11)
    at execSync (node:child_process:957:15)
    at tryGitCommit (/usr/src/app/reactapp/node_modules/react-scripts/scripts/init.js:62:5)
    at module.exports (/usr/src/app/reactapp/node_modules/react-scripts/scripts/init.js:350:25)
    at [eval]:3:14
    at Script.runInThisContext (node:vm:129:12)
    at Object.runInThisContext (node:vm:307:38)
    at node:internal/process/execution:79:19
    at [eval]-wrapper:6:22 {
  status: 128,
  signal: null,
  output: [ null, null, null ],
  pid: 120,
  stdout: null,
  stderr: null
}
Removing .git directory...

Success! Created reactapp at /usr/src/app/reactapp
Inside that directory, you can run several commands:
# ...省略...
```

## 原因 : Gitアカウント情報が設定されていないから
参考 : [node.js - Error creating react application &gt; Git commit not created Error: Command failed: git commit -m &quot;Initialize project using Create React App&quot; - Stack Overflow](https://stackoverflow.com/questions/61161222/error-creating-react-application-git-commit-not-created-error-command-failed)

例外の内容からコミットに失敗しているので対象のコードを見てみると、親切に最初のコミットをしてくれるようだ。

```js
// reactapp/node_modules/react-scripts/scripts/init.js:62
    // ...省略...
    execSync('git add -A', { stdio: 'ignore' });
    execSync('git commit -m "Initialize project using Create React App"', {
    // ...省略...
```

git commitすることを知らなかったのでアカウント情報を置いていなくて、[Please tell me who you are. - Qiita](https://qiita.com/ponsuke0531/items/f7c5b8dd9a9ae6ad0a25)を起こしたのと一緒か・・・。

### 対応 : create-react-appする前にアカウント情報を設定する
「npx create-react-app」する前に
「git config --global user.email "{メールアドレス}"」
と
「git config --global user.name "{ユーザ名}"」を実行する。

```bash
$ docker-compose run --rm node sh -c 'git config --global user.email "ponsuke@example.com" && git config --global user.name "ponsuke" && npx create-react-app reactapp --template typescript'
# ...省略...
Run `npm audit` for details.

Created git commit.

Success! Created reactapp at /usr/src/app/reactapp
Inside that directory, you can run several commands:
# ...省略...
```

### 失敗した対応 : npxのキャッシュクリア
違う事象だけれどもエラーになったら`npx clear-npx-cache`をする記事がいくつかあったのでやってみた・・・が、状況は変わらなかった。ちゃんと出力されたメッセージは読まなきゃです。

```bash
# キャッシュクリアしてみる
$ docker-compose run --rm node sh -c 'npx clear-npx-cache'           
Need to install the following packages:
  clear-npx-cache@1.0.1
# ...省略...
$ docker-compose run --rm node sh -c 'npx create-react-app reactapp' 
# ...省略...事象は変わらず...
Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"
    at checkExecSyncError (node:child_process:885:11)
# ...省略...
```





# 事象 : アプリ用ディレクトリの中身が作成されない
- 環境
    - macOS Ventura 13.4.1
    - Docker version 20.10.22, build 3a2c30b
    - Docker Compose version v2.15.1

DockerコンテナでReactのアプリを作成したら、アプリのディレクトリが作成されるはずが・・・ない・・・。

```bash
$ docker-compose build node
$ docker-compose run --rm node sh -c 'npx create-react-app reactapp --template typescript'
# ...省略...
Success! Created reactapp at /reactapp
Inside that directory, you can run several commands:
# ...省略...
# あれ？中身がない・・・
$ find node -type d
node
```

## 原因 : WORKDIRを指定していないから
Dockerコンテナに接続して中を見ようと思い・・・起動しようとしてエラーになった・・・。
```bash
$ docker-compose up node
[+] Running 1/1
 ⠿ Container reactapp  Created          0.2s
Attaching to reactapp
reactapp  | sh: 1: cd: can't cd to reactapp
reactapp exited with code 2
```
メッセージ「can't cd to reactapp」をじっと見ると「command: sh -c 'cd reactapp ...」がうまくいかない・・・。

```yml:compose.yml
services:
  node:
    container_name: reactapp
    image: node:18.16.1
    volumes:
      - ./node:/usr/src/app
    command: sh -c 'cd reactapp && yarn start'
    # ...省略...
```
「reactapp」ディレクトリがない・・・マウントしているのは「/usr/src/app」・・・ここまできてやっと気がついた「WORKDIR」を指定しないで「create-react-app」を行ったことに。
Dokcerコンテナの意図しないところに作成されたのか・・・。

### 対応 : WORKDIRを指定する
今回は、compose.ymlにWORKDIRを指定する。
参考 : [docker-compose.ymlでworking directoryを指定する - Qiita](https://qiita.com/dyoshikawa/items/28e20c82abbf25827358)

```yml:compose.yml
    # ...省略...↓追記↓
    working_dir: /usr/src/app
    # ...省略...
```

```bash
$ docker-compose run --rm node sh -c 'npx create-react-app reactapp --template typescript'
# ...省略...パスがちゃんと「WORKDIR」配下になった
Success! Created reactapp at /usr/src/app/reactapp
Inside that directory, you can run several commands:
# ...省略...
# できた！
$ find reactapp -type d -maxdepth 2
node
node/reactapp
node/reactapp/node_modules
node/reactapp/public
node/reactapp/src
```