create-react-appで作ったReactアプリケーションがローカルサーバでしか動かない

どうしたの

Reactでアプリケーションを作っている時に,ディレクトリ構成をごにょごにょしてローカルサーバで動作することを確認, そのままデプロイしたら本番環境で画面が真っ白になっていました.

デプロイ先はgithub pagesのサーバです.

なんだこれと思いながら色々調べるのに時間がかかったのでメモしておきます.

原因

ビルドにwebpackを使っているんですが,webpackがビルドする時に相対パス指定をぶっ壊してしまっているっぽいことが原因みたい.

ただ,create-react-appだとwebpackの設定をいじれないのでここで難儀しました.

解決法

アプリケーションのルートディレクトリにjsconfig.jsonというファイルを作成して,そこにビルド時の設定を記述することで解決できました.

記述は以下のような感じです.React関連のJavaScriptファイルがsrcディレクトリ以下に存在することを仮定しています.

jsconfig.json

{
    "compilerOptions": {
        "target": "es2015",
        "baseUrl": "./src/"
    }
}

まとめ

github pagesにデプロイしていることもあり,ブランチを雑に弄ったりするのはやだな〜と思っていたので,簡単に解決できて良かったですね.