デプロイはできたが…
本番環境にデプロイすることはできたが、Bootstrapだけが反映されてない、、という不具合をなんとか解消できた話です。
原因
恐らく、Bootstrapの最新版を使っていたための不具合でした。
なぜ最新版だと不具合が生じるの??
色々なものが日々アップデートされていますが、それらは全ての環境下で挙動を確認されているか、というとそうではないからです。
そのため、最新版を使っていればいい、というものではなく常にその時の安定版というものがありますので安定版を使うようにしましょう。
公式ドキュメントには…
公式ドキュメントには、Bootstrap5.2.0(最新)が安定版となりました!というブログが掲載されています。
これで動くはずだ!と思ってしまいますが、先輩エンジニアさんの方々の意見をしっかり聞くようにしましょう😭
私が最新版を使ってしまっていた原因
では、どうしたら最新版を使わずに済むかという話ですが、私が最新版を使ってしまっていた原因は、バージョンの指定なしでインストールしていたからです。
つまり、、、
username:~/environment/"アプリ名" $ yarn add bootstrap
このように導入していたんです。
(yarnでのインストールを選びました。他にも色々あります。)
バージョンを落とそう
どうやってバージョンを落とすか、という話ですが、もう一度yarnで入れ直せばOKです。
以下のコマンドでバージョンの指定をしてインストールすることができます。
username:~/environment/"アプリ名" $ yarn add bootstrap@5.1.3
バージョンの確認
入れ直しが完了したら、ターミナル上にバージョンが表示されるはずですが、「しっかりバージョン落とせたかな?」と心配になる方や途中で「あれ?何使ってたっけ?」と忘れてしまう方もいると思います。
そんな時は、アプリ直下にあるpackage.jsonを見てみるとバージョンを確認できますよ!!
#こんな感じ
{
"name": "アプリ名",
"private": true,
"dependencies": {
#割愛〜
"bootstrap": "5.1.3",
#割愛〜
しっかりバージョン落とせてますね!!
本番環境に反映する方法
①githubにpushする
開発環境でバージョンを落とせたことを確認したら、いつものようにpushしてください。
②pullする
本番環境にpullしてくれば反映されているはずです。
まとめ
スクールのメンターさんを頼れた時は意識していなかった問題にぶち当たり2日間ほど時間がかかってしまいました😱
色々便利なものを使うにしてもしっかりバージョンを確認しようと反省しました。