herokuで、Bootstrapを正しく描画する

Question

前提・実現したいこと

ローカル環境では正しく描画されるのですが、
herokuにデプロイしたwebアプリが、正しくレイアウトされません。
有効にするためにはどうしたら良いでしょうか？

• webpackerでbootstrapを導入

記述しているコードの内容

現状、以下のURLを参考にコードを記述をしています。
https://qiita.com/mokuo/items/6d792986e63598370b30

app/javascript/
├── channels
│   ├── consumer.js
│   └── index.js
├── packs
│   └── application.js
└── src
    ├── js
    │   ├── panel.js
    │   └── user.js
    └── application.scss

    = stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

//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',
        Popper: ['popper.js', 'default']
    })
)
module.exports = environment

//application.js

require("@rails/ujs").start()
//require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')

import 'bootstrap'
import '@fortawesome/fontawesome-free/js/all'
import '../src/application.scss'
import 'src/js/panel'
import 'src/js/users'

//application.scss
@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

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

現状の画面

ちなみに下記のURLでも、同じherokuのデプロイで、回答を募集しております。
こちらはherokuのドキュメントを読みながら行い、要求された内容を実施していった結果発生したエラーです。
https://teratail.com/questions/278812

どちらのアプローチでもデプロイ自体は成功していますが、描画ができない。

Comments

[Cojiro]

> どちらのアプローチでもデプロイ自体は成功していますが、描画ができない。

お力になれるかはわかりませんが、
描画ができないという表現では、状況がわかりませんので正しく教えてください。

・ページのコンテンツは表示されるのか、されないのか。
・表示される場合、
bootstrap以外のjs,cssの読み込みはできているのか、いないのか。
bootstrapのjsとcssがそれぞれ読み込みできているのか、いないのか。

ログに関して
・サーバーのエラー
・ブラウザのコンソールのエラー
は確認していますか？
エラーがあれば記載した方がいいと思います。

[Malson]

kojiro12345様、
ありがとうございます。
１. ページのコンテンツは表示されており、
cssは効いていますが、分けているレイアウトが全てインライン要素で縦に並んではしまっています。
ナビゲーションバーの設定がある部位と、後はグリッドシステムを記述している部位です。
補足に画像をアップいたします。

ログは確認しましたが、特にエラー分は表記されていません。

[Cojiro]

ページの表示はできているんですね。

下記についてはどうですか？
bootstrap以外のjs,cssの読み込みはできているのか、いないのか。
bootstrapのjsとcssがそれぞれ読み込みできているのか、いないのか。

ちなみにブラウザ上でそれぞれ読み込みができているのかという質問です。

[Malson]

申し訳ないです。

bootstrap以外のjs、cssは読み込みできています。
しかし、bootstrapのjsとcssが読み込まれていません。

[Cojiro]

エラーがない、
bootstrap以外のjs,cssは読み込めている、
bootstrapのjsとcssが読み込まれていない。

これはおかしい気がします。

エラーがないなら、bootstrapのスタイルが適用されると思いますし、bootstrapのスタイルが適用されないなら、エラーが出ていると思います。

webpackのビルドもエラーはありませんか？

この問題は最初のデプロイから発生していますか？

[Malson]

kojiro12345

最初の問題とは異なります。
最初の問題も、ここの問題もデプロイまでは成功しているのですが、

最初の問題は描画自体ができない。ログにエラーが残る。

後の問題は描画自体はできていますが、bootstrapの部分だけは適応されていません。

補足にある画面の写真が、それです。
cssはしっかり効いていますし、javascriptで動かす部分も作用はします。
ナビゲーションや、トグル、グリッドとレスポンシブレイアウトをbootstrapで設定してはいるのですが、こちらは適応されておりません。

[Cojiro]

最初のデプロイからエラーが変わっているのなら、その際に変更した設定が影響しているかもしれませんね。

ちなみにですが、
bootstrapのjsとcssが読み込まれていない。というのは、
application-xxxxx.css(xxxxxはランダムな文字列)の中身を見てbootstrapのcssの記述がないと判断されましたか？
中身は圧縮されているのでわかりにくいですが、空白や改行が削除されているだけで意味はわかる文字列です。

[Malson]

最初のデプロイとはリポジトリそのものを分けてデプロイを実施しているので、設定がかぶっている箇所はないですが、アプローチが違いすぎて比較できないのですよね。
今回のデプロイするときもheroku apps:destroyで削除してから作り直してpushしています。

bootstrapが読み込まれていないのはview画面を見ての判断でした。
トグルが開きっぱなしなのと、レイアウトが崩れていることからでした。

>>application-xxxxx.css(xxxxxはランダムな文字列)の中身を見てbootstrapのcssの記述がないと判断されましたか？
基本的な質問で申し訳ないのですが、これはどうやって確認できるのでしょうか？

[Malson]

検証ツールで見たelementが持つstyleの中にはそれらしい記述がないのですよね

[Cojiro]

> 基本的な質問で申し訳ないのですが、これはどうやって確認できるのでしょうか？
ブラウザの検証ツールから確認できます。

ちょっとよくわからないですが、
今回のリポジトリでHerokuのアプリを作り直しているということでいいですか？
となると、おかしいですね。
Railsのバージョン、HerokuのBuildpack、Webpkacerのバージョンあたりが怪しいのかもしれませんね。
だとしてもエラーがどこにも出力されてないというのがしっくりこないですが。

改めて確認ですが、
最新のソースで本当にローカルでBootstrapのスタイルが適用されていますか？

ローカルでできてないとしたら、
application.js の
import '../src/application.scss'
は気になるところです。
import 'src/application.scss'
で試してみてください。

[Malson]

kojiro様、

ローカルでは完全に適用され、グリッドシステムも、トグルも挙動を確認しています。
色々と試してみましたが、無理そうなのでherokuでBootstrapを適用させるのは一旦時間をおこうと思います。

今回は、純CSSでレイアウトを作って仕上げようと思います。
ありがとうございました。

[Cojiro]

そうでしたか。

もう少しご自身で仕組みを理解して問題が切り分けられるといいですね。
参考までに、、、私は今Rails6.0.3をHeroku(stack18)で運用しており、特段詰まったことがありませんでした。(もしくはさほど難しくない問題だった)
BootstrapではなくMaterializeなので全く同じケースではないですが。

こういう問題でハマって自分の知識で解決が難しい時は、もうやられているかもしれませんが、rails newをして、最小構成で動作を確認していく手法を取ります。今回だと、Bootstrapだけをyarn addして、適当に1ページ用意して、Bootstrapのスタイルが適用されるか、Javascriptが動作するかを確認します。
そして、自分の作りたい環境構成(今まで書いたソースで関係ありそうなところをコピペしたり他のライブラリを追加したりなど)にどんどん寄せていくということをします。時間はかかりますが、表層的に何かできているよりもいろいろ理解できるので応用力がつくのでおすすめです。

[Malson]

Kojiro12345様、
アドバイスありがとうございます。
しっかり解決はしたいので、少しずつやっていきたいと思います。
まだまだインプットすることが多いので、配分する時間の割合を決めて、新しいことと、この問題に対しても振り返っていきたいと思っています。

Answer 1

上記の流れとは異なるが、Bootstrapのソースコード自体をjavascriptディレクトリに入れて、コンパイルされることで解決した。