adminLTEで管理画面を作成したい

Question

解決したいこと

adminLTEをインストールしたのですが、以下のエラーが出ており管理画面を作成できないです。

couldn't find file 'admin-lte/plugins/bootstrap/js/bootstrap.bundle.min' with type 'application/javascript'

ご教授いただきたいです。

前提

Dockerでrails7とtailwindの環境構築をしています。

発生している問題・エラー

該当するソースコード

・app/assets/javascript/admin.js

//= require jquery3
//= require rails-ujs
//= require admin-lte/plugins/bootstrap/js/bootstrap.bundle.min
//= require admin-lte/dist/js/adminlte

・app/assets/stylesheets/admin.scss

@import 'admin-lte/plugins/fontawesome-free/css/all.min.css';
@import 'admin-lte/dist/css/adminlte.css';

・config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( admin.js admin.css )

・Dockerfile

FROM ruby:3.1.2

ENV TZ Asia/Tokyo
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs && apt-get install -y vim

# 作業ディレクトリを指定
RUN mkdir /myapp
WORKDIR /myapp
ADD Gemfile /myapp/Gemfile
ADD Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]

自分で試したこと

node-modulesディレクトリ以下に、
admin-lte/plugins/bootstrap/js/bootstrap.bundle.min
があるのは確認しました。しかし、これが関係あるのか少し理解できていない部分もあるため調べ中です。

admin-lte/plugins/bootstrap/js/bootstrap.bundle.minのパスを探しに、

Checked in these paths: 
  /myapp/app/assets/builds
  /myapp/app/assets/config
  /myapp/app/assets/images
  /myapp/app/assets/javascript
  /myapp/app/assets/stylesheets
省略

で探していると思うのですが、Dockerコンテナがあるmyappディレクトリがないために、このエラーが出ているのではないかと考えました。

そこでDockerfileを以下に変更しbuildし直しました。

FROM ruby:3.1.2

ENV TZ Asia/Tokyo
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs && apt-get install -y vim

# Install yarn
RUN 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 \
  && apt-get install -y yarn

# Install npm
RUN apt-get update && apt-get install -y npm

# 作業ディレクトリを指定
RUN mkdir /myapp
WORKDIR /myapp
ADD Gemfile /myapp/Gemfile
ADD Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]

build後、ターミナルでdocker-compose run api yarn add admin-lteを入力しインストールは成功。

hoge@MacBook-Air-2 sample_app % docker-compose run api yarn add admin-lte
Creating sample_app_api_run ... done
yarn add v1.22.19
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > tempusdominus-core@5.19.3" has unmet peer dependency "moment@^2.29.2".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ admin-lte@3.2.0
info All dependencies
└─ admin-lte@3.2.0
Done in 57.63s.

コンテナ内にあるか確認しました

hoge@MacBook-Air-2 sample_app % docker exec -it sample_app_api_1 bash
root@2c0e86939cec:/myapp# ls /myapp/node_modules/admin-lte/plugins/bootstrap/js/
bootstrap.bundle.js	 bootstrap.bundle.min.js      bootstrap.js	bootstrap.min.js
bootstrap.bundle.js.map  bootstrap.bundle.min.js.map  bootstrap.js.map	bootstrap.min.js.map
root@2c0e86939cec:/myapp#

再度コンテナを立ち上げましたが、エラー内容は変わりませんでした。