なぜ解決したのかいまいちピンと来てないが、解決できたので、覚書き。

前提

バックエンドをrails api、フロントエンドをreactにて WEBアプリ制作中に直面したエラーについて。

rails s でサーバー立ち上げてブラウザ確認しようと思いlocalhostにアクセスすると、アクセスできずにコンソールに以下のエラーが表示されていた。

non-JS module files deprecated.

経緯

そもそも docker compose upをしたときに、

「railsのgemがインストールされてないよ」

というエラーが出ていた。

そのため、docker compose run api bashにて手動でコンテナ内部でbundle installして無理やりrailsサーバーを立ち上げていた。

したがって、gemのインストール周りが原因なのだろうとは予想できていた。

実際のymlファイルの中身

docker-compose.ymlファイルの状態を確認してみると以下の状態。

version: '3.9'
services:
  db:
    image: postgres
    environment:
      - POSTGRES_PASSWORD=password
      - POSTGRES_HOST_AUTH_METHOD=trust
    volumes:
      - db-postgres:/var/lib/postgresql/data
  api:
    build: ./backend
    command: /bin/sh -c "rm -f /api/tmp/pids/server.pid  && rails s -p 3000 -b '0.0.0.0' "
    ports:
      - 3000:3000
    volumes:
      - ./backend:/api
    depends_on:
      - db
  web:
    build: ./frontend
    tty: true
    command: bash -c " cd app-front && npm install && npm run dev --host "
    ports:
      - 5173:5173
    volumes:
      - ./frontend:/app
volumes:
  db-postgres:

確かにbundle installを立ち上げ時にできていないことが判明したので、ここでapiのcommandに

bundle install

を書き加えた。

この状態でdocker compose upを実行すると、すんなり立ち上がった。

以下、うまくいったymlファイルの全容。

version: '3.9'
services:
  db:
    image: postgres
    environment:
      - POSTGRES_PASSWORD=password
      - POSTGRES_HOST_AUTH_METHOD=trust
    volumes:
      - db-postgres:/var/lib/postgresql/data
  api:
    build: ./backend
    command: /bin/sh -c "rm -f /api/tmp/pids/server.pid && bundle install && rails s -p 3000 -b '0.0.0.0' "
    ports:
      - 3000:3000
    volumes:
      - ./backend:/api
    depends_on:
      - db
  web:
    build: ./frontend
    tty: true
    command: bash -c " cd app-front && npm install && npm run dev --host "
    ports:
      - 5173:5173
    volumes:
      - ./frontend:/app
volumes:
  db-postgres:

所感

gemの読み込み順序とかの問題なのだろうか。

この辺りの理解は乏しいので、今後の課題。