本番環境でbootstrapが部分的に反映されない[rails tutorial 5章]

Question

前提・実現したいこと

rails-tutorial5章の最後herokuにデプロイした際にレイアウトが崩れてしまいます。デベロッパーツールで調べたところassetsが反映されていないようです。また本番環境においても自分で打ち込んだcssは正しく反映されているのですが、bootstrapが部分的に反映されていないです。部分的というのはボタンのレイアウトは反映されているのですが、マージンなどのレイアウトが反映されていません。開発環境では正しく反映されているレイアウトをproduction環境でも反映させたいです。

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

production環境におけるレイアウト(bootstrapによるもの)が開発環境と異なります。

該当のソースコード

具体的にどこが該当するコードなのか分かりません。デベロッパーツールのスクリーンショットをページ下部に添付しました。

試したこと

調べた結果herokuにアップする際に工夫しないといけないことがわかり、下記のリンクを試してみましたがうまくいきませんでした。

Rails6 Bootstrap4 を使って Heroku で Deploy
↑こちらのQiitaの内容を試してみたのですがレイアウトもassetsの中身も変わりませんでした。
現場で使えるRuby on Rails速習実践ガイド (Ch.6-9-5)でproduction環境で立ち上げるとCSS反映されない。
↑teratail内の似た質問です。

ターミナルで以下のコードも試してみましたがレイアウトは崩れたままでした。

ubuntu:~/environment/sample_app (master) $ heroku run "./bin/webpack"
Running ./bin/webpack on ⬢ intense-taiga-17857... up, run.1119 (Free)
Hash: 15d1bb7b54cf6326b9ba
Version: webpack 4.44.1
Time: 3695ms
Built at: 08/10/2020 11:36:41 AM
                                     Asset       Size       Chunks                         Chunk Names
    js/application-9afcbb5693aa87623e69.js    124 KiB  application  [emitted] [immutable]  application
js/application-9afcbb5693aa87623e69.js.map    139 KiB  application  [emitted] [dev]        application
                             manifest.json  364 bytes               [emitted]              
Entrypoint application = js/application-9afcbb5693aa87623e69.js js/application-9afcbb5693aa87623e69.js.map
[./app/javascript/channels sync recursive _channel.js$] ./app/javascript/channels sync _channel.js$ 160 bytes {application} [built]
[./app/javascript/channels/index.js] 211 bytes {application} [built]
[./app/javascript/packs/application.js] 749 bytes {application} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {application} [built]
    + 3 hidden modules

補足情報（FW/ツールのバージョンなど）

windowsのパソコンを使っています。開発はCloud9で行っています。

↑production環境のassets

↑開発環境のassets

rails-tutorialにはherokuにpushする際に工夫をしている様子はありませんでした。rails-tutorial通りにコードを書いていて、このようになるはずがなかったら教えてほしいです。その際はコードを書き直してみます。

また今回始めての質問です。質問の仕方が悪かったら、具体的に指摘していただけると嬉しいです。よろしくおねがいします。

Answer 1

developmentとproductionではassetsのfile構成が変わります。
developmentでは作成したfile各々がそれぞれ読みこむようにしますが
productionではそれを一つにまとめて扱います。

レイアウトがdevelopmentとproductionで違っていたら、その「一つにまとめる」ところがうまく行っていません。
rails 5までとrails6でやり方が違って、まだ勉強中でproductionまでやっていないのですが、多分 ./bin/webpack　を実行してサーバー再起動してください。

Comments

[ryo_o]

「一つにまとめる」など丁寧に教えてくださりありがとうございます。おかげで知識定着の助けになります。
しかし
./bin/webpack → git commit -am →　git push → git heroku push
してもうまくいきませんでした。

[winterboum]

heroku上で　webpackしてみてください

[ryo_o]

コメントありがとうございます。
heroku上でというのは「heroku run "./bin/webpack"」であっているのでしょうか？
ターミナルで
git commit -am → git push → heroku run ".bin/webpack" →git push heroku　したのですがうまくいきませんでした。heroku run ".bin/webpack" などの実行結果は投稿編集して載せときます。