AWS EC2において、JavaScript「img src」の画像だけ反映されないのを解決したい。

Question

現在の状況

• 非同期通信で、メッセージを入力できるようにしている。
• 本番環境において、メッセージは非同期通信で入力・反映出来ているもの、画像だけ反映されない。
• アセットコンパイルは行った。
• 他の画像は反映されるのに、JavaScriptでinsertAdjacentHTMLで挿入しているところだけ反映されない。
• Herokuによるデプロイは成功しているが、AWS EC2によるデプロイだと、画像が化けてしまう。

使用しているバージョン等

• Rails 6.0.3.4
• ruby 2.6.5
• capistrano 3.15.0
• unicorn 5.4.1
• nginx1

検証キーの様子

うまく行っている部分の画像は、Content-Typeについてきちんとimg/pngと認識している。

うまく行ってない部分の画像は、Content-Typeがtext/htmlと認識されている。
（つまり、画像として認識してくれていないと理解。）

現在の配置

画像については、imagesフォルダ内にある。（下の方にあるため画像は途中で切っていますが、この中にあります）

JavaScriptについては、post.jsが対象のファイルとなっている。

現在のコード

function post() {
    const submit = document.getElementById("submit_message");
    submit.addEventListener("click", (e) => {
    const formData = new FormData(document.getElementById("self_compassion"));
    const XHR = new XMLHttpRequest();
    XHR.open("POST", "/troubles", true);
    XHR.responseType = "json";
    XHR.send(formData);
    XHR.onload = () => {
      if (XHR.status != 200) {
        alert(`Error ${XHR.status}: ${XHR.statusText}`);
        return null;
      }
      const item = XHR.response.trouble;
      const list = document.getElementById("list_messages");
      const formText = document.getElementById("content_worry");
      if(document.querySelector("#trouble_message_type_trouble").checked) {
      const HTML_trouble= `
      <li class="message-left-side">
        <div class="pic-chat">
          <img src="images/sad.png" alt="落ち込んでいる画像">   ⇨⭐️実験１
        </div>
        <div class="text-chat">
        <div class="post-content">
          ${item.worry}
        </div>
        <div class="post-date">
          投稿日時：${item.created_at.slice(0,19)}
        </div>
      </li>`;
      list.insertAdjacentHTML("afterend", HTML_trouble);
      formText.value = "";
      return false;
    } else (document.querySelector("#trouble_message_type_encouragement").checked)
      const HTML_encouragement= `
      <li class="message-right-side">
        <div class="pic-chat">
          <img src="/assets/kind.png" alt="励ましている画像">　⇨⭐️実験２
        </div>
        <div class="text-chat">
        <div class="post-content">
          ${item.worry}
        </div>
        <div class="post-date">
          投稿日時：${item.created_at.slice(0,19)}
        </div>
      </li>`;
      list.insertAdjacentHTML("afterend", HTML_encouragement);
      formText.value = "";
      return false;
    };
    e.preventDefault();
  });
}
window.addEventListener('load', post);

状況

• 実験２の場合、ローカル環境とHerokuでは、非同期通信が出来て、画像反映も上手くいっている。

###仮説と実証

• こちらの記事において教えていただいたこと(アセットコンパイルをし直す等）を一つ一つ試してみた。しかし、今回上手くいかない。

• 画像までの絶対パスがエラーなのか？と思い、「⭐️実験１」のパスに変更。ローカル環境ではリロードしないと読み込まれないことと、AWSの本番環境では、リロードしても画像は表示されない状況。

###教えていただきたいこと

AWSの本番環境において、他のerbファイルにあるimg_tagは問題なく表示されるのに、JavaScript部分の画像だけ反映されないのは何故でしょうか？

今回の実装では、入力ボタンを押すと「画像・メッセージ」が丸ごと表示されるような仕組みになっています。
しかし、丸ごと表示させるような仕組みだと、HTMLに引っ張られて、Content-Typeをimgにさせることは出来ないのでしょうか？
（コールバック関数？と呼ばれるような、JavaScriptにおける読み込まれる順番などを工夫する必要があるのでしょうか?)

JavaScriptの仕組み自体がこれでは無理があるのか、イメージのパスが誤っているのか、わかりません。

どうぞよろしくお願いします。

Answer 1

画像として認識するしない以前に、404なので存在しないパスを指定していると思われます。

なぜそうなるかというと、assetsの中に配置した画像はアセットパイプラインの対象となり、最終的に画像ファイルのファイル名にフィンガープリントを追加して別の名前で使用するのですが、JavaScript側でその別名となった画像ファイル名を取得する方法がないからだと思います。
Railsだとimage_path等々でうまいことやってくれるでしょうが、JavaScriptはクライアント側で動くので普通にやっていてはそのパスが取得できないと思われます。

【Ruby on Rails】画像は public と app/assets/images のどちらに設置すべき？

もし、同じアプリケーション内で JavaScript を利用しており、JavaScript 内で画像を扱うのであれば、app/assets/images ディレクトリの画像はフィンガープリントが付いてしまうので（画像の URL が変わってしまうので）扱いにくいです。

こういう場合は public ディレクトリに置くしかないと思います。（体験談）

自分もRailsにはさほど詳しいわけではないので、他に解決策があったらすみません。

こちらの質問も参考になると思います。
Railsで扱う画像はassetsとpublic、どちらに置くといいのでしょうか？

解決策としては

• アセットパイプラインから外してpublicディレクトリに直接配置する
• JavaScriptでimage_pathを呼べるようにする

上の質問の回答やimage_pathをJavaScript側から使う

が主なところのようです。
個人的にはアセットパイプラインから外してしまえばいいのに、と思いますが…。

Comments

[cherry2020]

yu_1985さん、ありがとうございます！！！！
出来ました（；ω；）！！！

（１）JavaScriptで使う画像たちのみ、public配下へ移動
（２）JavaScriptのファイルや、それを表示されているビューのパスを
　　　<img src="/sad.png" alt="落ち込んでいる画像">
　　　とパスを変更。
（３）AWSにおいて、「bundle exec cap production deploy」だけだと上手くいかなかった
（４）EC２インスタンスに移動　「ps aux | grep unicorn」を確認したら以前のプロセス立ち上がったままだったため全てkill
（５）EC２インスタンスのままエンジンエックスとマリアDBの再読み込み。
　　　[ec2-user@ip-１１１ ~]$ sudo systemctl restart mariadb
　　　[ec2-user@ip-１１１ ~]$ sudo systemctl restart nginx

をしたら解決しました〜！！！！

色々調べた際に、「assets/images」「public」両方に画像を置く方法があるというのは
見かけたことはあったのですが、

yu_1985さんのおかげで、
●「assets/images」→アセットコンパイルされてブラウザ上に反映されている
●「public」→そのまま反映されている
●Railsでよく使うイメージタグは、Railsのヘルパーメソッドの力で上手く反映されていたこと
●JavaScriptのファンクションにおいてはそれを変換させるまでの力はなく、今回エラーになってしまっていたこと
の意味がようやくつながりました！！！！！

本当にありがとうございました。