質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

Q&A

0回答

740閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

0グッド

0クリップ

投稿2023/03/25 12:19

編集2023/03/26 06:44

解決したいこと

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

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

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

前提

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

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

スクリーンショット 2023-03-25 20.57.18.png

該当するソースコード

・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#

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問