DockerでReactの環境構築でerror Couldn't find a package.json file in ”xxx”となってしまう

Question

##実現したいこと
現在Docker-machineを使って、仮想環境のvirtualbox上に
React+Rails+MySqlの環境構築を行いたいと思ってます。

##解決したいこと
こちらの記事を参考に環境構築を行なっているのですが、
Docker-compose up　時にyarnのエラーになってしまいます

$ docker-compose up    
省略
yarn run v1.22.15
error Couldn't find a package.json file in "/myapp"
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

front側のコンテナだけうまくいかず、railsやMySQLのコンテナはきちんと動作しております。
frontのコンテナが動かないので、create-react-appもできない状態（行なっても、同じ様にpackege.jsonが見つからないと怒られる）

以下Dockerfileなどです

###構成

myapp
  |-api
  |-front
docker-compose.yml

docker@try1:~/myapp$ ls api/                                                                            
Dockerfile     Rakefile       config.ru      log            vendor
Gemfile        app            db             public
Gemfile.lock   bin            entrypoint.sh  storage
README.md      config         lib            tmp
#rails.newをした後なので、Docker-file以外のディレクトリができています

docker@try1:~/myapp$ ls front/                                                                          
Dockerfile

front側のDockerfile

                                                             
FROM node:17-alpine
#ここは何度か別verを試したりしています。
RUN mkdir /myapp
WORKDIR /myapp

docker@try1:~/myapp$ cat docker-compose.yml                                                             
version: '3'
services:
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - '3306:3306'
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - mysql-data:/var/lib/mysql
  api:
    build: ./api
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - ./api:/myapp
      - gem_data:/usr/local/bundle
    ports:
      - "3000:3000"
    depends_on:
      - db
    stdin_open: true
    tty: true
  front:
    build: ./front
    command: yarn start
    ports:
      - '8000:3000'
    volumes:
      - ./front:/myapp
    depends_on:
      - api
    tty: true
volumes:
  mysql-data:
  gem_data:
    driver: local

##試したこと
1 yarnの公式を見て、
DockerfileにRUN yarn init -2やRUN yarn installを記述したりしましたが、変わりませんでした。
（Dockerfileを記述後に、再度docker-compose buildでイメージの作り直しは当然行なっております。）

2 Dockerfileのnodeのverを変えることも実施

3　docker-composeを書き換え

コマンドを実行するディレクトリが悪いのかと思い、docker-composeのfrontサービスのコマンドを以下の様に書き換えても

 command: sh -c "cd front && yarn start"

ocker@try1:~/myapp$ docker-compose up                                                                  
省略
front_1  | sh: cd: line 1: can't cd to front: No such file or directory
db_1     | 2021-12-19T00:43:22.204506Z 0 [Warning] [MY-010918] [Server] 'default_authentication_plugin' is deprecated and will be removed in a future release. Please use authentication_policy instead.
db_1     | 2021-12-19T00:43:22.204528Z 0 [System] [MY-010116] [Server] /usr/sbin/mysqld (mysqld 8.0.27) starting as process 1
db_1     | 2021-12-19T00:43:22.244707Z 1 [System] [MY-013576] [InnoDB] InnoDB initialization has started.
myapp_front_1 exited with code 2

cdのそんなディレクトリ見つからないよと怒られる

わかる方いらっしゃれば、お知恵をいただけるとありがたいです。
よろしくお願いします。

##環境

docker@try1:~/myapp$ docker --version                                                                   
Docker version 19.03.12, build 48a66213fe
docker@try1:~/myapp$ docker-compose --version                                                           
docker-compose version 1.16.1, build 6d1ac21

virtualboxの環境

Answer 1

該当のサイトを見ましたが、おそらく./frontにpackage.jsonがないのだと思います。
試しに、frontのcommandをbashに変えて

$ docker-compose up -d

を実行したあと、　

$ docker-compose exec front bash

を実行してみてください。そうするとコンテナの中に入ることができます。
そうしたら、lsコマンドを実行してみてください。多分package.jsonがないと思います。

そして、この状態のまま、下記コマンドを実行してみましょう

# npx create-react-app ./

これでreactのプロジェクトが作れると思います。lsコマンドでプロジェクトが作成できていることが確認できたらexitでコンテナから抜けてください。

コンテナから抜けると、先ほどcreate-react-appで作ったプロジェクトがfrontディレクトリにあると思います。
ここで、commandを元のyarn startに戻してもらって、再びdocker-compose up -d を実行すると多分Reactが起動できるのではないかと思います。

ちなみに上記の方法はかなり無骨に作業していますが、下記のコマンドだけで大丈夫だと思います。

$ docker-compose run --rm front npx create-react-app ./ # このコマンドで、コンテナ内でCRAのコマンドが実行できます。
$ docker-compose up -d # 上のコマンドでプロジェクトが作られるので、そのままdocker-compose up -dで起動しましょう

※補足
もしかすると、Dockerfileがあるせいでcreate-react-appが実行できないかもしれないです。
もしそうなったらdocker-compose.ymlのvolumeフィールドを変更するなどしてコンテナにマウントしている
ディレクトリに何もファイルがない状態にしてから試してみてください。

Comments

[kiyoma]

回答ありがとうございます。
コンテナに接続した上で、ご指摘いただいたコマンドは既に実行はしていて、
create-react-appは実行済みだったのですが、エラーになっていました。

色々いじっているうちに、ヒープエラーと出てきて、virtualboxのメモリを1024MBから2048MBに変えたところ、実行できました。

ありがとうございます！！

[ukyoda]

ああ、なるほど！VMのメモリの問題だったんですね????

解決して良かったです????