Rails4でRailsエンジン使用時、親アプリのJSで使う画像を子アプリのpublic配下のimageファイルから参照したい

Question

#前提・実現したいこと・背景
前提：
Rails4でRailsエンジン使用。

実現したいこと：
親アプリのJSファイルの中のjQuery(Notify.js)でアイコンを参照する際、小アプリのpublic配下のimageファイルを参照したい。

背景：
問題はまさに以下の記事に書いてある内容でRails4のproduction環境でのみ、画像が表示されない問題です。
なので以下の記事の解決法3を採用しようと思ってます。
Rails4ではbackground:url("assets/hoge.png")の書き方は動かない話

今まさに詰まってる部分なので知見がある方やアドバイスいただける方ご協力よろしくお願いします。

発生している問題・エラーメッセージ

public配下のimageファイルを参照できない。
以下参照コードになります。

    $.notify {
      icon: '/public/login.png',
      title: 'System Notification',
      message: system_notification['msg'],
      url: system_notification['url'],
      target: '_blank'
    }

試したこと

• 子アプリのconfig/environements/production.rbとconfig/environements/development.rbに以下記載を追記

config.serve_static_assets = true

• 親アプリの.gemspecにpublicの記載を追加

参照：Rails engine's static assets not being served in host app

  s.files = Dir['{app,config,db,lib,public}/**/*', 'MIT-LICENSE', 'Rakefile', 'README.rdoc']

• 子アプリのlib配下のengine.rbに以下記載を追加

参照：How to copy over /public folder of Rails Engine to a Rails application in production?

class Engine < ::Rails::Engine
  if Rails.application.config.serve_static_assets
    initializer "static assets" do |app|
      app.middleware.insert_before(::ActionDispatch::Static, ::ActionDispatch::Static, "#{root}/public")
      end
    end
  end

上記を試してみましたがうまくいきませんでした。

補足情報(言語/FW/ツール等のバージョンなど)

Mac OS Catalina v10.15.4
Ruby on Rails v4.2.6
Ruby v2.3.0

Answer 1

今ってRailsの最新が6なんですけど、わざわざ４を使っているということは業務か何かですかね？
もしそうであるならばこんなところに質問せず、同僚や上司など社内の人間に質問すべきです。
コードもデータも実行結果も全て共有できるので圧倒的に解決が早いと思いますよ。

一応僕なりに解決法(？)を推測すると...

AppName
└ engine_name
　 └ public
　 　 └ engine_name
　 　 　 └ login.png

に画像を置き、

  $.notify {
-   icon: '/public/login.png',
+   icon: '/login.png',
    title: 'System Notification',
    message: system_notification['msg'],
    url: system_notification['url'],
    target: '_blank'
  }

とすれば表示されると思います。

ただし、画像をエンジン内で使用することがないのであれば

AppName
└ public
　 └ login.png

に画像を置くべきだし、jsがエンジンにしか作用しないものであればjsをエンジン内に置くべきです。

Comments

[cube_3110]

回答ありがとうございます。

> 今ってRailsの最新が6なんですけど、わざわざ４を使っているということは業務か何かですかね？
> もしそうであるならばこんなところに質問せず、同僚や上司など社内の人間に質問すべきです。
> コードもデータも実行結果も全て共有できるので圧倒的に解決が早いと思いますよ。
業務ですねぇ。
一応聞いたんですけど解決法が見つからなかったため今回、上長の許可をいただき、質問サイトに投稿させていただいた形になります。

画像はエンジンの中ではなく普通にホストアプリケーションのCoffeeScriptで使用することを想定してますね。。。
エンジン関係なく、ホストアプリケーションのAppName直下にpublic配置してそこに画像を置いて参照しようとしましたがやっぱりうまくいかないですね・・・

configの方でもいろいろ設定が必要だったりするのでもしかしたらその辺がうまく設定できてないのかもしれません・・・

[rhiroe]

本番環境でpublic下の静的ファイルを取得できないという話であれば、
config.public_file_server.enabled = true
が必要です。

[cube_3110]

ですよね。
Rails4系と5系以降だと書き方は若干違いますが、以下設定で行けるかなと思ったんですがこれでもうまく行かなかったです・・・
config.serve_static_assets = true

[rhiroe]

うーん、javascriptから
<img src="/login.png">
を表示させてみても画像表示されませんかね？

正直notify()のiconはその引数に値を渡してるだけなので、
それが関数内でどんな処理をするのかわかりません。
ドキュメント見た感じだとiconのオプションがなく、
記事とか探してやっとちらほら見かけるレベルなので、
どんな値を渡すのが正解なのかイマイチわかりません。
パッと見たところ url or classes とあったのでURLでもいけるとは思うんですが...。

とりあえず画像を表示できることが確認できたら
Notify.jsにIssueを出して聞いてみるのが手っ取り早いかも知れません。

Answer 2

まず　icon: '/public/login.png',　が違います
icon: '/login.png',

ほかはも少し見てみる

親アプリ、子アプリ　とい書いてあるのは、urlのホスト部が異なる別webサーバーなのですか？
そうなると、assets:precompile すると厄介ですね。
親から 'https://子アプリ/login.png' とすることになるか。
でもはて、、、
statickな画像をそのような無理無理に別ドメインから取り寄せる意味が有るのでしょうか？

追記
サービスの下請けなのでしたら、image fileを直接読むURLではなく、
その画像を返すサービスのURLを子に用意し、そのURLで呼ぶべきでは？
それでしたら 子側で提供方法を変えても親は知らぬこと。object指向では

Comments

[cube_3110]

>　まず　icon: '/public/login.png',　が違います
>　icon: '/login.png',
ありがとうございます！

> 親アプリ、子アプリ　とい書いてあるのは、urlのホスト部が異なる別webサーバーなのですか？
親アプリ、子アプリって表現が少しわかりづらかったかもしれません・・・
親アプリ＝ホストアプリケーション
子アプリ＝エンジン
です。
一部機能をマイクロサービス化したといった感じです。。。
あまりRailsの仕組みを理解してないので"urlのホスト部が異なる別webサーバー"についてはちょっとわからないです・・・
すみません。。。

> そうなると、assets:precompile すると厄介ですね。
まさにそれですね・・・
アセットプリコンパイルの理解が多分たりてないのかなと個人的に感じてます・・・

> statickな画像をそのような無理無理に別ドメインから取り寄せる意味が有るのでしょうか？
こちらに関しては確かにわざわざ子アプリから取らなくても大丈夫ですね・・・
なので親アプリの方にpublicフォルダーを設けてそこから取得するといった形で行けるならそちらで行きたいと思ってるところです。

[cube_3110]

> 追記
> サービスの下請けなのでしたら、image fileを直接読むURLではなく、
> その画像を返すサービスのURLを子に用意し、そのURLで呼ぶべきでは？
> それでしたら 子側で提供方法を変えても親は知らぬこと。object指向では
「その画像を返すサービスのURLを子に用意し、そのURLで呼ぶべきでは？」
↑
画像を直接publicの配下に置くのではなくクラウド上のどこかに画像ファイルを置いてそのURLを取得するみたいな解釈であってますかね？？？

[winterboum]

それだと、子アプリからもらうのではなく、子アプリと共有ですね？
システムの考え方がそれでも整合とれるならそれでも良いですが、回答に書いたのはそういう意味ではないです。
そもそも子アプリってなにものなのですか？Webシステム？それとも別物？
Webだとして、login.ngを http://子アプリ/images/login で表示するようにしたとして、
icon: 'http://子アプリ/images/login' とする

[rhiroe]

> そもそも子アプリってなにものなのですか？

Railsエンジン
https://railsguides.jp/engines.html

http://example.com/something
http://example.com/engine_name/something

みたいな感じでアプリ内部に飼ってる小さなアプリのことです。
代表的なものだとDeviseとかですね。
https://github.com/heartcombo/devise

[winterboum]

その意味での子アプリですと「小アプリのpublic配下」が意味不明ですが。
そのいみでしたら親も子もpublicは一緒ですよね？

[rhiroe]

僕の回答にも書いてある通りエンジン内にpublicディレクトリを掘ることは可能です。

[winterboum]

なる。

Answer 3

こちら無事解決しました！
結局public/images配下に画像を置く形でなく、app/assets/images配下に画像は置いた状態でアセットプリコンパイラされても参照できるようにRailsのgonというgemを使用してコントローラーでJSファイルで画像URLが使えるよう定義し、JS側で呼び出すといった形で対応しました！

※画像URLの定義については以下参照
https://qiita.com/yakimeron/items/f35f9698396f21057aef

gon.login_png_path = ActionView::Base.new.image_path('login.png')

    $.notify {
      icon: Constants.login_png_path,
      title: 'System Notification',
      message: system_notification['msg'],
      url: system_notification['url'],
      target: '_blank'
    }