npm run buildしたReactアプリが真っ白になり何も表示されない原因と解決法

先日作ったReactのTodoアプリをサーバーに公開するため、npm run buildでビルドしたファイルをアップロードしたのだが、ローカルホストではうまく動作していたはずのアプリが真っ白になり何も表示されなかった。

Chromeのデベロッパーツールを確認すると以下のようなエラーが大量に発生していた。

ステータスコード404が返っているので、エラーの原因はファイルパスの問題だとすぐに分かったが、なぜこのようなことが起きたかを解説していく。

エラーの原因

今回、アップロードしたサーバー上のディレクトリはこちら。

/react-todo/

ビルドして出来上がったindex.html内の各種ファイル読み込み先パスを見てみると、どれも/static/css/...のようにルートパスで指定されていた。

これではreact-todo配下のファイルを読み込むことができないので当然エラーとなる。

この問題を解決するには、パスの指定を変更する必要がある。

package.jsonを開き、homepageの設定を追記する。

今回は相対パスでの指定としたが、"/react-todo/"でも問題ない。

ファイルを保存し再度npm run buildを実行すると、パスの指定が変更され先ほどの404エラーは全て解決されているはずだ。