Zenn
Closed7

本番環境デプロイ後にレイアウト崩れが起きる問題の調査記録（Next.js）

Next.js
個人開発
koukou

開発環境では正常に動作
本番環境デプロイ後にレイアウト崩れが起きる問題が発生

考察&仮説

  • 質問投稿機能をマージする前までは正常なレイアウトだった
  • マージ後でも開発環境では正常レイアウトとして動作する
    　→ これらのことから、「ビルド時」に何かしらの問題があると思われる。
    　→ ただ、コンパイルに関しては問題なくコンパイルされているから、コンポーネントをいじったところでエラーの原因があるような気もする。
  • ヘッダーコンポーネントの読み込みが行われていない。ヘッダー部分をいじったのが影響しているか？
    　→ ヘッダーをもとの状態に戻して、npm run build で動作確認をしたい。

正しく動作していること

  • RailsAPIとの通信は問題なし
  • ログインは確り動作する

バグが起きているところ（バグ現象例）

  • 各ページがスマホ表示のように表示されている
  • トップページの表示されている色もところどころおかしくなっている
  • トップページの質問表示が微妙にズレている？
  • Layoutコンポーネントに指定していたTailwindのCSSが当たっていない

→ 全体的にCSS周りのレイアウト崩れが目立つ

バグ修正でコミットを出す

koukou

試したこと

  • ヘッダーコンポーネントを"aiko"という文字だけにした
    • "aiko"という文字列が表示されるようになった（ = ヘッダー部分が表示されることを確認）
      • → このことから、ヘッダーコンポーネントのどこかが原因であることは分かった
    • しかし、スマホ表示みたいになってしまうレイアウト崩れは直っていない
koukou

パッケージ系を下手にいじったりするより、一回コミット遡ってみてどこからレイアウトが崩れるのか調査したいよね

koukou

過去に戻る方法を会得した

git reset --hard コミットのハッシュ値で特定のコミットの状態まで遡ることができる。
git reset --hard ORIG_HEADでそのresetした状況をもとに戻すことが出来る。

参考

koukou

ほぼ解決した

結論、「コンポーネントの.js拡張子を途中で.jsx拡張子に変更したこと」が原因だったみたいだ。

発見までの流れ

過去に戻る方法を会得してから、過去に戻ってみた。
まず戻ったのは、「前回のマージしたところ」。

質問投稿機能を作成するための「質問投稿機能作成ブランチを切る前のところ」に戻った。
理由は、ここでのマージ時にはデプロイ後も確りとレイアウトが整っていることを確認していたから。
過去に戻って、npm run build → npm startを実行。無事に本番環境用でもレイアウトは整っていた。まあこれは納得。

次。「質問投稿機能ブランチを切った直後のファイル名を変更したコミットのところ」に戻った。
ここは最初正直飛ばそうかと思っていた。理由はただファイル名を変更しただけでコードの変更は何も行っていなかったから。
でも一応ということでこのコミットに遡って例のごとくnpm run build → npm startしてみた。
・・・・・。本番環境用のレイアウトが崩れた。
ここだった。。。

ファイル名の変更とは具体的に何をしたかというと、「コンポーネントの拡張子を.jsから.jsxに変更」した。

まさか、、と思ってファイル拡張子を.jsに戻して再度ビルドしてみた。
結果、レイアウトが整った。。。。原因はほぼここにあると確信した。

「コンポーネントの拡張子を.jsから.jsxに変更」したこと。
そうたったこれだけのこと。

そもそもなぜコンポーネントファイルを.jsx拡張子にしていなかったのか。それは、「過去に.jsxファイルにしたことによってエラーで悩み苦しんだことがあったから」という理由によるもの。

そしてこのことを思い出したときに気付いた、そういえば自分は昔このことに関してQiitaに記事を書いていたなと。
Reactでファイル拡張子を".js"から".jsx"にするとエラーが起きる（Error: ENOENT: no such file or directory, open '実行パス'）

ここに来てこれを思い出すことになるとは。。。
昔の自分ナイスすぎる。

結果として、自分が書いたQiita記事の通りにやるか、そもそも最初から.jsxファイルで作成すれば問題なく本番環境時でも動作するということ。

Reactのときはこの件でコンパイルエラーが出てくれたおかげで色々と調べることが出来たが、今回Next.jsで作成しているせいか、ビルド時にも何のエラーもなく通ってくれちゃうせいでこのことに気づくのがだいぶ遅れてしまった。

.jsx系のファイル名の拡張子変更には今後も気をつけないとなあと思った。

その後ちょっと色々試してみた感じ、node_modules削除してnpm installする方法ではjsx拡張子の問題を解決できなくなっていた。

拡張子を.jsxから.jsに全て直したところ正常にビルド時もレイアウトが整った状態で読み込まれたので、少し寂しいが基本的には拡張子は.jsで固定ということで。

koukou

その後、.js拡張子に全て直してPushしてマージしたところ、ちゃんと通常通りのレイアウトに戻ってくれました。めでたしめでたし👏

現在深夜3:45...😪

このスクラップは2021/03/24にクローズされました