React×Firebaseでデプロイしても白い画面しか表示されない原因とその対処法

問題と原因

FIrebase Hostingでアプリをデプロイしたのですが、デプロイ先のURLを開いても白い画面のまま止まってしまうという現象に陥りました。

問題はHostingで公開するディレクトリの設定が間違っていたことです。

firebase initコマンドで設定する操作のうち

What do you want to use as your public directory? public

この質問に対してデフォルト値であるpublicで答えていたことが原因みたいです。

解決方法

上記の質問に対してbuildで答えるのと、buildディレクトリを生成する必要があります。
まずはbuildディレクトリを作成します。

npm run build

次にfirebase initコマンドを起動して

What do you want to use as your public directory? build

buildディレクトリを指定してあげましょう。
最後にfirebase deployをして、HostingURLにアクセスすると無事にアプリが開けるはずです。
firebase deployでのエラーに対する一対処法はこちらも参照してみてください。

終わり