dockerでバックエンド側とフロントエンド側に分けて開発する際のディレクトリ構造について

Question

前提

dockerを利用してバックエンド側とフロントエンド側に分けて開発を行っています。しかし、あるエラーがどうしても解決できないので、そもそも自分のディレクトリ構造が間違っているのではないかと気になったので質問させていただきます。何かしら問題があればご指摘をお願いいたします。

詳細

環境構築の際に参考にしたサイト

私はこのサイトのとおりに環境構築を行いました。しかし、何かしらフロントエンド側で操作（yarn add など）をすると勝手にnode_moduleが作成されてしまい、以下の状態になってしまいます。（エラーがありますがいろいろいじりすぎたせいなので気にしないでください）

自分のディレクトリ構造

自分の考察

・この情報を見るまでは仕様だと思っていたので、特にディレクトリ構造は気にしていませんでしたが、よくよく考えてみると、このディレクトリ構造を使用している際に奇妙な現象が起きてしまいます。例を挙げると、
１ frontend/app/package.json と　frontend/package.jsonとで中身が違い、typescriptのバージョンも異なっている。yarn addで更新されるのは、frontend/package.json側だけでapp/の方のpackage.jsonはなぜか更新できない。
2 なぜかnode_moduleが２つ出来ている。
初期値(このサイトの通りにやった状態)から何かしらフロントエンド側でコマンドを実行すると、front/node_modulesが勝手に生成される。
など
・フロントエンド側の操作について
私はいつもdocker-compose コマンドをルートディレクトリで行っています。（写真で一番親のディレクトリ）Dockercompose を使う際に、毎回コンテナの中に入らずに、ルートディレクトリでdocker-comopse exec front yarn add 000のようにコマンドを打っています。また、コマンドを打つ際にはルートディレクトリではなく、/front/appでコマンドを打つ必要があるのでしょうか（バックエンドならバックエンド側）？どちらのディレクトリでコマンドを入力しても変わらないと思っていますが、この認識は間違えていますでしょうか？
・初心者なので、おかしな質問をしているかもしれませんが、何かしらアドバイスがあればよろしくお願いいたします。

Answer 1

参考にしているソースが間違っているかもしれませんね。
現状の設定に対してキャプチャの様なディレクトリ構造になるのは問題ないと思います。

多分ですけど、docker-compose.ymlのfront > volumesの値が- ./frontend:/usr/src/appではなく- ./frontend/app:/usr/src/appでないとうまくいかない気がします。
ただ、これをしたらこれをしたで別の問題が出るかもしれません(何か問題があったから後から- ./frontend:/usr/src/appにしたのかもしれません)
個人の備忘録として書いているようなのであくまでも参考程度にしたほうが良いかと思います。

ちなみにここに質問するよりも参考に下記事に対してコメントしたほうが親身なヒトであれば色々回答してくれるかもしれません。

Comments

[Yuu]

ちなみにただ- ./frontend/app:/usr/src/appに直しただけでは動かなかったので、front > commandのsh -c "cd app && yarn && yarn start"をsh -c "yarn && yarn start"に変更した所動きました。(app配下をマウントした為appに移動する必要がなくなった)
一応これだとnode_moduleが./frontend/app配下にのみ生成されると思います。
ただ、backendの方は色々かみ合っていなくて、Dockerfile内でruby3.0を指定しているのですが、最新のものはruby3.0.4をインストールします。
これがbackendディレクトリ内のruby-versionやGemfileのバージョンとかみ合っておらず、ruby3.0.3になっており、この差分で多分エラーが出ます。(出たと思います。)
もうここまで来たら自分で作ったほうが速そうな気もしますが、(apiのportが3001から3000に変換されてfrontのportが4000から3000に変更されている意図も個人的に不明。悪い手ですが、このまま本番でも動かすのであればfrontは80:3000、apiは3000:3000でいける気がする。せめてfront 4000:3000, api 3000:3000でいいのでは?)ベースとして使用したいのであれば本人に確認するか、私の方法または他の回答者からの回答を参考にしたほうが良いと思います。

[senseIY]


回答して頂きありがとうございます。頂きましたアドバイスの通りにコマンドを入力したところ、写真のように上手くディレクトリが構成されました。
追加の修正としましては、

変更前　$ docker-compose run --rm front sh -c "yarn create react-app app --template typescript"
変更後　$ docker-compose run --rm front sh -c "yarn create react-app . --template typescript"
*変更前だと、frontend/app/appというディレクトリ構造になってしまい、上手くdocker-compose up できないです。