@kiyomasa05 (きよま)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

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

実現したいこと

現在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-compose.yml
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 -2RUN yarn installを記述したりしましたが、変わりませんでした。
(Dockerfileを記述後に、再度docker-compose buildでイメージの作り直しは当然行なっております。)

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

3 docker-composeを書き換え

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

 command: sh -c "cd front && yarn start"
docker@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の環境
スクリーンショット 2021-12-19 11.22.40.png
スクリーンショット 2021-12-19 11.22.40.png

0 likes

1Answer

一回完全に今やっていることは置いておいて、

testが今やるプロジェクトフォルダとして
.
└── test
    ├── docker-compose.yml
    └── frontend
        └── Dockerfile
Dockerfile
FROM node:lts-alpine 
ENV LANG C.UTF-8

WORKDIR /app
docker-compose.yml
version: "3"
services:
  frontend:
    build:
      context: ./frontend
    volumes:
      - ./frontend:/app
    tty: true # これ重要

まずはこう言う構成にしておきます。

$ cd test
$ test ls
docker-compose.yml frontend
$ docker-compose run --rm frontend ash

とすると、alpine linuxとしてのfrontendにrootで入るはずです。

cat /etc/os-releaseと打つ

/app # 
/app # cat /etc/os-release
NAME="Alpine Linux"
ID=alpine
VERSION_ID=3.11.11
PRETTY_NAME="Alpine Linux v3.11"
HOME_URL="https://alpinelinux.org/"
BUG_REPORT_URL="https://bugs.alpinelinux.org/"

そこで

/app # touch alpine.txt

とかやってみると、

volumes:
  - ./frontend:/app

で繋がっているので、ローカルにtest/frontend/alpine.txtというファイルが出来ているはずです。

/app # yarn add react react-dom

とかすると今度はpackage.jsonやnode_modulesがローカルにも出来るはずです。

こう言うようにしてまずはコンテナ内の実態に入ってから操作してみるほうが断然に分かりやすいです。
Dockerfileやdocker-compose.ymlは「これこれこう言う手順をしてOSレベルからシステムを構築してね」という手順書みたいなもので、何をどうして良いかわからない時点で手順書からかけと言われても途方に暮れるだけです。
dockerを説明する場合、多くの場合でいきなりDockerfileを完璧にすることから話をすすめるものが多いですが、ブラックボックス過ぎてまず理解できません。

上のようにとりあえずコンテナ内に入って色々いじってみてただ単にlinuxを触っているんだなと言う感覚をつけることが先決だと思います。
ただ単にlinuxを触っているとわかれば、後は自分の作りたいシステムに対してどういうコマンドをどういう手順で打っていくのかをDockerfileに順番通り書いていけばイメージが出来ます。

複数のイメージを組み合わせて(バックエンドとデータベースとか)実行するために楽にする方法がdocker-compose.ymlだと思えば多分もう少しスッと理解できると思います。

そして上の質問をざっと見るに、多分volumeで指定しているディレクトリ名とコンテナ実態内に展開されているディレクトリ名を混同されているのかなと思います。

まずはいずれにしても上のように極々シンプルな構成でコンテナ内に入って無茶苦茶にいじってみることです。コンテナ内なら何をどうしても(例えば# rm -fr /とか)コンテナ内のlinuxがぶっ壊れるだけなのでexitしてしまえば元に戻ります(docker-compose run --rm frontend ashで実行していればexitすればコンテナを削除するし)。

1Like

Comments

  1. @kiyomasa05

    Questioner

    ご丁寧にありがとうございます。

    まだLinuxに慣れておらず、ググった知識だけでDockerで環境を作りたいと思い詰まった次第です。
    ご指摘の通り、もう少し色々いじり、試してみたいと思います。
    質問については、色々調べたり、エラー文を再確認したりすると、
    「ヒープ領域が足りないよ」というエラーに変わり、ヴァーチャルボックスのメモリを
    1024MBから2048MBに変更した上で、再度実行するとうまくいく様になりました。

    色々ご鞭撻いただき、まことにありがとうございます。

Your answer might help someone💌