前提・実現したいこと
rails5で開発中です。htmlファイル(haml)を本番環境(AWS)へデプロイすると、
htmlのソースコード内容の一部がブラウザ(chrome)へ反映されません。
本番環境のhtmlファイルを確認すると、htmlのソースコードは正しいのですが、
ブラウザでは一部分が反映されず、表示が崩れています。
デベロッパーツールで確認するもhtmlのソースコードが途中から消えています。
開発環境では正常に表示されておりエラーも出力していない為、困っています。
※ マークアップではbootstrap4を使用して開発しています。
発生している問題・エラーメッセージ
特に出力していません
該当のソースコード
application.html.haml(本番環境)
1!!! 2%html 3 %head 4 %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/ 5 %title Skal 6 = csrf_meta_tags 7 = csp_meta_tag 8 = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' 9 = javascript_include_tag 'application', 'data-turbolinks-track': 'reload' 10 %link{crossorigin: "anonymous", href: "https://use.fontawesome.com/releases/v5.8.1/css/all.css", integrity: "sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf", rel: "stylesheet"}/ 11 %body 12 = yield
html.haml(本番環境)
1.container-fluid.col-12.p-10.m-0.row{ style: "position: relative"} 2 = render partial: 'profiles/menu-xl' 3 = render partial: 'profiles/menu-phon' 4 %section.col-12.col-xl-10.p-0 5 %header.row 6 %button.btn.btn-link.text-body.d-md-none.col-2{"data-toggle" => "collapse", "data-target" => "#menu"} 7 %i.fas.fa-bars.fa-4x 8 %h1.col-8.col-md-12.text-center.display-2 S k a l 9 .container 10 %nav.navbar.navbar-expand{ style: "height: 50px; font-size: 1.5rem" } 11 %ul.col-12.nav.nav-tabs 12 %li.nav-item.col-3.text-center.px-0 13 %a{href: '#ios', class: 'nav-link active text-secondary', "data-toggle" => "tab"} 友達さがし 14 %li.nav-item.col-3.text-center.px-0 15 %a{href: '#android', class: 'nav-link text-secondary', "data-toggle" => "tab"} 飲み仲間さがし 16 %li.nav-item.col-3.text-center.px-0 17 %a{href: '#a', class: 'nav-link text-secondary', "data-toggle" => "tab"} 仕事仲間さがし 18 %li.nav-item.col-3.text-center.px-0 19 %a{href: '#b', class: 'nav-link text-secondary', "data-toggle" => "tab"} とにかく誰でも 20 .tab-content 21 .tab-pane.active#ios 22 .row 23 %section.col-6 24 %div 25 = image_tag "/image.jpeg", class: "img-fluid rounded" 26 .row 27 %ul.pt-2.pl-3.pr-0.list-unstyled.col-4 28 %li テスト1 29 %li 20 30 %li 東京都 31 .col-8.pt-2{ style: "overflow: hidden; word-break: break-all; max-height: 80px;" } 32 testesttesttesttesttesttesttesttestesttesttesttesttesttesttesttesttestest
ブラウザに反映されていない部分
html.haml(本番環境)
1 .tab-content 2 .tab-pane.active#ios 3 .row 4 %section.col-6 5 %div 6 = image_tag "/image.jpeg", class: "img-fluid rounded" 7 .row 8 %ul.pt-2.pl-3.pr-0.list-unstyled.col-4 9 %li テスト1 10 %li 20 11 %li 東京都 12 .col-8.pt-2{ style: "overflow: hidden; word-break: break-all; max-height: 80px;" } 13 testesttesttesttesttesttesttesttestesttesttesttesttesttesttesttesttestest
試したこと
アセットプリコンパイル
rake assets:precompile RAILS_ENV=production
設定を変える
config/production.rb
1config.assets.compile = true
回答3件
あなたの回答
tips
プレビュー