解決したいこと
Failed to load resource: the server responded with a status of 404 (Not Found)
アプリを本番公開しましたがローカルで動いていたはずのjsが動きません。
解決方法を教えて下さい。
Rails7/Mac/Amazon Linux2
発生している問題・エラー
Failed to load resource: the server responded with a status of 404 (Not Found)
/assets/custom/hoge.js:1
調査したこと・試したこと
ファイルのパス確認と変更を色々試してみましたが改善されません。
困っています。
# app/javascript/application.js import "@hotwired/turbo-rails"; import "controllers"; import*as bootstrap from "bootstrap"; import*as hoge from "./custom/hoge.js";
app/javascript/custom/hoge.js
$(document).ready(function() { $('body').hide().fadeIn(2000); //スクロールアニメーション ScrollReveal({ desktop: true, reset: true, distance: '60px', duration: 2500, delay: 400, }); ScrollReveal().reveal('section, fadeIn'); ScrollReveal().reveal('.main-title, .main-title_01, .section-title', { delay: 500, origin: 'left' }); ScrollReveal().reveal('img, .media-icon, .btn_sec_06', { delay: 500 }); ScrollReveal().reveal('.info, .info-title, .text-box, .text-box_01 ', { delay: 500, origin: 'top' }); ScrollReveal().reveal('.madia-info', { delay: 500, origin: 'left' }); }); //Scroll top 上にスクロール $(window).scroll(function() { if ($(this).scrollTop() > 100) { $('.scroll-up').fadeIn(); } else { $('.scroll-up').fadeOut(); } }); $('a[href="#totop"]').click(function() { $('html, body').animate({ scrollTop: 0 }, 'slow'); return false; });
app/views/layouts/application.html.erb
<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">--> <!--FontAwesomeのアイコン--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" /> <link href=”https://use.fontawesome.com/releases/v6.0.0/css/all.css” rel=”stylesheet”> <!--FontAwesomeアニメーション--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" /> <!--google font--> <title>Hello, world!</title> <%# hack for popperjs error: https://github.com/rails/importmap-rails/issues/65#issuecomment-999939960 %> <script> window.process = {env: {}} </script> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> </head> <body> <%= render 'shared/header' %> <% if flash[:notice] %> <div class="alert alert-success alert-dismissible fade show mb-0" role="alert"> <%= flash[:notice] %> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> <% end %> <% if flash[:alert] %> <div class="alert alert-warning alert-dismissible fade show mb-0" role="alert"> <%= flash[:alert] %> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> <% end %> <%= yield %> <%= render 'shared/footer' %> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>--> <!-- Option 2: Separate Popper and Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="https://unpkg.com/scrollreveal"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> </body> </html>
config/importmap.rb
pin "application", preload: true pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true pin_all_from "app/javascript/controllers", under: "controllers" pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.2.3/dist/js/bootstrap.esm.js" pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.6/lib/index.js" #javascript custom pin_all_from 'app/javascript/custom', under: 'custom'
初心者です。色々試しましたが中々エラーが改善できません。とても困っています、どうかお願いします助けてください。
![guest](/img/icon/icnUserSample.jpg)
あなたの回答
tips
プレビュー