Reactのライブラリでインポートエラーが出てしまう

Question

前提

こちらの記事を参考にディレクトリ構造を書き換えて、docker comopse upしたところ、全てのライブラリでインポートエラーが出てしまいました。ですが、コンポーネントをインポートする際にはエラーが出ていないので、恐らくですが、package.jsonが何らかの理由で読み込まれていないことが原因かと予想していますが、どうすれば対処できるのか分かりません。

ディレクトリ構造

Dockerfile(Rails)

FROM ruby:3.1.2-buster

RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
  curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
  echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
  apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs default-mysql-client yarn 

ENV APP_PATH /myapp

RUN mkdir $APP_PATH
WORKDIR $APP_PATH

COPY Gemfile $APP_PATH/Gemfile
COPY Gemfile.lock $APP_PATH/Gemfile.lock

RUN bundle config set force_ruby_platform true

RUN gem install bundler
RUN bundle install

VOLUME /tmp
# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
CMD ["rails", "server"]

Dockerfile(frontend nginx)

FROM node:16-alpine as build
WORKDIR /home/node/app
COPY ./app /home/node/app
RUN yarn 
RUN yarn run build

FROM nginx:alpine
RUN rm -f /etc/nginx/conf.d/*
COPY --from=build /home/node/app/build /var/www
ADD ./nginx.conf /etc/nginx/conf.d/
CMD /usr/sbin/nginx -g 'daemon off;' -c /etc/nginx/nginx.conf

docker-compose.production.yml

version: '3.3'

services: 
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - '3306:3306'
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - db-data:/var/lib/mysql
  api:
    build: 
      context: ./backend/
      dockerfile: Dockerfile
    volumes:
      - ./backend:/myapp
      - bundle:/usr/local/bundle
    depends_on:
      - db
  frontend:
    build:
      context: ./backend/frontend/
      dockerfile: Dockerfile
    ports:
      - "3000:80"
    volumes_from:
      - api
    depends_on:
      - api

volumes:
  db-data:
  bundle:

nginx.conf

upstream api {
  server unix:/myapp/tmp/sockets/puma.sock;
}
server {
  listen       80;
  server_name  localhost:3000;
  charset      utf-8;

  root /var/www/;
  index index.html index.htm;

  location / {
    try_files $uri /index.html;
  }

  location /api/v1 {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_pass http://api;
  }

  error_page 500 502 503 504 /500.html;
  client_max_body_size 4G;
  keepalive_timeout 10;

}

package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@material-ui/lab": "^4.0.0-alpha.61",
    "@material-ui/styled-engine": "^5.0.0-alpha.11",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.10.0",
    "@mui/styles": "^5.9.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/axios": "^0.14.0",
    "@types/jest": "^28.1.7",
    "@types/js-cookie": "^3.0.2",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@types/react-router-dom": "^5.3.3",
    "@types/styled-components": "^5.1.26",
    "@types/wavesurfer.js": "^6.0.3",
    "add": "^2.0.6",
    "axios": "^0.27.2",
    "axios-case-converter": "^0.9.0",
    "intro.js": "^6.0.0",
    "intro.js-react": "^0.6.0",
    "js-cookie": "^3.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-select": "^5.4.0",
    "rooks": "^6.4.2",
    "styled-components": "^5.3.5",
    "typescript": "^4.4.2",
    "wavesurfer.js": "^6.2.0",
    "web-vitals": "^2.1.0",
    "yarn": "^1.22.19"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "@babel/preset-typescript": "^7.18.6",
    "babel-jest": "^28.1.3",
    "jest": "^28.1.3",
    "jest-environment-jsdom": "^28.1.3",
    "ts-jest": "^28.0.8"
  }
}

考察など

・package.jsonにインポートするライブラリは入っています。
・ディレクトリ構造を書き換える前（nginxを使っておらず、backend frontendが同じディレクトリに存在していた時）
・検索すると、コンポーネントのエラーについてはヒットするが、ライブラリのインポートについてのエラーで参加になりそうなものはまだ見つけられていない
・開発環境で起こっている（＊本番環境もこれでデプロイ）
・何かしらアドバイスがあればよろしくお願いいたします。不備があれば追記いたします。

追記

今気づきましたが、node_moduleがないみたいです。なのでインストールしようと思ったのですが、

$ docker compose -f docker-compose.production.yml exec frontend yarn
OCI runtime exec failed: exec failed: unable to start container process: exec: "yarn": executable file not found in $PATH: unknown

このようなエラーが出てしまいました。現在デバッグ中です

Comments

[hoshi-takanori]

参考にした記事には、Dockerfile(フロントエンド) について、

> ここでのポイントはマルチステージビルドを行なっていることです。
> １〜５行目でローカルのReactのソースコードをビルド。ここで生成されたものをnginxコンテナの/var/wwwにコピーすることで、Nginx上でReactを動かすことができるようになります。

とあるように、React に関してはビルドした結果しか残らないので、frontend イメージには yarn も node_modules も存在しないのだと思います。

[senseIY]

追記ありがとうございます。
確かにその通りですね。気が付きませんでした。

Answer 1

ディレクトリ構造を元に戻した（バックエンド側とフロントエンド側を完全に分離した構成に戻した＋docker-compose.ymlも修正以下のリンクを参考）
ところ上手く作動したので、解決済みにさせていただきます。貴重なお時間を割いて頂きありがとうございました。

https://qiita.com/taki_21/items/613f6a00bc432d1c221d

Answer 2

ローカルでnpm installを実行していない、ということはありませんか？

VSCodeから見えるのは、ローカルにあるnode_modulesだけです。

Comments

[senseIY]

返信ありがとうございます。実はcerate-react-app はyarnコマンドで行ったのでパッケージマネージャーはnpmではなくyarnだと認識しております。そのため、参考にしたサイトではnpmで行っている部分もyarnに置き換えてコマンドを実行していました。私の認識では、yarnとnpmはどちらか片方のみしか使えない（同時使用不可）と認識していますが、どうなのでしょうか。もしかするとDockerfile(frontend nginx)のyarnのコマンドもnpmに変更するべきでしょうか。私は以前yarnとnpmを間違えて同時に使用したため（それが原因かは不明ではあるが）バグが発生したため、最初からcreate-react-appしなおしたという経験があります。大変恐縮ではございますが返信いただければ幸いです。

[senseIY]

追記失礼します。参考にしたサイトではyarn.lockがあるにもかかわらず、Dockerfileでnpm コマンドを実行しているようです。なぜこのようなことをしているのでしょうか。

[maisumakun]

> 返信ありがとうございます。

特にnpmを指定する意図ではなく、単に「ローカルでもパッケージのインストールが必要」というだけの回答のつもりでした。

[senseIY]

> 特にnpmを指定する意図ではなく、単に「ローカルでもパッケージのインストールが必要」というだけの回答のつもりでした。
承知いたしました。すみません、いただいた助言を誤解してしまったようです。大変申し訳ございませんが、上手くデバッグ出来なかったので、ディレクトリ構造を元に戻した（バックエンド側とフロントエンド側を完全に分離した）ところ上手く作動したので、解決済みにさせていただきます。貴重なお時間を割いて頂きありがとうございました。