大変お世話になっております。
こちらのページを参照しながら「いいね」機能を実装したものの、本番環境でjqueryが上手く動作せず解決できないでおります。
https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker/
いいねボタンを押すとハートマークが赤く光り、カウントが増えるというシンプルなものです。
また、EC2にてデプロイしております。
本番環境ではコンソールにて
GET http://54.248.141.122/packs/js/application-90b30bbd2543e35280af.js net::ERR_ABORTED 404 (Not Found)
というエラーが吐かれており、いいねボタンを押すと404エラーが発生します。
開発環境では問題なく動作しているのになぜでしょうか・・・
なお以下の手順でjqueryをインストールしております。
$ yarn add jquery
webpack/environment.js を編集
const { environment } = require('@rails/webpacker') const webpack = require('webpack') environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery' }) ) module.exports = environment
【app/javascript/packs/application.js】を編集
require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require("jquery") //←これを追記 require("../delete")
以上です。
どなたかお力を貸して頂ければ幸いです。
以下ご参考までに各コードです。
いいねボタンを実装するインデックスファイル
【index.html】
〜 <%= render partial: 'likes/like', locals: { nutrition: nutrition} %> 〜
【views/likes/_like.html.erb】
<div class="like-link" id="like-link-<%= nutrition.id %>"> <% if current_user.likes.find_by(nutrition_id: nutrition.id) %> <%= link_to unlike_path(nutrition.id), method: :delete, remote: true do %> <div class = "iine__button">❤️<%= nutrition.likes.count %></div> <% end %> <% else %> <%= link_to like_path(nutrition.id), method: :post, remote: true do %> <div class = "iine__button">♡️<%= nutrition.likes.count %></div> <% end %> <% end %> </div>
【views/likes/like.js.erb】
$("<%= @id_name %>").html("<%= j(render partial: 'likes/like', locals: {nutrition: @nutrition}) %>");
【views/likes/unlike.js.erb】
$("<%= @id_name %>").html("<%= j(render partial: 'likes/like', locals: {nutrition: @nutrition}) %>");
【app/javascript/packs/application.js】
// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. //= require jquery //= require rails-ujs //= require turbolinks //= require_tree . require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require("../delete") // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true)
ご指導頂ければ幸いです。
あなたの回答
tips
プレビュー